콘텐츠로 이동

01. HTML: 문서의 뼈대

"브라우저는 사람의 언어를 이해하지 못합니다."

1. Definition: 이름 속에 답이 있다

HTML은 HyperText Markup Language의 약자입니다. 어려운 영어 같지만, 단어 두 개만 쪼개서 보면 이 언어가 무엇을 하는지(Role) 정확히 알 수 있습니다.

1-1. HyperText (초월한 텍스트)

"책은 순서대로 읽어야 하지만, 웹은 순간 이동을 합니다."

보통의 책이나 문서는 1페이지를 읽고 나서 2페이지로 넘어가야 하는 선형(Linear) 구조입니다. 순서가 정해져 있죠.

하지만 웹은 다릅니다. 파란색 글씨를 클릭하면 관련 없는 다른 페이지, 심지어 지구 반대편의 서버에 있는 문서로 순간 이동(Link)을 합니다. 텍스트의 한계를 초월(Hyper)하여 서로 얽혀 있는 상태, 이것이 바로 웹의 본질입니다.

  • 핵심 태그: <a> (Anchor) - 다른 곳으로 가는 문을 엽니다.

1-2. Markup (표시하기)

"브라우저에게 '이건 제목이고, 이건 그림이야'라고 형광펜으로 칠해주는 것입니다."

Mark + Up은 원래 원고 교정 용어입니다. 편집자가 원고에 "이 부분은 진하게!", "여기는 제목!"이라고 빨간 펜으로 표시(Mark)해서 인쇄소에 넘기는 것에서 유래했습니다.

우리가 메모장에 "안녕하세요"라고 적으면 컴퓨터는 그저 '글자'로만 인식합니다. 하지만 그 앞뒤에 <button>이라는 표시(Markup)를 해주면, 브라우저는 그제야 그것을 '누를 수 있는 버튼'으로 그려줍니다.

  • Before (순수 텍스트): 로그인 (그냥 글자)
  • After (마크업): <button>로그인</button> (눌러지는 네모난 버튼)

정리: 우리는 문서끼리 연결(HyperText)되고, 각 내용이 무엇인지 표시(Markup)된 문서를 만들기 위해 HTML을 배웁니다.

2. Why: 브라우저와의 소통

우리가 쓰는 한글 문서를 외국인에게 보여주려면 번역이 필요하듯, 우리가 원하는 내용을 브라우저 화면에 표시하려면 HTML (HyperText Markup Language)이라는 약속된 양식에 맞춰야 합니다.

우리는 이 코드를 직접 처음부터 다 짤 필요는 없습니다. 하지만 AI가 짜준 코드를 읽고 고칠 줄은 알아야 합니다.

3. Anatomy: HTML 해부하기

HTML 코드를 보면 꺽쇠(<>)가 가득합니다. 겁먹지 마세요. 규칙은 매우 간단합니다.

3-1. 태그 (Tag): 명령어

프로그래밍의 함수 이름과 같습니다. "이미지를 보여줘", "버튼을 만들어줘" 같은 명령입니다.

  • 열는 태그: <button> (명령 시작)
  • 닫는 태그: </button> (명령 끝)

3-2. 속성 (Attribute): 옵션 설정

함수의 옵션(Option)과 같습니다.

일반적인 명령 HTML 코드 의미
print("안녕") <p>안녕</p> 문단(p) 출력
image(src="cat.jpg") <img src="cat.jpg"> 고양이 사진 표시
link(href="google.com") <a href="google.com"> 구글로 가는 링크

핵심: <태그 속성="값"> 내용 </태그> 형태만 기억하면 됩니다.

🏷️ 식별자 (ID & Class): 이름표 붙이기

"로그인 버튼 고쳐줘"라고 AI에게 시키려면, 그 버튼의 이름(id)이나 종류(class)를 알아야 콕 집어서 명령할 수 있습니다.

구분 HTML 속성 특징 비유
ID id="login-btn" 문서 내에 단 하나만 존재 (유일함) 주민등록번호 (나만 가짐)
Class class="btn red" 여러 태그가 공유 가능 (그룹화) 직업/유니폼 (여러 명이 입음)

3-3. 계층 구조 (Nesting): 부모와 자식

컴퓨터 폴더를 정리하거나 글을 쓸 때 들여쓰기(Indentation)를 하듯, HTML도 태그 안에 태그를 넣습니다. 이를 부모-자식(Parent-Child) 관계라고 합니다.

  • 부모 (Parent): 감싸고 있는 태그 (상위 폴더)
  • 자식 (Child): 안에 들어있는 태그 (하위 파일)
  • 형제 (Sibling): 같은 부모를 둔 태그 (같은 폴더 내의 파일들)

4. Structure: 사람의 몸과 같다

HTML 문서는 크게 머리(Head)와 몸(Body)으로 나뉩니다.

