본문 바로가기
Amatuer.세오/HTML&CSS공부

✔웹코딩기초강좌 ② - HTML문서구조, 요소와 속성 개념

by 세오APL 2016. 6. 24.

✔웹코딩기초강좌 ② - HTML문서구조, 요소와 속성 개념









1.  HTML 문서 구조를 위한 기본 태그



① <!doctype.html>


웹브라우저에게 해당 문서의 타입이 'HTML' 웹 페이지라고 선언하는 문장으로, HTML 코딩 작성시 가장 상단(첫번째 줄)으로 들어가는 기본 태그.




② <HTML>

    </HTML>


html 태그로 코딩시 모든 내용은 HTML 태그 안에 작성하게 된다. 페이지 전체를 통틀어 감싸안는 성격을 갖고 있다.



③ <head>

   </head>


<body>

</body>


태그 안에 태그를 넣을 수 있는 구조로, head 태그는 웹 페이지의 보이지 않은 정보들을 담는 영역이며, body 태그는 웹 페이지에 보여지는 내용들이 들어간다.



☞ 작성 예


<!DOCTYPE html>

<html>
<head>
<title>세오의 어필로그</title>
</head>

<body>
공부하자
</body>

</html>




※ 웹 코딩을 할 때, '줄바꿈 & 들여쓰기'를 습관화 하자!



태그 및 소스 등을 작성할 때, 각각의 태그가 어느 태그 안에 있는지, 해당 태그가 제대로 잘 닫혀있는지 오로지 텍스트로 이루어진 성격 탓에 눈으로 식별하기가 상당히 어렵다. 태그 작성을 올바르게 했다고 생각하더라도 실제 결과물 속에서 에러가 나거나 원하는 대로 보여지지 않는다면 어떤 문제가 있는지 찾기 쉽도록 태그를 작성할 때 미리미리 들여쓰기 (TAB)을 눌러주거나 스페이스를 통해 공백을 주는 것이 좋다.


들여쓰는 것에 대하여는 별다른 규칙은 없으나, 본인이 읽거나 구분하기 쉽게, 그리고 일관성이 있게 주는 것이 중요하다.






2. 요소와 속성




※ <태그> ~ </태그>


어떤 태그가 시작될 경우 '< >' 괄호 안에 태그명령어를 씀으로써 시작된다. 물론, 태그 내의 소스 또는 명령어를

모두 작성을 완료한 경우 '</ >' 괄호 안에 슬래시를 넣어줌으로써 해당 태그소스는 끝이 났다고 선언해야 한다.


※ 스스로 닫는 태그


단, <br/> 등과 같이 '스스로 닫히는 태그' 또한 존재한다. 이는 태그 안에 담을 내용이 별도로 없고

태그 자체에 의미가 담긴 것들이기 때문이다. 


- 스스로 닫는 태그 예시 ▶  <img/>





위의 코드를 예시로 든다면, img 태그 안에 'src="사이트주소" 형식을 찾아볼 수 있다. 이것을 '속성' 이라고 하며, img를 '요소'라고 한다. 즉, img 라는 요소 안에 scr 속성을 추가하였다고 이해하면 된다.


<요소 속성="속성값"/> 또는 <요소 속성="속성값"> 요소내용 </요소>














세오의 어필로그


sseoteo@naver.com