HTML

웹페이지의 뼈대 세우기

2024 DTC

슬라이드 보는 법

→ / Space	다음으로
←	이전으로
↓ / ↑	같은 주제 안에서 단계 이동
O	전체 슬라이드 한눈에 보기
F	전체화면

아래쪽 화살표가 보이면 그 주제는 단계별로 이어집니다

오늘 끝나면 할 수 있는 것

HTML 문서의 기본 구조를 직접 작성한다
태그와 속성을 읽고 쓴다
글, 목록, 링크, 이미지, 표, 입력창을 화면에 올린다
내용에 맞는 태그를 고른다 — 시맨틱

HTML이란?

HyperText Markup Language

문서에 “표시(mark)”를 달아 구조를 알려주는 언어

HTML이란?

웹페이지의 뼈대를 만드는 것

HTML이란?

HTML

제목이다, 문단이다, 목록이다

무엇인가

CSS

크게, 빨갛게, 가운데로

어떻게 보이는가

오늘 배울 것

HTML 문서의 뼈대
태그 문법
자주 쓰는 태그들
시맨틱 태그

3. 자주 쓰는 태그들

3-1. 제목과 문단
3-2. 목록
3-3. 링크
3-4. 이미지
3-5. 표
3-6. 입력 폼
3-7. div와 span

1. HTML 문서의 뼈대

HTML 문서를 만들려면

1. 문서의 뼈대

          
            <!doctype html>
            <html>
              <head>
              </head>
              <body>
              </body>
            </html>

1. 문서의 뼈대

            
              <!doctype html>
              <html lang="ko">
                <head>
                  <meta charset="utf-8">
                  <title>내 첫 페이지</title>
                </head>
                <body>
                </body>
              </html>

아직 화면에 아무것도 없습니다

1. 문서의 뼈대

            
              <!doctype html>
              <html lang="ko">
                <head>
                  <meta charset="utf-8">
                  <title>내 첫 페이지</title>
                </head>
                <body>
                  <h1>안녕하세요</h1>
                  <p>제 첫 웹페이지입니다</p>
                </body>
              </html>

안녕하세요

제 첫 웹페이지입니다

1. 정리

<!doctype html> — HTML 문서라는 선언. 맨 첫 줄
<head> — 화면에 안 보이는 정보. 제목, 문자 인코딩
<body> — 화면에 보이는 내용

한글이 깨지면 십중팔구 <meta charset="utf-8">가 없는 것

2. 태그 문법

태그를 제대로 쓰려면

2. 태그 문법

<p>여는 태그

안녕하세요내용

</p>닫는 태그

내용을 태그로 감싸서 “이건 문단이다”라고 알려준다

2. 태그 문법

            
              <p>안녕하세요</p>
              <p>반갑습니다</p>

안녕하세요

반갑습니다

2. 태그 문법 속성

<a태그 이름

href="https://example.com"속성 이름 = "값"

>

태그에 추가 정보를 붙이는 것이 속성

2. 태그 문법 빈 태그

            
              <!-- 닫는 태그가 없는 태그도 있다 -->
              <img src="cat.png" alt="고양이">
              <br>
              <hr>
              <input type="text">

줄바꿈
했습니다

2. 태그 문법 중첩

            
              <!-- 올바른 중첩 -->
              <p><strong>중요한</strong> 문단</p>

              <!-- 잘못된 중첩 -->
              <p><strong>중요한 문단</p></strong>

중요한 문단

둘 중 어느 쪽이 맞을까요?

2. 정리

<태그>내용</태그> — 감싸서 의미를 부여
<태그 속성="값"> — 속성은 여는 태그 안에
<img>, <br> — 닫는 태그가 없는 빈 태그
나중에 연 태그를 먼저 닫는다

3-1. 제목과 문단

글을 화면에 올리려면

3-1. 제목과 문단

            
              <h1>제목 1</h1>
              <h2>제목 2</h2>
              <h3>제목 3</h3>
              <h4>제목 4</h4>

제목 1

제목 2

제목 3

제목 4

