HTML 공식 문서: 개념, 예제, 실습
예제 중심의 간결한 HTML 레퍼런스. 개념을 읽고 코드를 본 뒤 Coddy 여정에서 직접 연습하세요.
HTML 가이드 학습 시작하기시작하기
- DOCTYPE 선언`<!DOCTYPE html>`은 모든 HTML 문서의 첫 줄에 쓰는 선언이에요. 브라우저가 쿼크 모드가 아니라 표준 모드로 페이지를 렌더링하게 해요. 문법, 옛날 DOCTYPE이 일으키는 일, 모드를 확인하는 방법을 알아봐요.
- HTML 태그HTML 태그는 콘텐츠에 표시를 해서 각 부분이 제목인지, 문단인지, 링크인지, 이미지인지 브라우저에 알려 줘요. 태그와 요소가 어떻게 동작하는지, 닫는 태그가 없는 태그는 무엇인지, 중첩은 어떻게 하는지, 자주 쓰는 태그는 무엇인지 알아봐요.
- HTML 속성속성은 HTML 요소에 정보를 더해요. 링크가 어디로 가는지, 이미지가 무엇을 보여 주는지, 어떤 CSS 클래스가 적용되는지 정해요. 문법, 모든 요소가 받는 전역 속성, class와 id, 불리언 속성, data-* 속성을 알아봐요.
- HTML 주석HTML 주석은 <!--와 --> 사이에 쓰는 텍스트로, 브라우저에 표시되지 않아요. 문법, 여러 줄 주석, 코드 주석 처리, 에디터 단축키, 주석을 중첩할 수 없는 이유, 주석이 절대 비공개가 아닌 이유를 알아봐요.
- div 태그<div> 태그는 그 자체로 아무 의미가 없는 범용 블록 컨테이너예요. div로 콘텐츠를 묶는 법, 클래스로 스타일을 입히는 법, div와 flexbox로 레이아웃을 만드는 법, 그리고 시맨틱 태그나 버튼이 더 나은 경우를 알아봐요.
- span 태그<span> 태그는 범용 인라인 컨테이너예요. 줄 안의 몇 단어를 감싸서 줄을 깨뜨리지 않고 스타일을 입히거나 스크립트로 다룰 수 있게 해요. 사용법, div와의 차이, 더 알맞은 태그가 있는 경우를 알아봐요.
텍스트
- 제목 태그HTML에는 페이지의 개요를 만드는 제목 단계가 <h1>부터 <h6>까지 여섯 개 있어요. 기본 크기, 제목 순서 정하는 법, h1을 몇 개 쓸지, CSS로 크기를 바꾸는 법, 스크린 리더가 제목을 활용하는 방식을 알아봐요.
- HTML 줄바꿈텍스트 블록 안에서 새 줄을 시작하려면 <br>을 써요. <br>이 맞는 경우와 문단이 나은 경우, 텍스트의 개행을 그대로 살리는 법, <wbr>로 긴 단어를 끊는 법, 줄바꿈을 막는 법을 알아봐요.
- HTML 공백브라우저는 HTML에서 연속된 공백을 하나로 합쳐요. 로 공백을 더 넣는 법, 줄바꿈 없는 공백의 역할, <pre>와 white-space로 공백과 탭을 유지하는 법, CSS 간격이 더 나은 경우를 알아봐요.
- 굵게와 기울임HTML에서 글자를 굵게 하려면 <strong>이나 <b>를, 기울임꼴로 하려면 <em>이나 <i>를 써요. 어떤 태그를 언제 쓰는지, 굵게와 기울임을 함께 쓰는 법, CSS로 굵게나 기울임꼴을 주는 법을 알아봐요.
- 밑줄과 취소선HTML에서 밑줄은 <u>나 CSS text-decoration으로, 취소선은 <s>나 <del>로 그어요. 각 태그의 의미, <ins>와 <del>로 수정 내역을 표시하는 법, 링크가 아닌 텍스트에 밑줄을 그으면 독자가 헷갈리는 이유를 알아봐요.
- 위 첨자, 아래 첨자위 첨자는 <sup>로, 아래 첨자는 <sub>로 써요. 거듭제곱, 서수, 각주 번호, 화학식에 쓰여요. 주요 용도, 줄 간격이 벌어지지 않게 하는 법, 유니코드 문자나 MathML이 더 나은 경우를 알아봐요.
- hr 가로줄HTML에서 가로줄은 <hr> 태그로 그어요. 이 태그의 의미, CSS로 색, 두께, 길이, 스타일을 바꾸는 법, 가운데에 텍스트가 있는 구분선 만드는 법, 세로줄 만드는 법을 알아봐요.
- 텍스트 가운데 정렬HTML에서 텍스트는 CSS text-align: center 속성으로 가운데 정렬해요. 어디에 적용해야 하는지, span에서는 왜 안 되는지, 상자 안에서 세로로 가운데 정렬하는 법, 시작, 끝, 양쪽 정렬, 문단 들여쓰기를 알아봐요.
링크와 이미지
- 링크 (a href)<a> 요소로 링크를 만드는 방법이에요. href 속성, 절대 URL과 상대 URL, #id로 페이지의 특정 위치로 이동하기, 다운로드 링크, 카드 전체 링크, 링크를 망가뜨리는 실수를 알아봐요.
- 새 탭에서 열기링크에 target="_blank"를 추가하면 새 탭에서 열려요. rel="noopener"와 noreferrer, 새 탭에서 열린다고 사용자에게 알리는 법, 다른 target 값, JavaScript로 새 탭을 여는 법을 다뤄요.
- 이메일 링크 (mailto)href="mailto:"로 새 이메일을 여는 링크를 만들고, 제목, 본문, 참조(cc), 숨은 참조(bcc)를 채우고, 값을 올바르게 인코딩하고, tel:과 sms:로 전화 걸기 링크를 만드는 법을 알아봐요.
- 버튼 링크다른 페이지로 이동하는 버튼은 버튼처럼 꾸민 링크로 만드는 게 맞아요. 링크 안의 버튼과 onclick 이동이 왜 문제인지, 폼 버튼이 맞는 경우는 언제인지, 링크 버튼을 꾸미고 비활성화하는 법을 알아봐요.
- 이미지 넣기HTML에서 <img> 태그로 이미지를 넣는 방법이에요. src와 alt, width와 height로 이미지 크기 정하기, 반응형 이미지, object-fit으로 자르기, figure로 캡션 달기, 지연 로딩, 이미지 아래 틈을 알아봐요.
목록과 표
- 목록 (ul, ol)HTML에서 목록을 만드는 방법이에요. <ul>로 글머리 기호 목록, <ol>로 번호 목록(start, reversed, 알파벳과 로마 숫자), 중첩 목록, 설명 목록, CSS로 글머리 기호를 꾸미거나 없애는 법을 알아봐요.
- HTML tableHTML에서 표를 만드는 방법이에요. <tr>로 행, <td>로 셀, <th>와 scope로 제목 셀, caption, thead, tbody, tfoot, 줄무늬 행, 작은 화면에서 스크롤되는 표를 알아봐요.
- 표 테두리CSS로 HTML 표에 테두리를 넣는 방법이에요. border-collapse로 한 줄 테두리 만들기, border-spacing, 가로선만 넣기, 안쪽 선만 넣기, 둥근 모서리, border 속성을 더 이상 쓰지 않는 이유를 알아봐요.
- 셀 병합colspan으로 여러 열에 걸쳐, rowspan으로 여러 행에 걸쳐 표 셀을 병합해요. 표가 반듯하게 유지되도록 셀 개수를 세는 법, 묶음 제목 만드는 법, 병합한 표를 스크린 리더가 읽기 쉽게 유지하는 법을 알아봐요.
폼
- HTML formHTML로 폼을 만드는 방법이에요. form 요소, name 속성, action과 method(GET과 POST 차이), fieldset과 legend로 묶기, required와 pattern으로 기본 유효성 검사, JavaScript로 제출 처리하기를 알아봐요.
- input type 종류HTML <input> 태그의 모든 type을 한곳에 모았어요. text, email, password, number, range, 날짜와 시간, color, file, hidden 등 각 타입이 무엇을 검사하는지, 휴대폰에서 어떤 키보드가 열리는지, 공통 속성은 무엇인지 알아봐요.
- HTML 버튼<button> 요소로 HTML 버튼을 만드는 방법이에요. 세 가지 type(submit, button, reset), 폼과 함께 값 보내기, 비활성화된 버튼, 아이콘, 포커스 링을 유지하는 CSS 스타일을 알아봐요.
- HTML 체크박스<input type="checkbox">로 HTML 체크박스를 만드는 방법이에요. 라벨, checked 속성, 체크했을 때와 안 했을 때 폼이 보내는 값, 체크박스 묶음, indeterminate 상태를 쓴 전체 선택, 스타일 꾸미기를 알아봐요.
- 라디오 버튼HTML 라디오 버튼이 동작하는 방식이에요. name 속성으로 묶기, checked로 기본 선택하기, 필수 묶음, JavaScript로 선택된 값 읽기, 키보드 동작, 직접 그린 원이나 카드 모양으로 꾸미기를 알아봐요.
- 셀렉트 박스<select>와 <option>으로 HTML 드롭다운 목록을 만드는 방법이에요. value, 기본 선택과 placeholder 옵션, required, 옵션 묶음, 다중 선택, JavaScript로 값 읽고 설정하기, 화살표 꾸미기를 알아봐요.
- textarea 태그<textarea>로 여러 줄 텍스트 필드를 만드는 방법이에요. rows와 cols, 태그 사이의 기본 텍스트, 크기 조절과 자동으로 늘어나기, 글자 수 카운터와 maxlength, 제출된 텍스트의 줄바꿈, 스타일 꾸미기를 알아봐요.
- label 태그<label> 요소가 폼 필드에 이름을 붙이는 방법이에요. for와 id로, 또는 감싸서 연결하기, 체크박스와 라디오의 넓은 클릭 영역, 힌트와 오류 메시지, 숨긴 라벨, 연결을 끊는 실수를 알아봐요.
시맨틱 HTML
- 시맨틱 HTML시맨틱 HTML은 모양이 아니라 내용이 무엇인지에 따라 태그를 고르는 거예요. 시맨틱 레이아웃 태그(header, nav, main, article, aside, footer), 이 태그들이 스크린 리더와 검색 엔진에 주는 것, 페이지 구조를 확인하는 법을 알아봐요.
- header 태그<header> 요소는 페이지나 섹션의 도입부를 담아요. 로고, 제목, 내비게이션, 작성자 정보 같은 거예요. 사이트 헤더 만드는 법, <header>와 <head>, 제목 태그의 차이, 글 안에서 쓰는 법, 상단에 고정하는 법을 알아봐요.
- footer 태그<footer> 요소는 페이지나 섹션을 마무리해요. 저작권, 연락처, 링크, 작성자 정보 같은 내용이에요. 링크 열이 있는 사이트 푸터 만드는 법, 내용이 짧은 페이지에서 푸터를 맨 아래에 두는 법, 글 안에서 푸터를 쓰는 법을 알아봐요.
- nav 태그<nav> 요소는 주요 내비게이션 링크 묶음을 표시해요. <nav>와 목록으로 내비게이션 바 만드는 법, 현재 페이지 표시하는 법, 한 페이지의 여러 nav에 이름 붙이는 법, 모바일 메뉴 토글 만드는 법을 알아봐요.
- section 태그<section> 요소는 한 가지 주제의 콘텐츠를 자체 제목 아래 묶어요. <section>을 언제 쓰는지, <article>이나 <div>가 더 나은 경우는 언제인지, 셋을 어떻게 중첩하는지, 이름이 붙은 section이 어떻게 랜드마크가 되는지 알아봐요.
head와 메타 태그
- title 태그<title> 요소는 브라우저 탭, 북마크, 검색 결과에서 페이지 이름을 정해요. 어디에 쓰는지, 얼마나 길어야 하는지, <h1>이나 title 속성과 무엇이 다른지, JavaScript로 바꾸는 법을 알아봐요.
- meta viewportviewport 메타 태그는 휴대폰이 데스크톱 너비가 아니라 화면 너비로 페이지를 배치하게 해요. 표준 태그, 각 값의 역할, 반응형 CSS가 이 태그에 기대는 이유, 피해야 할 값을 알아봐요.
- HTML 리다이렉트순수 HTML의 meta refresh 태그, JavaScript, 또는 서버로 페이지를 다른 페이지로 리다이렉트해요. meta refresh 문법, 페이지 자동 새로고침, 서버 301 리다이렉트가 더 나은 이유, 검색 엔진이 각 방법을 어떻게 다루는지 알아봐요.
- 파비콘파비콘은 브라우저 탭의 작은 아이콘이에요. 파비콘을 넣는 link 태그, 준비할 파일과 크기(ICO, SVG, PNG, apple-touch-icon), SVG나 이모지 파비콘 만드는 법, JavaScript로 바꾸는 법, 예전 아이콘이 계속 보이는 이유를 알아봐요.
- lang 속성lang 속성은 브라우저, 스크린 리더, 번역 도구에 콘텐츠가 어떤 언어인지 알려 줘요. 어디에 쓰는지, 어떤 코드를 쓰는지(en, en-US, ko, pt-BR), 다른 언어로 된 구절을 표시하는 법, 눈에 보이게 바뀌는 것을 알아봐요.
미디어와 인터랙티브 요소
- iframe 태그<iframe> 요소는 다른 웹페이지를 내 페이지 안에 보여 줘요. 필요한 속성(src, title, width, height), 유튜브 영상과 지도 삽입하는 법, 반응형 iframe 만드는 법, sandbox로 할 수 있는 일을 제한하는 법, 어떤 사이트는 iframe에서 열리지 않는 이유를 알아봐요.
- video 태그<video> 요소는 브라우저 자체 플레이어로 동영상 파일을 재생해요. 마크업, 중요한 속성(controls, autoplay, muted, loop, playsinline, poster, preload), <source>로 대체 형식 주기, <track>으로 자막 넣기, 반응형 크기, JavaScript로 재생 제어하기를 알아봐요.
- audio 태그<audio> 요소는 브라우저 내장 플레이어로 소리 파일을 재생해요. 마크업, 속성(controls, autoplay, loop, muted, preload), 써야 할 형식, 소리가 있는 자동 재생이 막히는 이유, JavaScript로 재생 버튼을 직접 만드는 법을 알아봐요.
- details와 summary<details>와 <summary> 요소는 JavaScript 없이 접고 펼치는 섹션을 만들어요. summary는 항상 보이고, 클릭하면 나머지가 보이거나 숨겨져요. 마크업, open과 name 속성, 아코디언, 화살표 꾸미기, toggle 이벤트를 알아봐요.
