HTML 기본 다지기 & 텍스트 관련 태그

#1. 웹의 동작 원리

#클라이언트-서버 모델

• 클라이언트(브라우저): 웹페이지를 요청하고 화면에 표시

• 서버: HTML, CSS, JavaScript 파일을 전송

식당에 비유하면, 손님(브라우저)이 메뉴를 주문하면 주방(서버)이 요리를 만들어 내어주는 것과 같다.

sequenceDiagram
    participant B as 🧑‍💻 브라우저<br/>(클라이언트)
    participant S as 🖥️ 서버
    B->>S: ① 요청 (Request)<br/>"이 페이지 주세요"
    Note over S: ② 요청 처리<br/>파일 찾기
    S-->>B: ③ 응답 (Response)<br/>HTML·CSS·JS 전송
    Note over B: ④ 화면에 렌더링

#HTTP 통신 기초

• 요청(Request): 브라우저가 서버에 파일을 달라고 요청

• 응답(Response): 서버가 요청받은 파일을 전송

• 주요 HTTP 메소드: GET(조회), POST(생성), PUT(수정), DELETE(삭제)

• 주요 상태 코드: 200(성공), 404(페이지 없음), 500(서버 오류)

• HTTP vs HTTPS: HTTPS는 통신 내용을 암호화하여 보안에 강함. 현재는 대부분의 웹사이트가 HTTPS 사용

#도메인과 DNS

• IP 주소: 컴퓨터의 고유 주소(예: 142.250.66.46)

• 도메인: IP는 외우기 어려워서 사람이 읽기 쉬운 이름 부여(예: google.com)

• DNS: 도메인을 IP 주소로 변환해주는 주소록 시스템

주소창에 google.com을 입력하면, 브라우저는 먼저 DNS에게 "이 도메인의 실제 IP가 뭐야?"라고 물어본 뒤, 받은 IP 주소로 서버에 접속한다.

flowchart LR
    A["🧑‍💻 사용자<br/>google.com 입력"] --> B["📖 DNS 서버<br/>주소록 조회"]
    B --> C["🔢 IP 주소 응답<br/>142.250.66.46"]
    C --> D["🖥️ 해당 서버 접속<br/>페이지 받아오기"]
    style A fill:#e3f2fd,stroke:#1e88e5
    style B fill:#fff3e0,stroke:#fb8c00
    style C fill:#f3e5f5,stroke:#8e24aa
    style D fill:#e8f5e9,stroke:#43a047

#웹 브라우저의 역할

• HTML을 해석하여 구조 생성

• CSS를 해석하여 디자인 적용

• JavaScript를 실행하여 동적 기능 구현

#2. VS Code 설치 및 환경 설정

1. code.visualstudio.com에서 VS Code 다운로드

2. 설치 후 다음 확장 프로그램 설치

3. 작업 폴더 생성 (예: html-study)

#3. HTML 기본

#HTML이란?

1. Hyper Text

하이퍼텍스트(Hypertext)는 링크를 통해 다른 문서나 정보에 즉시 연결되는 텍스트를 말한다. '뛰어넘다', '초월하다'라는 의미의 '하이퍼(Hyper)'와 '문서'를 뜻하는 '텍스트(Text)'의 합성어로, 말 그대로 '문서를 뛰어넘어 연결된 문서'라는 의미를 가진다.

우리가 인터넷을 할 때 흔히 볼 수 있는 파란색 밑줄 글씨(링크)를 클릭하면 다른 페이지로 넘어가는 것이 바로 하이퍼텍스트의 가장 대표적인 예다.

2. Markup Language

마크업 언어(Markup Language)는 간단히 말해, 웹사이트의 글이나 그림 같은 요소들이 어디에 어떻게 배치될지, 어떤 구조로 보일지를 '표시(mark up)'하는 데 사용되는 언어이다. 우리가 흔히 보는 웹 페이지의 뼈대를 만드는 역할을 한다.

마크업 언어는 '태그(tag)'라고 불리는 특별한 기호를 사용하여 문서의 구조와 의미를 정의한다.

주요 마크업 언어의 종류

• HTML (HyperText Markup Language): 웹 페이지를 만드는 데 사용되는 가장 대표적인 마크업 언어

• XML (eXtensible Markup Language): 데이터를 저장하고 전송하는 데 주로 사용. 사용자가 직접 태그를 정의 가능

• Markdown: 일반 텍스트 기반의 경량 마크업 언어. #, > 등 간단한 기호로 서식 지정 가능

#월드 와이드 웹(WWW)의 기반