3-1. 제목과 문단

            
              <h1>가장 큰 제목</h1>
              <p>제목 아래 설명하는 문단입니다.</p>
              <p>문단을 나누면 줄이 바뀝니다.</p>

가장 큰 제목

제목 아래 설명하는 문단입니다.

문단을 나누면 줄이 바뀝니다.

3-1. 제목과 문단

            
              <p>한 문단 안에서<br>줄만 바꾸려면 br</p>
              <hr>
              <p>hr은 구분선입니다</p>

한 문단 안에서
줄만 바꾸려면 br

hr은 구분선입니다

3-1. 정리

<h1> ~ <h6> — 제목. h1은 페이지에 하나만
<p> — 문단
<br> — 줄바꿈, <hr> — 구분선

3-2. 목록

여러 항목을 나열하려면

3-2. 목록 순서 없음

            
              <ul>
                <li>사과</li>
                <li>바나나</li>
                <li>포도</li>
              </ul>

사과
바나나
포도

3-2. 목록 순서 있음

            
              <ol>
                <li>재료를 준비한다</li>
                <li>물을 끓인다</li>
                <li>면을 넣는다</li>
              </ol>

재료를 준비한다
물을 끓인다
면을 넣는다

3-2. 목록 중첩

            
              <ul>
                <li>과일
                  <ul>
                    <li>사과</li>
                    <li>바나나</li>
                  </ul>
                </li>
                <li>채소</li>
              </ul>

과일
- 사과
- 바나나
채소

3-2. 정리

<ul> — 순서 없는 목록 (점)
<ol> — 순서 있는 목록 (번호)
<li> — 항목. 항상 ul이나 ol 안에

3-3. 링크

다른 페이지로 이동하려면

3-3. 링크

            
              <a href="https://developer.mozilla.org">
                MDN 문서 보러가기
              </a>

MDN 문서 보러가기

3-3. 링크 새 탭

            
              <!-- 새 탭에서 열려면 -->
              <a href="https://developer.mozilla.org"
                 target="_blank">
                MDN 문서 보러가기
              </a>

MDN 문서 보러가기

3-3. 링크 여러 가지

            
              <!-- 같은 폴더의 다른 파일로 -->
              <a href="about.html">소개 페이지</a>

              <!-- 메일 보내기 -->
              <a href="mailto:dtc@example.com">메일 보내기</a>

소개 페이지
메일 보내기

3-3. 정리

<a href="주소">글자</a>
target="_blank" — 새 탭에서 열기
주소 자리에는 웹주소도, 같은 폴더의 파일 이름도 들어간다

3-4. 이미지

그림을 넣으려면

3-4. 이미지

            
              <img src="html5-logo.svg" alt="HTML5 로고">

3-4. 이미지 크기

            
              <img src="html5-logo.svg"
                   alt="HTML5 로고"
                   width="200">

3-4. 이미지 alt

            
              <!-- 그림을 못 불러오면? -->
              <img src="없는파일.png"
                   alt="웃고 있는 고양이">

그림 파일이 없으면 화면에 뭐가 나올까요?

3-4. 정리

<img src="경로" alt="설명">
src — 그림 파일의 위치
alt — 그림을 못 볼 때 대신 읽히는 글. 생략하지 말 것

3-5. 표

행과 열로 된 자료를 보여주려면

3-5. 표

            
              <table>
                <tr>
                  <th>이름</th>
                  <th>학과</th>
                </tr>
                <tr>
                  <td>홍길동</td>
                  <td>컴퓨터공학</td>
                </tr>
              </table>

이름	학과
홍길동	컴퓨터공학

3-5. 정리

<table> — 표 전체
<tr> — 한 줄 (table row)
<th> — 제목 칸, <td> — 일반 칸

표는 “자료”를 위한 것이지 “배치”를 위한 것이 아니다

3-6. 입력 폼

사용자에게 무언가를 받으려면

3-6. 입력 폼

            
              <form>
                <label for="name">이름</label>
                <input type="text" id="name">

                <label for="email">이메일</label>
                <input type="email" id="email">

                <button type="submit">보내기</button>
              </form>