graph TD
    HTML[html: 전체 문서] --> Head[head: 머리]
    HTML --> Body[body: 몸통]

    Head --> Meta[설정값<br>제목, 인코딩]
    Head --> Style[스타일<br>CSS 파일]

    Body --> H1[제목]
    Body --> Button[버튼]
    Body --> Img[이미지]

    style Head fill:#e1f5fe
    style Body fill:#fff3e0
  • <head> (머리/설정): 화면엔 안 보입니다. 문서의 제목, 검색 엔진 키워드, 꾸미기 파일(CSS) 연결 등 생각과 설정을 담당합니다.
  • <body> (몸통/화면): 실제 브라우저 하얀 화면에 보이는 모든 것입니다. 우리가 주로 다룰 곳입니다.

5. DOM: 브라우저의 기억법

"HTML 파일은 그저 종이에 적힌 글자(Text)일 뿐입니다. 브라우저가 이 글자를 읽고, 메모리에 실체(Object)로 만드는 과정을 DOM이라고 합니다."

5-1. DOM이란? (Document Object Model)

우리가 요리 레시피(Text)를 보고 실제 요리(Object)를 만드는 것과 똑같습니다.

구분 HTML 파일 DOM (Document Object Model)
상태 텍스트 (String) 객체 (Object)
비유 요리 레시피 (종이) 완성된 요리 (실물)
조작 수정하려면 파일을 열어야 함 코드로 실시간 변경 가능

브라우저는 HTML 코드를 읽자마자 트리 구조의 객체(DOM Tree)로 변환하여 메모리에 올립니다. 이때부터는 단순한 '글자'가 아니라, 코드로 조종할 수 있는 '물체'가 됩니다.

5-2. "모든 것이 객체(Object)다"

DOM 세상에서는 모든 태그가 하나의 객체(Object)입니다. 객체는 속성(Property)과 기능(Method)을 가집니다.

  • HTML: <input type="text">
  • DOM 변환 후:
    • input_box.value (입력된 값)
    • input_box.focus() (커서 깜빡이기 기능)
    • input_box.remove() (삭제 기능)

핵심: 우리가 "자바스크립트로 웹을 움직인다"라고 하는 것은, 사실 HTML 파일을 고치는 게 아니라 메모리에 있는 DOM을 조작하는 것입니다.

6. Layout: 블록 vs 인라인 (줄바꿈의 원리)

"왜 이 버튼은 옆으로 안 가고 밑으로 떨어지지?" 초보자가 가장 많이 겪는 혼란입니다. 크게 두 가지 성격이 있습니다.

  1. 블록 요소 (Block): <div>, <h1>, <p>
    • 화면의 가로 전체를 차지합니다. (이기적임)
    • 무조건 줄바꿈이 일어납니다.
  2. 인라인 요소 (Inline): <span>, <a>, <img>
    • 자기 글자 크기만큼만 공간을 차지합니다.
    • 줄바꿈 없이 옆으로 나란히 붙습니다.

7. 자주 쓰는 태그 5인방

태그는 100개가 넘지만, 실제로는 5개만 알면 됩니다. 나머지는 그때그때 AI에게 물어보세요.

  1. <div>: 투명한 상자. 요소들을 묶어서 정리할 때 씁니다. (가장 많이 씀)
  2. <h1> ~ <h6>: 제목. 숫자가 작을수록 폰트가 큽니다.
  3. <a>: 링크. 클릭하면 다른 곳으로 이동합니다. (Anchor)
  4. <img />: 이미지. (닫는 태그가 없습니다!)
  5. <input />: 입력창. 사용자가 글자를 적는 곳입니다.

7-1. (Level Up) 의미 있는 상자 (Semantic Tags)

초보 때는 모든 것을 <div>로 만들어도 됩니다. 하지만 고수가 되려면 '이름표가 있는 상자'를 써야 합니다.

비유: 이삿짐을 쌀 때 '주방용품', '옷', '책'이라고 박스에 써놓으면 나중에 찾기 쉽죠? 그냥 <div> 박스에 다 때려 넣으면 AI(검색엔진)가 내용물을 이해하기 힘들어합니다.

  1. <header>: 간판. 사이트의 제목이나 로고가 들어갑니다.
  2. <nav>: 메뉴판. 내비게이션 링크들이 모여 있습니다.
  3. <section> / <article>: 본문 덩어리. 실제 기사나 내용이 들어갑니다.
  4. <footer>: 바닥글. 저작권 정보나 연락처가 들어갑니다.

🧠 Visible Thinking Activity: 웹의 뼈대 투시하기 (X-Ray)

의사가 엑스레이를 찍어 뼈를 보듯이, 개발자는 Elements(요소) 탭을 통해 웹사이트의 HTML 뼈대를 투시합니다. 코딩을 몰라도 괜찮습니다. 마우스 클릭만으로 네이버나 구글 메인 화면의 글자를 마음대로 바꿀 수 있습니다.

준비물: 크롬 브라우저, F12 키