하이퍼텍스트의 개념은 1960년대에 테드 넬슨(Ted Nelson)에 의해 처음 제시되었지만, 이 개념이 전 세계적으로 구현된 것이 바로 팀 버너스리가 개발한 월드 와이드 웹(World Wide Web)이다.

• HTML (HyperText Markup Language): 하이퍼텍스트 문서를 만드는 데 사용되는 언어

• HTTP (HyperText Transfer Protocol): 이렇게 만들어진 하이퍼텍스트 문서를 인터넷상에서 주고받기 위한 통신 규칙

#태그의 기본 구조

HTML은 태그(tag)로 내용을 감싸서 "이건 제목이다", "이건 링크다"처럼 의미를 부여한다. 태그는 보통 여는 태그와 닫는 태그가 짝을 이루고, 그 사이에 내용이 들어간다. 여는 태그 안에는 추가 정보를 주는 속성(attribute)을 쓸 수 있다.

<a href="https://google.com">구글로 이동</a>

태그 이름 (a = 링크) 속성 (href = 연결 주소) 속성 값 (실제 주소) 내용 (화면에 보이는 글자)

• 여는 태그 <a> 로 시작해서 닫는 태그 </a> 로 끝난다. 닫는 태그에는 /가 붙는다.

• 속성은 속성이름="값" 형태로 여는 태그 안에 쓴다. 여러 개면 공백으로 구분한다.

#HTML 문서 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내 첫 번째 웹페이지</title>
</head>
<body>
    <!-- 여기에 내용 작성 -->
</body>
</html>

HTML 문서는 아래처럼 <html>을 뿌리로, <head>(안 보이는 정보)와 <body>(보이는 내용)로 갈라지는 나무(tree) 구조를 이룬다.

flowchart TD
    A["📄 &lt;html&gt;"] --> B["🧠 &lt;head&gt;<br/>안 보이는 정보"]
    A --> C["👀 &lt;body&gt;<br/>화면에 보이는 내용"]
    B --> B1["&lt;meta&gt;<br/>문자 인코딩 등"]
    B --> B2["&lt;title&gt;<br/>탭 제목"]
    C --> C1["&lt;h1&gt; 제목"]
    C --> C2["&lt;p&gt; 문단"]
    C --> C3["&lt;img&gt; 이미지 …"]
    style A fill:#ede7f6,stroke:#5e35b1
    style B fill:#e3f2fd,stroke:#1e88e5
    style C fill:#e8f5e9,stroke:#43a047

기본 구조 설명

• <!DOCTYPE html>: 이 문서가 HTML5 문서임을 브라우저에 알림. 맨 첫 줄에 쓴다

• <html lang="ko">: 페이지 언어를 한국어로 지정. 검색 엔진과 스크린 리더(시각장애인용 프로그램)가 이 정보를 활용

• <meta charset="UTF-8">: 문자 인코딩 지정. 이게 없거나 잘못되면 한글이 깨짐

• <meta name="viewport" ...>: 모바일 기기에서 적절한 배율로 표시되도록 함. 반응형 웹의 필수 설정

• <head>: 문서의 메타정보 (타이틀, 스타일, 스크립트 등) - 화면에 표시되지 않음

• <body>: 실제 화면에 보이는 내용

#4. 텍스트 관련 태그들

#제목 태그 (Heading Tags)

웹페이지의 구조를 만드는 가장 중요한 태그이다. 책의 목차처럼 내용의 계층구조를 나타낸다.

<h1>가장 큰 제목</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

가장 큰 제목

두 번째 제목

세 번째 제목

네 번째 제목

다섯 번째 제목

가장 작은 제목

실무 사용 규칙

• <h1>은 페이지당 한 번만 사용하는 것이 권장됨 (페이지의 대표 제목)

• 계층을 건너뛰지 않고 순서대로 사용 (예: <h2> 다음에 <h4>를 바로 쓰지 않음)

• 글자 크기를 키우기 위해 제목 태그를 사용하지 않는다. 크기 조절은 CSS로 처리

#단락과 줄바꿈 태그

• <p>: 하나의 문단을 나타낸다

• <br>: 강제 줄바꿈 (닫는 태그 없음)

• <hr>: 구분선 (닫는 태그 없음)

<p>첫 번째 문단입니다. 여러 줄로 작성해도 브라우저에서는 한 줄로 표시됩니다.</p>
<p>두 번째 문단입니다.<br>br 태그로 강제 줄바꿈을 했습니다.</p>
<hr>
<p>구분선 위의 문단입니다.</p>

#강조 태그들

텍스트를 강조하는 다양한 방법들을 알아본다.

• <strong>: 중요한 내용을 굵게 표시 (의미적 강조)

