1) HTML로 코딩하기
HTML로 코딩한 웹페이지
= 문서(Document)
태그
= 개체를 화면에 어떤 형태로 나타내야 되는지
웹브라우저에게 알려줌
(HTML = 마크업 언어)
[HTML 기본 구조]
<!DOCTYPE html>
= 웹브라우저가 어떤 버전의 HTML로
작성 되었는지 파악
(HTML 태그가 아님)
<html>
= 웹페이지가 html로 작성됨
<head>
= 웹페이지 전체에 적용할 사항을 코딩
(웹페이지 본문에 나타나지 않음)
<title>
= 웹페이지 본문이 아닌
제목 표시줄에 나타남
<body>
= 웹페이지에 나타낼 내용을 기입
<코드 작성 시 주의 사항!>
ㆍ 태그를 빼먹거나 태그 순서가
잘못되지 않았는지 확인!
ㆍ철자가 틀리지 않았는지 확인!
ㆍ소문자를 올바르게
사용했는지 확인!
ㆍ필요한 기호를 모두 썼는지,
제대로 순서를 나열했는지 확인!
ㆍ굽은 큰따옴표(“ ”)가 아닌
곧은 큰 따옴표(" ")를 사용했는지 확인!
ㆍ닫힘 태그에서 왼쪽 각괄호(<)
바로 뒤에 '/'를 썼는지 확인!
ㆍ작성한 코드를 HTML파일(*.html)로
저장했는지 확인!
<들여 쓰기>
<body>
<p>Hi~</p>
</body>
HTML코드에서 공백은 특별한 의미가 없다.
읽기 편하게 코딩하기 위해서
'TAB(탭)' 키를 사용하여 들여쓰기를 하자!
※ 네스팅(nesting)
= 다른 태그 사이에 태그를 코딩.
문단 태그 : <p>, </p>
<body>
<p>Hello~</p>
<p>My name is~</p>
</body>
<실행 결과>
줄 바꿈 태그 : <br/>
(자립 태그 = 쌍이 아닌 단독으로 사용됨)
<body>
<p>Hello~<br/>
My name is~<br/>
</p>
<p>Good~</p>
</body>
<실행 결과>
※ 자립(Self-Closing) 태그
= 열림 태그와 닫힘 태그가 하나로
결합된 태그.
그림 태그 : <img/>
= 자립 태그
<img src="image.jpg"/>
src는 속성 정보이다.
src 속성 정보가 없다면
웹브라우저는 화면에 나타낼
그림이 무엇인지 모른다.
src 속성 값
= 그림의 파일 이름 Or 웹주소
※ 속성(Attribute)
= 웹페이지에 넣을 내용물에 관한
정보를 웹브라우저에 알려줌
속성 = 속성 이름 + 속성 값
!속성은 열림태그 혹은 자립 태그에만
코딩해 넣는다.
<컴퓨터에 있는 그림 넣기>
<body>
<p>Penguin</p>
<img src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg"/>
</body>
<실행 결과>
<인터넷에 있는 그림 넣기>
<body>
<p>Team</p>
<img src="http://getcodingkids.com/wp-content/uploads/2016/05/TeamPhoto-72x72.jpg"/>
</body>
<실행 결과>
<그림에 설명 넣기>
<body>
<p>Team</p>
<img src="URL" alt="NAME"/>
</body>
사진에 마우스 포인터를 올려놓으면
alt에 적었던 설명이 나온다~
영역 나누기 태그 : <div>, </div>
= HTML개체들을 그룹으로 묶을 때 사용
(개체들을 모아둔 투명 상자)
<body>
<div style="color: green;">
<p>Hello~</p>
</div>
<p>Good Day~</p>
</body>
div태그 안에 있는 'Hello~'는
초록색이 되어 버렸다.
반면, div태그 밖에 있는 'Good Day~'는
그대로!
