프로젝트에서 보기 →

프론트엔드, 백엔드 개발자를 위한 HTML, CSS 강의 08강 - HTML파일의 기본구조

태그
기타 html강의 html강좌 css강의
시작일
종료일
수정일

https://www.youtube.com/watch?v=zG6DLojbL4s

description: |

1. 이건 꼭 알아야 한다[^1]

[? 질문] HTML 파일을 작성할 때 왜 “태그를 아무렇게나” 쓰면 안 되고, 반드시 기본 구조(문법)를 지켜야 하는가[^4]
[= 답] HTML은 사람/브라우저(장치) 사이의 **의사 전달 도구(언어)**이므로, 규칙(문법) 없이 태그를 나열하면 문서의 의미가 제대로 전달되지 않고 올바르게 처리될 수 없기 때문이다.[^6]

[? 질문] HTML 문서의 “정상적인(표준적인) 기본 구조”는 무엇이며, 각 부분은 어떤 역할을 하는가[^3]
[= 답] 문서는 <html>로 시작해 </html>로 끝나며, 그 안에 <head>와 <body>가 정해진 순서로 각각 1번씩 배치된다.[^9] head는 화면에 직접 보이는 내용이 아니라 문서/표시에 대한 설정 정보를 담고, body는 브라우저 화면에 실제로 표시될 내용을 담는다.[^11]

[? 질문] 기본 구조를 지켜도 화면에서 “크게 달라 보이지” 않을 수 있는데, 그럼에도 왜 반드시 이 구조를 써야 하는가[^24]
[= 답] html/head/body/title 같은 기본 골격은 출력 효과를 크게 바꾸기보다 문서를 언어로서 올바르게 성립시키는 역할을 하며, 앞으로의 모든 마크업을 신뢰성 있게 작성/해석하기 위한 필수 규칙이기 때문이다.[^23]

2. 큰 그림[^1]

이 강의는 지금까지 “의미를 이해하기 위한” 방식으로 다소 파격적으로 태그를 써 보던 단계에서 벗어나, 실제 HTML 문서를 작성할 때 필요한 **기본 문법 구조(골격)**를 소개한다.[^2] HTML을 언어로서 성립시키는 규칙을 설명하고, 그 규칙에 맞게 기존 예제 문서를 html/head/body/title/p 구조로 다시 고쳐 쓰는 과정을 보여준다.[^12]

  • **HTML은 언어(의사 전달 도구)**이기 때문에, 태그 사용에도 문법(규칙)이 필요하다는 관점을 먼저 세운다.[^6]
  • 문서는 반드시 <html> 루트 아래에 head와 body가 정해진 순서로 존재해야 하며, head는 설정, body는 표시 내용을 담당한다고 구분한다.[^10]
  • 들여쓰기(인덴트)로 중첩 구조를 드러내면 문서가 올바르게 작성됐는지 파악하기 쉬워지며, title은 탭/타이틀바에 표시된다는 결과를 확인한다.[^20]

3. 하나씩 살펴보기[^1]

3.1 지금까지는 “의미 이해”를 위해 일부러 기본 구조를 생략했다[^2]

📸 0:07

강사는 이전 시간까지 하이퍼텍스트와 마크업의 의미를 이해시키기 위해, 문서의 “기본 구조”를 일부러 지키지 않고 가장 단순한 형태로 태그를 사용해봤다고 말한다.[^2] 즉, 태그를 소개하는 초반 단계에서는 “정상적인 문서 골격”보다 “태그가 어떤 의미를 갖는지”를 체감시키는 데 초점을 두었다는 맥락을 깔고 시작한다.[^2]

하지만 이제부터는 하이퍼텍스트 마크업 언어를 이용해 파일을 실제로 편집해야 하므로, HTML 파일이 가져야 할 “정상적인(표준적인) 구조가 어떻게 되는지”를 간단히 알아보겠다고 전환한다.[^3]

3.2 HTML이 ‘언어’인 이유: 규칙 없는 태그 나열은 의사 전달을 깨뜨린다[^5]

📸 0:39

강사는 “텍스트에 태그를 아무렇게나 쓰는 것이 아니다”라고 못 박으면서, HTML이 HyperText Markup Language이고 이름에 **Language(언어)**가 들어가는 이유를 설명한다.[^4]

