1) HTML 구조 이해하기
HTML의 기본 구조는 아래와 같습니다. 아래와 같이 기본 형식이 우리가 흔히 보는 웹사이트를 구성하는 기본 요소입니다.
<html>
<head>
내용(살을 추가)
</head>
<body>
내용(살을 추가)
</body>
</html>
위에 구조는 지금 외우지 말고 따라와 주세요. 아 저렇게 생긴 것이 웹사이트를 구성하는 뼈대구나라고 하고 넘어가시면 됩니다.
그리고 head와 head 사이, body와 body 사이에 살을 붙여서 완벽한 웹사이트를 구성하게 되는 것이지요.
뼈대 + 살 = 사람이듯이 구조 + 살 = 웹사이트라고 생각하시면 간단합니다.
잘 이해가 안 되시겠다고요? 그러면 실제 예제를 통해서 함께 확인해 봅시다!
저는 cnn 웹사이트에 접속을 했습니다. 그리고 오른쪽 마우스를 클릭하고 검사를 클릭합시다.
그리고 자세히 살펴보시면 맨 위에서 네 번째줄에 <head>가 보이실 거에요. 그러면 그 옆에 삼각형 모양이 보이시져? 그것을 클릭해 주세요.
그러면 아래 사진처럼 축소판을 볼 수 있습니다. 어라.. 자세히 보시면 방금 배운 html 구조랑 똑같지 않나요? (줄 위치/스페이스는 무시하셔도 됩니다.)
<html>
<head> .. 내용 혹은 살 ... </head>
<body> .. 내용 혹은 살 ... </body>
</html>
살이 엄청나게 포동포동하게 찌워져 있을 뿐, 기본적인 골격(뼈대)는 똑같군요. 그렇다면 다른 웹사이트에서도 똑같나요? 정답은 "네"입니다. 못 믿으시는 분들은 다른 웹사이트에 가셔서 확인을 해보시면 됩니다. 이렇듯 웹사이트의 구조는 위와 같습니다. 계속 저랑 강의를 따라오신다면 저절로 외워지실 거니 너무 걱정하지 마시고 따라와 주세요.
2) 태그(tag) < > 란 무엇인가?
앞에 뼈대를 보시면서 왜 <body> </body> 이렇게 쌍으로 연결돼있는지 궁금하시지 않으셨나요?
뼈대는 항상 쌍으로 이루어져 있습니다. 항상 시작과 끝이 있습니다. 사람의 뼈처럼 말이죠. 예를 들면, 사람의 손목에서 팔꿈치까지 이어지는 뼈가 있고 팔꿈치에서 어깨까지 이어지는 뼈가 있습니다. 그리고 그 뼈 샤이에는 우리의 포동포동한 살이 채워져있죠.
웹사이트도 마찬가지입니다. 뼈의 시작점 = 오프닝 태그 ex) <body> 이렇게 사용되며 반대로 뼈의 마지막 부분 = 클로징 태그 ex) </body> 로 슬래쉬를 하나 더 추가해서 사용됩니다. 그래서 어떤 내용을 body라는 뼈에 넣고 싶다고 하시면 오프닝 태그와 클로징 태그 사이에 내용을 넣어주시면 됩니다.
<body> - 오프닝 태그
</body> - 클로징 태그
3) 태그의 의미는 각각 다르다?
태그의 의미는 각각 다릅니다. 예를 들어 <body> 태그는 말 그대로 몸통의 역할을 하고 있으며, <head>는 머리의 역할을 합니다. <title>이라는 태그도 있는데 title은 홈페이지의 제목을 나타냅니다. 이것 외에도 수많은 태그들이 있습니다. 그것들은 추후에 차근차근 배워갈 예정입니다.
자 그럼 실제 body,head,title에 대해서 예시를 통해 조금 더 자세히 살펴보겠습니다. (참고로, 갑자기 어? 저 스크린샷은 어디서 튀어나왔지? 하시는 분들은 나중에 다 알려드릴 테니 걱정마시고 따라오세요)
<body> ...내용... </body>
바디 태그 안에 들어가는 모든 내용들은 웹사이트에서 보여집니다. 보시면 링크 주소(localhost:8080/html/1.html) 아랫부분에만 내용이 표시되죠?
즉, 그 아래 네모 상자에만 body 내용이 표시됩니다.
<head> ...내용... </head>
헤드 태그 안에 들어가는 모든 내용들은 페이지와 관련한 정보를 포함합니다. 예시에 보시면 제가 <title>tech daddy website</title>라고 쓴 것을 볼 수 있습니다. 그것이 바로 링크위에 제목으로 표시가 됩니다. (그림 참조)
<h1>.. 내용... </h1>
제목이라고 보시면 됩니다.
<p> ... 내용... </p>
p = paragragh (문단)을 의미합니다.
이렇듯 태그의 의미는 다양하기 때문에, 상황에 따라 적절한 태그를 사용하는 것이 중요합니다. 다음 강의에는 더 많은 다양한 태그와 함께 찾아뵙겠습니다.
'IT & TECH > HTML' 카테고리의 다른 글
| 5. HTML의 핵심! 링크에 대해 배워보자 (0) | 2016.04.12 |
|---|---|
| 4. HTML 리스트 관련 태그 (0) | 2016.04.11 |
| 3. HTML 텍스트 관련 태그 (1) | 2016.04.11 |
| 2. Sublime Text을 이용하여 HTML을 실행해보자! (1) | 2016.04.11 |
| 티스토리 꾸미기 / 웹사이트 만들기 (2) | 2016.04.11 |