• <b>: 단순히 굵게 표시 (시각적 효과)

• <em>: 강조된 내용을 기울임꼴로 표시 (의미적 강조)

• <i>: 단순히 기울임꼴로 표시 (시각적 효과)

의미적 vs 시각적 구분이 중요한 이유

• 화면상으로는 <strong>과 <b>가 둘 다 굵게 보이지만, 시각장애인을 위한 스크린 리더는 <strong>을 더 강한 톤으로 읽어준다

• 검색 엔진도 의미적 태그를 중요도 판단에 활용

• 규칙: 실제로 중요한 내용이면 <strong>/<em>, 단순히 스타일만 원하면 CSS로 처리

<p><strong>중요한 내용</strong>입니다.</p>
<p><em>강조된 내용</em>입니다.</p>
<p><b>단순히 굵은 글씨</b>와 <i>단순히 기울임 글씨</i>입니다.</p>

중요한 내용입니다.

강조된 내용입니다.

단순히 굵은 글씨와 단순히 기울임 글씨입니다.

#기타 유용한 텍스트 태그들

• <mark>: 형광펜으로 칠한 듯한 효과

• <del>: 삭제된 텍스트 (취소선)

• <ins>: 삽입된 텍스트 (밑줄)

• <sub>: 아래 첨자 (H₂O)

• <sup>: 위 첨자 (x²)

<p><mark>중요한 내용을 강조</mark>합니다.</p>
<p><del>이 내용은 삭제되었습니다</del> <ins>새로운 내용이 추가되었습니다</ins></p>
<p>물의 화학식: H<sub>2</sub>O</p>
<p>제곱 공식: x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup></p>

중요한 내용을 강조합니다.

이 내용은 삭제되었습니다 새로운 내용이 추가되었습니다

물의 화학식: H2O

제곱 공식: x2 + y2 = z2

<pre> 태그는 입력하는 그대로 표시한다.

<pre><code class="language-javascript">
function greet() {
  const message = "Hello, world!";
  console.log(message);
}
</code></pre>

<ruby> 태그는 글자에 주석을 표시한다.

<p>
    <ruby>日本語<rt>にほんご</rt></ruby>の勉強は楽しいです。
</p>

#5. 목록 태그

#순서 없는 목록

• <ul>: 순서가 필요하지 않은 목록(unordered list)

• <li>: 항목 표시(list item)

<h3>내가 좋아하는 음식</h3>
<ul>
    <li>피자</li>
    <li>파스타</li>
    <li>김치찌개</li>
    <li>치킨</li>
</ul>

#내가 좋아하는 음식

• 피자

• 파스타

• 김치찌개

• 치킨

#순서 목록

• <ol>: 순서가 필요한 항목(ordered list)

• <li>: 항목 표시(list item)

<h3>HTML 학습 순서</h3>
<ol>
    <li>HTML 기본 구조 이해하기</li>
    <li>텍스트 태그 배우기</li>
    <li>목록 태그 배우기</li>
    <li>표 태그 배우기</li>
</ol>

#HTML 학습 순서

1. HTML 기본 구조 이해하기

2. 텍스트 태그 배우기

3. 목록 태그 배우기

4. 표 태그 배우기

#중첩된 목록

<h3>웹 개발 기술</h3>
<ul>
    <li>프론트엔드
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </li>
    <li>백엔드
        <ul>
            <li>Java</li>
            <li>Python</li>
            <li>Node.js</li>
        </ul>
    </li>
</ul>

#웹 개발 기술

• 프론트엔드

  • HTML

  • CSS

  • JavaScript

• 백엔드

  • Java

  • Python

  • Node.js

#6. 표(Table) 태그

#기본적인 표 만들기

• <table>: 표 만들기

• <tr>: 행(row)을 작성

• <td>: 셀(cell)을 작성

• <th>: 셀의 제목(중앙 정렬, 굵게 표시). 접근성을 위해 scope="col"(열 제목) 또는 scope="row"(행 제목) 속성을 함께 쓰는 것이 권장됨

#셀 병합하기

• colspan 속성: 가로로 셀 병합 (<td> 또는 <th>의 속성)

• rowspan 속성: 세로로 셀 병합 (<td> 또는 <th>의 속성)

<table>
    <tr>
        <td colspan="2">가로로 병합된 셀</td>
        <td>일반 셀</td>
    </tr>
    <tr>
        <td rowspan="2">세로로 병합된 셀</td>
        <td>일반 셀1</td>
        <td>일반 셀2</td>
    </tr>
    <tr>
        <td>일반 셀3</td>
        <td>일반 셀4</td>
    </tr>
</table>