1. 돋보기 켜기 (Inspect Mode)

화면의 그림이 코드로는 어떻게 생겼는지 찾아봅시다.

  1. F12를 눌러 개발자 도구를 엽니다. (오른쪽이나 아래에 창이 뜹니다.)
  2. 창의 왼쪽 상단에 있는 화살표 아이콘(↖️)을 클릭합니다. (단축키: Ctrl + Shift + C)
  3. 아이콘이 파란색으로 변하면 준비 완료!
  4. 웹사이트의 버튼이나 제목 위로 마우스를 가져가 보세요.
    • 관찰: 마우스가 가리키는 곳의 HTML 코드가 자동으로 파란색 하이라이트 되며 찾아집니다.

2. 부모와 자식 찾아내기 (Tree Structure)

HTML이 '상자 속의 상자' 구조라는 것을 눈으로 확인해 봅시다.

  1. 개발자 도구(Elements 탭)에서 코드를 자세히 보세요.
  2. 태그 옆에 있는 작은 화살표(▶)를 눌러보세요.
    • ▶ (접힘): 내용물이 숨겨져 있습니다.
    • ▼ (펼쳐짐): 자식 태그들이 쏟아져 나옵니다.
  3. Action: 가장 바깥쪽의 <html>부터 시작해서 <body> ➡ <div> 순서로 화살표를 계속 눌러서 안으로 파고들어 보세요.

🕹️ 실습: 3분 만에 내 웹사이트 띄우기

AI에게 코드를 짜달라고 하기 전에, 그 코드를 담을 그릇(파일)을 만드는 법부터 익혀봅시다. VS Code만 있으면 3분이면 충분합니다.

Step 1. 작업대 준비하기 (Folder & File)

요리할 때 도마를 꺼내듯, 코딩할 폴더를 만듭니다.

  1. 바탕화면에 my-web이라는 새 폴더를 만듭니다.
  2. VS Code를 켜고 [File] - [Open Folder]를 눌러 방금 만든 폴더를 선택합니다.
  3. VS Code 왼쪽 탐색기 빈 공간에 우클릭 ➡ [New File] 클릭.
  4. 이름을 index.html이라고 적고 엔터를 칩니다.

Why index.html? 웹 브라우저는 폴더에 들어갔을 때, 수많은 파일 중 index라는 이름을 가진 녀석을 대장(메인 페이지)으로 인식합니다. 약속된 이름이니 꼭 지켜주세요!

Step 2. 마법의 키 ! (Boilerplate)

일일이 <html...> 칠 필요 없습니다. VS Code의 자동완성(Emmet) 기능을 써봅시다.

  1. index.html 파일 편집창에 느낌표 ! 하나만 딱 치세요.
  2. 추천 목록이 뜨면 [Enter] 키나 [Tab] 키를 누르세요.
  3. Result: 순식간에 10줄짜리 기본 HTML 뼈대가 와르르 쏟아집니다. (이게 바로 개발자의 생산성입니다!)

Step 3. 내용 채우기

<body>와 </body> 태그 사이가 '화면에 보이는 곳'이라고 했죠? 그 사이에 아래 코드를 적어보세요.

<body>
    <h1>나의 첫 번째 웹사이트</h1>
    <button>클릭해보세요</button>
</body>

Step 4. 브라우저로 열기 (Drag & Drop)

이제 작성한 코드를 눈으로 확인할 시간입니다.

  1. 저장 필수: Ctrl + S (맥은 Cmd + S)를 눌러 파일을 저장합니다. (저장 안 하면 안 바뀝니다!)
  2. 아까 바탕화면에 만든 my-web 폴더를 여세요.
  3. index.html 파일을 마우스로 끌어서 크롬 브라우저 탭 위에 툭 떨어트리세요(Drag & Drop).
  4. 성공! 흰 화면에 큰 글씨와 버튼이 보이면 성공입니다.

🔄 Step 5. 수정하고 새로고침 (Feedback Loop)

개발자는 이 과정을 무한 반복하는 사람입니다.

  1. VS Code에서 <h1> 내용을 "안녕하세요!"로 바꾸고 저장(Save).
  2. 브라우저로 돌아와서 새로고침(F5, 맥은 Cmd+R).
  3. 화면이 바뀌었나요? 축하합니다! 당신은 방금 웹 개발의 전체 사이클을 경험했습니다.

💡 AI에게 시켜보기 (Challenge)

이제 빈 껍데기는 준비되었습니다. 이 파일 안에 들어갈 내용을 AI에게 시켜보세요.

Prompt

방금 만든 index.html에 들어갈 코드야. 자기소개 페이지를 만들 건데, 내 이름은 'Bong'이고, 취미는 '코딩'이야. <h1>, <ul> 태그를 써서 깔끔하게 만들어줘.

AI가 짜준 코드를 복사해서, <body> 안에 붙여넣고 새로고침 해보세요!