기본 용어 소개
태그(Tag)
문서의 구조와 스타일을 나타내는 단어이다. 시작태그와 종료태그가 있다.
<html>~</html> => html 태그
요소(Element)
시작 태그와 종료 태그로 이루어진 문서의 구성 요소이다.
요소 = (시작 태그 + 콘텐츠 + 종료 태그)
<title>정선생의 프로그래밍</title> => 전체를 요소로 봐도 된다.
속성(Attribute)
요소에 대한 추가적인 정보를 제공함. 항상 시작 태그에 기술된다.
이름="값" 형태로 기술된다.
<a href="http://return-zero.tistory.com">정선생의 프로그래밍</a> a태그 속의 href를 속성이라고 부른다.
주석(Comment)
HTML 코드를 설명하는 글이다.
<!-- 주석 내용 --> 으로 기술한다.
안녕하세요! 정선생이예요. 이번 게시글은 HTML의 기본 구조를 설명해드릴꺼예요.
기본 구조만 알려드리고 바로 다음 단계로 넘어갈꺼니까 훑어본다는 식으로 보시면 되요.
그럼 시작할게요!
HTML 문서는 <HTML>로 시작해서 </HTML>로 끝나요.
<!DOCTYPE html>
<html> <head>
<title>정선생의 HTML</title>
</head> <body>
Hello Web Programming!
<!-- 이건 주석을 표현해줘요! -->
</body>
</html>
위의 내용이 HTML의 기본 구조예요. 미리 말씀드리자면 HTML 문서를 작성 할 때 태그들은 대소문자를 구별하지 않아요. 이 말은 <HTML>과 <html>은 똑같이 인식한다는 것이예요. 그렇지만 꼭 대문자로 써줘야하는 것이 있는데, <!DOCTYPE html> 이예요. 이유는 (클릭)해서 확인해보시면 되요.
그럼 이 <!DOCTYPE>이 무엇인지에 대해서 알려드릴게요. <!DOCTYPE>이라는 것은 문서 형식 정의(Document Type Definition, DTD)예요. 말 그대로 브라우저가 올바르게 웹 페이지를 표시할 수 있도록 도와주는 문서의 형식을 정의해주는 것이죠. HTML5로 발전하게되면서 DTD는 <!DOCTYPE html>로 html문서 1번째 줄에 작성을 해주면되요. 예전 HTML4버전에서는 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/html4/loose.dtd"> .. 길죠? 이렇게 정의를 했었답니다.
HTML 문서는 <html>과 </html>로 둘러 쌓여있어요. 그리고 그 속에는 <head></head> <body></body>가 있죠. 헤드는 웹 페이지에 대한 정보를 저장하는 곳이예요. 대표적인 예로는 <title> 태그. <title>은 제목. 즉 제목 표시줄에 대한 정보를 표현해주는 태그인거죠. 바디는 웹 페이지의 모든 시각적으로 표현되는 내용들이 들어간다고 생각하시면 되요. HTML 문서의 본문을 정의한다고 생각하면 되겠죠?
HTML에서는 연속된 공백은 하나의 공백으로 인식을 해요. 이 말은 body 태그 안에 있는 Hello Web Programming! 이라는 글자는 Hello Web Programming! 이라고 출력이 된다는 소리예요. 그럼 연속된 공백은 쓸 수 없나?! 그건 아니예요. 연속된 공백을 쓰기 위한 것은 추후에 알려드릴게요.
이번 게시글에서 준비한 내용은 여기까지예요. 고생하셨구요. 그럼 이만! ^^7
게시글을 보시다가 궁금한 내용, 이게 맞나? 하는 내용, 이건 틀렸어!하는 내용들은 과감하게 댓글 달아주시면 감사하겠습니다.
이론적인 내용에 대한 궁금증은 검색을 통해 궁금증을 해결하는 것이 좋아요!!
실습적인 내용에 대한 궁금증은 최대한 생각을 해보고 검색을 하는 것이 좋아요!!
'WEB > HTML' 카테고리의 다른 글
| [HTML] 테이블 (0) | 2018.05.07 |
|---|---|
| [HTML] 리스트, 링크 관련 태그 (0) | 2018.04.24 |
| [HTML] 텍스트 관련 태그 (0) | 2018.04.08 |
| [HTML] 문서편집기 (0) | 2018.04.06 |