여기서 강의의 논리 전개는 다음 흐름이다.

  1. 언어의 정의(강의 맥락)
    언어란 “원하는 A가 B에게 의사를 전달하는 전달 도구”라고 비유적으로 설명한다.[^5] 다만 사람끼리 말로 대화하는 장면만을 뜻하는 게 아니라, 문서에 기록된 어떤 키워드/표현이 다른 사용자(또는 장치)가 봐도 이해 가능해 올바르게 처리될 수 있다면 그것도 의사 전달 도구가 된다고 말한다.[^6]

  2. 규칙이 없으면 언어가 아니다
    전달 도구가 되려면 규칙이 필요하다.[^7] 태그가 여러 개 존재하는데 이를 규칙 없이 마구잡이로 섞어 쓰면 의사 전달 과정에서 문제가 생긴다.[^7]

  3. 자연어 비유(문법의 필요성)
    우리가 사용하는 자연어에도 단어가 있고(강사는 “어미/단어”라는 표현으로 구성 요소를 언급), 단어를 사용할 때는 문법이 있다고 말한다.[^8] 만약 문법을 지키지 않고 단어만 나열하면, 우리가 쓰는 언어라 해도 규칙이 빠져 의사 전달 도구로 사용할 수 없고, 그러면 언어가 될 수 없다고 결론낸다.[^8]

  4. HTML에서도 이 규칙을 ‘문법’이라 부른다
    HTML 문서가 다양한 태그(마크업)로 구성되듯, 태그를 사용할 때도 분명 규칙이 있으며 그것을 문법이라고 부른다고 정리한다.[^9]

[!IMPORTANT] “기본 구조”는 장식이 아니라 ‘언어 성립 조건’ 강사는 기본 구조를 지키지 않으면 “언어(language)라고 하는 검증(기준)에 들어갈 수 있게끔” 제대로 된 태그 사용이 아니라고 말하며, 이제 문법 구조를 지키는 단계로 가야 한다고 전환한다.[^9]

3.3 HTML 문서의 최상위 규칙: <html>로 시작해서 </html>로 끝난다[^9]

📸 2:29

강사는 HTML 문서를 구성할 때의 첫 번째 규칙으로, 문서는 반드시 <html> 태그로 시작해서 </html>로 끝나야 한다고 제시한다.[^9] 그리고 우리가 사용하는 모든 태그는 이 <html> ... </html> 범위 안에 들어가야 한다고 한다.[^9]

이 설명은 이후 head/body의 배치 규칙을 말하기 위한 전제(루트 컨테이너)로 기능한다.[^10]

3.4 head와 body: 각각 1번, 순서 고정, 역할 분리[^10]

📸 3:18

강사는 <html> 아래에 가장 먼저 나오는 두 구성 요소로 <head>와 <body>를 제시한다.[^10] 이때 단순히 “있다”가 아니라, 문법 규칙을 구체적으로 못 박는다.

  • head와 body는 절대로 두 번 이상 나올 수 없다(각각 1회).[^^10]
  • 둘의 순서도 바뀌면 안 된다. 반드시 head 다음 body 순서다.[^10]

이어서 역할을 분리해 설명한다.

  • <head> 안에 들어가는 내용은 브라우저 화면에 직접 나타나는 내용이 아니라, 브라우저에 보여줄 내용에 대한 설정이라고 설명한다.[^11]
  • 반대로 브라우저 화면에 보여줄 실제 내용은 <body> 안에 들어간다고 말한다.[^11]

강사는 head에서 “설정”을 기록할 때 흔히 meta 태그를 사용한다고 언급하지만, 이는 뒤에서 다시 다루겠다고 예고한다.[^12]

3.5 title의 위치와 효과: 탭/타이틀바에 페이지 제목을 표시한다[^13]

📸 4:16

강사는 문서에 대한 간단한 소개(개략적 제목)를 “문서 밖(=화면 본문이 아닌 곳)”에 기록할 수 있다고 설명하며, 브라우저 상단의 타이틀바 또는 탭을 예로 든다.[^13]

사용자가 브라우저의 탭/타이틀바에서

  • “홈페이지에 오신 것을 환영합니다” 같은 문구,[^14]
  • 사이트 주소,[^14]
  • 페이지가 담고 있는 내용의 개략적 제목[^14]
    을 보고 싶다면 그것을 head 안의 <title> 태그로 작성한다고 말한다.[^15]