3-6. 입력 폼 type

            
              <input type="text">
              <input type="password">
              <input type="date">
              <input type="checkbox">
              <input type="radio">

체크박스

라디오

3-6. 정리

<input type="..."> — type에 따라 모양이 달라진다
<label for="id"> — 입력창의 이름표. id와 짝을 맞춘다
<button> — 누르는 버튼

3-7. div와 span

특별한 의미 없이 묶기만 하려면

3-7. div와 span

            
              <div>
                <h2>공지사항</h2>
                <p>내일은 휴강입니다</p>
              </div>

공지사항

내일은 휴강입니다

3-7. div와 span

            
              <p>여기서 <span>이 부분만</span> 강조</p>

여기서 이 부분만 강조

3-7. 정리

<div> — 덩어리로 묶는다. 줄 전체를 차지
<span> — 글 일부만 묶는다. 줄을 바꾸지 않음
둘 다 의미가 없다. 꾸미려고 묶을 때만 쓴다

여기에 CSS를 붙이는 방법은 다음 시간에

4. 시맨틱 태그

내용에 맞는 태그를 고르려면

4. 시맨틱 태그 전부 div

            
              <div class="header">
                <h1>DTC 블로그</h1>
                <div class="nav">홈 · 소개</div>
              </div>
              <div class="main">
                <div class="article">
                  <h2>첫 번째 글</h2>
                  <p>오늘 HTML을 배웠습니다.</p>
                </div>
              </div>
              <div class="footer">© 2024 DTC</div>

DTC 블로그

홈 · 소개

첫 번째 글

오늘 HTML을 배웠습니다.

여기서 태그 이름만 바꾸면 화면이 달라질까요?

4. 시맨틱 태그 시맨틱

            
              <header>
                <h1>DTC 블로그</h1>
                <nav>홈 · 소개</nav>
              </header>
              <main>
                <article>
                  <h2>첫 번째 글</h2>
                  <p>오늘 HTML을 배웠습니다.</p>
                </article>
              </main>
              <footer>© 2024 DTC</footer>

DTC 블로그

홈 · 소개

첫 번째 글

오늘 HTML을 배웠습니다.

4. 무엇이 달라지는가

div 범벅

여기 뭔가 있다

기계가 알 수 있는 것

시맨틱

여기가 머리말,
여기가 본문

기계가 알 수 있는 것

화면은 같지만 “뜻”이 다르다

4. 왜 쓰는가

검색엔진이 무엇이 본문인지 안다
스크린리더가 “머리말”, “탐색 메뉴”라고 읽어준다
다른 사람이 코드를 읽을 때 구조가 바로 보인다

4. 자주 쓰는 시맨틱 태그

<header>	페이지나 구역의 머리말
<nav>	메뉴, 탐색 링크 모음
<main>	페이지의 핵심 내용. 하나만
<section>	주제별로 나눈 구역
<article>	그 자체로 완결된 글
<footer>	바닥글, 저작권 표시

5. 정리

오늘 배운 것

문서의 뼈대

<!doctype> → <html> → <head> + <body>
보이는 건 전부 <body> 안에
태그로 감싸고, 속성으로 정보를 더한다

6. 실습

직접 만들어봅시다

6. 실습 과제

자기소개 페이지 — 제목, 사진, 짧은 소개 문단
좋아하는 것 3가지를 목록으로
시간표를 표로
연락처 링크와 간단한 문의 폼

오늘 배운 태그만으로 전부 만들 수 있습니다

더 볼 것

MDN HTML 문서 — 태그가 기억 안 날 때
HTML 요소 목록 — 전체 태그 사전
W3C Validator — 내 HTML이 올바른지 검사

끝

다음 시간엔 CSS로 꾸며봅시다

h1 ~ h6, p	제목과 문단
ul, ol, li	목록
a	링크 — href
img	이미지 — src, alt
table, tr, th, td	표
form, input, label, button	입력 폼
div, span	의미 없이 묶기
header, nav, main, footer	시맨틱 태그