#표에 제목 붙이기

<caption> 태그는 <table> 태그 바로 다음에 사용하며, 표의 위쪽에 표시된다.

<table>
    <caption>월별 주요 도시 강수량 (단위: mm)</caption>
    <tr>
        <th scope="col">도시</th>
        <th scope="col">7월</th>
        <th scope="col">8월</th>
    </tr>
    <tr>
        <td>서울</td>
        <td>395</td>
        <td>364</td>
    </tr>
</table>

<figcaption>은 <figure> 태그로 감싼 이미지, 차트, 비디오, 코드 블록 등의 독립적인 콘텐츠에 대한 설명을 제공한다.

<figure>
    <img src="helsinki.jpg" alt="헬싱키 대성당의 모습">
    <figcaption>핀란드 헬싱키 대성당의 여름 풍경</figcaption>
</figure>

#표 구조 정의하기

• <thead>: 표의 제목 부분

• <tbody>: 표의 본문 부분

• <tfoot>: 표의 요약 부분

<table>
    <caption>학생 성적표</caption>
    <thead>
        <tr>
            <th scope="col">이름</th>
            <th scope="col">국어</th>
            <th scope="col">영어</th>
            <th scope="col">수학</th>
            <th scope="col">평균</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>김철수</td>
            <td>85</td>
            <td>90</td>
            <td>78</td>
            <td>84.3</td>
        </tr>
        <tr>
            <td>이영희</td>
            <td>92</td>
            <td>88</td>
            <td>95</td>
            <td>91.7</td>
        </tr>
        <tr>
            <td>박민수</td>
            <td>76</td>
            <td>82</td>
            <td>89</td>
            <td>82.3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>합계</td>
            <td>253</td>
            <td>260</td>
            <td>262</td>
            <td>258.3</td>
        </tr>
    </tfoot>
</table>

#7. 실습 과제: 자기소개 페이지 만들기

오늘 배운 HTML 태그들을 모두 활용해서 자기소개 페이지를 만들어본다.

#필수 포함 요소

1. 완전한 HTML 문서 구조 (DOCTYPE, html, head, body)

2. 제목 태그 (h1~h6) 최소 3개 이상

3. 단락 태그 (p) 최소 3개 이상

4. 강조 태그 (strong, em) 각각 1개 이상

5. 순서 없는 목록 (ul, li) 1개 이상

6. 순서 있는 목록 (ol, li) 1개 이상

7. 표 (table) 1개 이상 (최소 3×3 크기)

8. 기타 텍스트 태그 (mark, del, ins, sub, sup 중 2개 이상)

#실습 예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>김학생의 자기소개 페이지</title>
</head>
<body>
    <h1>안녕하세요! 김학생입니다 👋</h1>
    <hr>

    <h2>📋 기본 정보</h2>
    <p><strong>이름:</strong> 김학생 (Kim Student)</p>
    <p><em>나이:</em> 20세</p>
    <p>저는 웹 개발을 배우고 있는 <mark>컴퓨터공학과 2학년</mark> 학생입니다.</p>

    <h2>🎯 취미 및 관심사</h2>
    <h3>좋아하는 것들</h3>
    <ul>
        <li>프로그래밍 (특히 웹 개발)</li>
        <li>영화 감상</li>
        <li>독서</li>
    </ul>

    <h3>웹 개발 학습 계획</h3>
    <ol>
        <li>HTML 기초 완전 정복</li>
        <li>CSS로 예쁜 디자인 만들기</li>
        <li>JavaScript로 동적 기능 구현</li>
    </ol>

    <h2>💼 경험 및 활동</h2>
    <p>고등학교 때 <strong>컴퓨터 동아리 회장</strong>을 맡았습니다.
    그 당시에는 <del>게임만 했지만</del> <ins>프로그래밍에 관심을 가지게 되었습니다</ins>.</p>

    <h3>📊 전공 과목 성적</h3>
    <table>
        <caption>2024년 1학기 전공과목 성적표</caption>
        <thead>
            <tr>
                <th scope="col">과목명</th>
                <th scope="col">학점</th>
                <th scope="col">성적</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>프로그래밍 기초</td>
                <td>3</td>
                <td>A+</td>
            </tr>
            <tr>
                <td>자료구조</td>
                <td>3</td>
                <td>A</td>
            </tr>
            <tr>
                <td>데이터베이스</td>
                <td>3</td>
                <td>B+</td>
            </tr>
        </tbody>
    </table>

    <h3>좋아하는 수학 공식</h3>
    <p>피타고라스 정리: a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
    <p>물의 화학식: H<sub>2</sub>O</p>
</body>
</html>