또한 <title>에 “1st 페이지” 같은 텍스트를 넣으면, 브라우저 왼쪽 위 탭/제목 영역에 그 내용이 표시된다는 식으로 결과를 연결해 설명한다.[^15]

3.6 실제 본문 내용은 body에 작성한다: “화면에 보여지는 녀석의 실질”[^16]

📸 5:07

강사는 “여기에 표현될 내용은 여기서 쓰는 겁니다”라고 하면서, 화면에 보여지는 실질적인 내용은 body에 작성한다고 재강조한다.[^16]

여기서 “목(=문서의 실질/핵심?)”이라는 표현을 쓰며, 이 화면에 보여지는 부분이 body에 들어간다고 정리한다.[^16] 그리고 지난 시간까지 다뤘던 내용을 “제대로 표현”하려면 body 안에 써야 한다고 연결한다.[^17]

3.7 예제 적용: 기존 문서에 html/head/body를 씌우고, 소문자 태그를 쓴다[^18]

📸 5:45

강사는 이전에 같이 작성했던 예제 문서를 가져온 뒤, 이제는 구조를 지키지 않았던 상태에서 필수 골격을 추가해 “제대로” 구성해보겠다고 한다.[^18]

  1. <html> 태그 추가
    필수적인 내용은 html이며, 예전에는 대문자로 쓰기도 했지만 요즘은 소문자로 쓰는 것이 기본이라고 말한다.[^19]
    소문자를 쓰게 된 배경(HTML의 버전업, 격변기, 없어질 뻔한 이야기 등)은 나중에 버전 이야기를 하면서 설명하겠다고 예고만 한다.[^19]

  2. head와 body 배치
    이어서 head를 만들고, 실제 문서 내용은 body 안에 들어가야 하므로 기존 내용을 body로 감싼다고 말한다.[^20]

3.8 문장(문단)은 p로 감싼다: Paragraph의 약자[^21]

📸 6:41

강사는 예제에 있는 텍스트가 “문장”이므로 body 안에 그냥 쓰기보다 p 태그로 감싸는 것이 맞다고 설명한다.[^21]
여기서 표현을 조금 정교화한다:

  • “정확히 말하면 문장이라기보다 구/절”에 더 가깝다고 하며,[^21]
  • p는 paragraph의 약자라고 밝힌다.[^21]

즉, 텍스트 덩어리를 의미 단위로 묶어 표현하려면 p를 사용하는 것이 문법적으로 더 올바르다는 맥락이다.[^21]

[!TIP] 본문 텍스트는 “그냥 쓰기”보다 의미에 맞는 태그로 감싸기 강사는 문장을 p로 감싸는 것을 “좀 더 정확한 표현”이라고 말하면서, 단순 출력보다 의미 단위로 마크업하는 습관을 유도한다.[^21]

3.9 태그의 중첩과 들여쓰기: 구조 검증을 쉽게 만든다[^22]

📸 7:17

강사는 HTML이 “태그 안에 태그, 그 아래 태그”처럼 중첩 구조를 가지며, 이런 중첩 관계에서는 줄을 끌어서 한 줄로 쓰는 것보다 들여쓰기를 통해 구조를 드러내는 편이 좋다고 말한다.[^22]

들여쓰기를 하면:

  • 중첩 관계가 한눈에 보이고,[^22]
  • 문서 구조가 올바르게 만들어졌는지 파악하기 쉬워진다고 설명한다.[^22]

그래서 본인은 그렇게(들여쓰기) 쓰는 것을 좋아하고, 많은 사람들도 들여쓰기를 많이 한다고 덧붙인다.[^22]

3.10 title 추가 실습: “안녕하세요”를 탭에서 확인한다[^23]

📸 7:54

강사는 저장 후, 아까 말했던 title을 head에 추가해보자고 하며 <title>안녕하세요</title>처럼 작성한다.[^23]

그리고 브라우저로 열었을 때 크게 달라지지 않을 것이라고 말한다.[^24] 이유는 다음처럼 설명한다.

  • 아래쪽에서 사용한 마크업(예: b 같은 강조)은 시각적 변화(볼드)를 주지만,[^24]
  • p는 큰 차이가 없고 약간의 공백 정도만 보일 수 있으며,[^24]
  • html/head/title 같은 구조 요소들은 출력에 직접 영향을 주는 것이 아니기 때문이라고 한다.[^24]

그럼에도 불구하고 이 구조는 “반드시 앞으로 지켜야 한다”고 강조한다.[^25]

실제로 실행(브라우저 새로고침/열기)해보면 본문에서 큰 변화는 잘 보이지 않지만,[^26] 개발자 메뉴의 “페이지 소스 보기”를 통해 구조가 어떻게 들어갔는지 확인할 수 있다고 한다.[^26]

마지막으로 달라진 점을 하나 집어준다: 탭(또는 타이틀 영역)에 title로 넣은 “안녕하세요”가 그대로 표시되는 것을 확인할 수 있다고 말한다.[^27]

3.11 결론 정리: head/body 기반 위에 문서 내용을 작성하라[^28]

📸 9:11

강사는 보이는 출력 변화는 크지 않더라도, 앞으로는 head와 body를 기반으로 그 안에 문서의 내용을 쓰도록 하겠다고 정리한다.[^28]
즉, 표준 골격을 항상 먼저 만들고 그 위에 콘텐츠를 얹는 방식이 앞으로의 기본 작성법이라는 뜻이다.[^28]

3.12 다음 예고: <!DOCTYPE ...>(문서 타입 선언)은 다음 강의에서[^29]

📸 9:23

끝부분에서 강사는 문서 상단에 document type(= DOCTYPE)을 또 쓰게 되는데, 이 내용은 설명이 길어질 것 같아서 다음 시간에 다루겠다고 한다.[^29]
그리고 다음에는 W3C와 문서 타입에 대한 내용을 이어서 설명하겠다고 예고하며 마무리한다.[^29]

4. 핵심 통찰[^1]

  1. HTML의 “기본 구조”는 화면을 예쁘게 만드는 기술이 아니라, 문서를 언어로 성립시키는 문법적 토대다.[^6]

    • 태그를 규칙 없이 쓰면 전달(해석/처리) 과정에서 문제가 생겨, 의사 전달 도구로서 기능을 잃는다.[^7]

  2. HTML 문서는 루트(<html>)와 두 축(head, body)로 나뉘며, head는 설정, body는 표시라는 역할 분리가 핵심이다.[^11]

    • 실행 행동:
      • 문서를 만들 때 항상 <html><head>…</head><body>…</body></html> 골격부터 잡는다.[^10]
      • “화면에 보일 텍스트/요소”는 전부 body로 보낸다.[^11]

  3. title은 본문이 아니라 브라우저의 탭/타이틀바에 노출되는 “페이지의 이름표” 역할을 한다.[^15]

    • 실행 행동:
      • 모든 페이지에 페이지 목적이 드러나는 title을 반드시 작성한다.[^14]

  4. 중첩 구조를 가진 언어에서는 들여쓰기(인덴트)가 곧 구조 가독성이자 오류 예방 장치다.[^22]

    • 실행 행동:
      • 태그를 중첩할수록 단계별로 들여쓰기를 적용해 닫는 태그 누락/순서 오류를 쉽게 찾는다.[^22]

5. 헷갈리는 용어 정리[^1]

하이퍼텍스트(HyperText): 문서가 다른 문서/자원으로 연결되는 구조를 전제하는 텍스트 개념으로, HTML이 다루는 핵심 요소로 언급된다.[^2]
마크업(Markup): 텍스트에 의미/구조를 부여하기 위해 태그로 표시하는 방식(HTML에서 태그 사용을 가리킴)으로 설명된다.[^2]
문법(Syntax/Grammar): 태그를 어떤 규칙으로 배치/중첩해야 의미가 올바르게 전달되는지를 정하는 규칙 체계로, HTML에서도 필수라고 말한다.[^9]
head: 브라우저 화면에 직접 보이는 내용이 아니라 문서/표시에 대한 설정 정보를 넣는 영역.[^11]
body: 브라우저 화면에 실제로 표시될 내용을 넣는 영역.[^11]
title: 브라우저 탭/타이틀바에 표시되는 페이지의 제목을 적는 태그.[^15]
p(paragraph): 문단을 의미하는 태그로, 텍스트 덩어리를 의미 단위로 묶어 표현할 때 사용.[^21]
DOCTYPE(document type): 문서 타입을 선언하는 구문으로, 문서 상단에 쓰며 자세한 설명은 다음 강의로 예고됨.[^29]

참고(콘텐츠 정보)[^1]

  • 제목: 프론트엔드, 백엔드 개발자를 위한 HTML, CSS 강의 08강 - HTML파일의 기본구조[^1]
  • 채널: 뉴렉처[^1]
  • 길이: 9분 43초[^1]
  • 링크: https://www.youtube.com/watch?v=zG6DLojbL4s[^1]
  • 키워드: html강의, html강좌, css강의, css강좌, 퍼블리싱, 기초강의, 웹개발[^1]

[^1]: 제공된 메타데이터(제목/채널/길이/키워드/링크) 및 전체 대화 입력 원문. [^2]: @[00:07] "…이제부터는 … 파일을 한번 편집… 지금까지는 … 기본 구조를 시키지 않고 … 태그를 사용해봤는데…" [^3]: @[00:21] "html 파일의 정상적인 결국 구조가 어떻게 되는지 오늘은 … 알아보도록 하겠습니다" [^4]: @[00:39] "…텍스트 에다가 태그를 아무렇게나 쓰는거 아니에요" [^5]: @[00:56] "…언어… a 가 b 에게 의사를 전달… 전달 도구…" [^6]: @[01:17] "…기록된 키워드들이 다른 사용해 봤을 때도 이해할 수 있다면… 올바르게 처리… 의사전달 도구…" [^7]: @[01:37] "…태그들을 어떠한 규칙도 없이 마구잡이로… 여러 가지 문제…" [^8]: @[02:03] "…단어… 문법… 문법… 지키지 않고… 나열… 의사 전달… 언어가 될 수가 없겠죠" [^9]: @[02:29] "…규칙… 문법…", @[03:02] "…html 라는 태그로 부터 시작… 끝나야…" [^10]: @[03:18] "…제일 먼저 … 헤드… 바디…", @[03:26] "…두 번 이상… 순서도… 반드시…" [^11]: @[03:36] "…헤드… 브라우저 화면에 나타나는 내용이 아니에요… 설정…", @[03:59] "…보여 줘 할 내용… 바디 안에…" [^12]: @[04:05] "…메타… 뒤에 가서 볼 일이구요" [^13]: @[04:16] "…문서가 어떤… 소개… 문서 밖에다 기록…" [^14]: @[04:31] "…탭… 환영합니다… 사이트주소… 간단하게… 제목…" [^15]: @[04:47] "…타이틀… 1st 페이지…", @[04:56] "…왼 … 탭… 표시…" [^16]: @[05:07] "…여기에 표현될 내용은 여기서…", @[05:14] "…화면 보여지는… 실질…" [^17]: @[05:27] "…지난 시간… 제대로 표현… 바디 안에다가…" [^18]: @[05:45] "…같이 … 문서…", @[05:49] "…구조… 필수적인 내용… html…" [^19]: @[05:55] "…과거에는 대문자… 요즘에는 소문자…", @[06:03] "…이유는 나중에… 버전업…" [^20]: @[06:23] "…헤드…", @[06:28] "…마디 안에 들어가 있어야… 바지로 감싸서…" [^21]: @[06:41] "…문장… p …", @[06:53] "…패러그래프의 약자…" [^22]: @[07:17] "…태그 안에 태그… 중첩…", @[07:28] "…들여 쓰게… 파악… 쉬워…" [^23]: @[07:54] "…타이틀…", @[08:00] "…안녕하세요…" [^24]: @[08:09] "…크게 달라지는 건 없을…", @[08:20] "…p … 크게… 차이…" [^25]: @[08:40] "…반드시 앞으로 이 구조는 지켜서야…" [^26]: @[08:43] "…실행…", @[08:53] "…페이지 소스 보기…" [^27]: @[09:04] "…탭… 안녕하세요… 그대로…" [^28]: @[09:11] "…보여지는 것을 크게… 않지만… 헤드와 바디… 안에다가…" [^29]: @[09:23] "…다큐먼트 타입… 다음…", @[09:37] "…w3c… 다큐먼트 타입…"</p> </div> </section> </article> <div class="task-detail-back"> <a href="/project/09ff4de6-c72a-4e29-bb2a-324764e1114e">← 프로젝트에서 보기</a> </div> </main> <script src="/assets/js/task-detail-792ea1ec28d82c0e34e35e7b9957ffb4.js?vsn=d"></script> <!-- Bundled TypeScript Application --> <script defer src="/assets/js/app.bundle-aa5449fa7c43adfbaa0a29884d09a499.js?vsn=d"></script> </body> </html>