AI 시대에도 필요한 HTML5, 웹표준·웹접근성 기초 완벽 노트

이지웹

2026. 10. 09. 16:03

수정됨

ZIP

HTML5_웹표준_웹접근성_기초.zip

5.1MB

HTML5 웹표준·웹접근성 기초

– 코드로 배우는 의미 있는 마크업, 누구나 접근할 수 있는 웹 만들기 (전자책 PDF, DOCX)
- 13장 152페이지, 기초부터 웹접근성까지
- 예제, 체크리스트, 연습문제, 참조 유튜브 영상 제공

────────────────────────────────────────

■ 이런 고민, 하고 계신가요?

· 유튜브와 블로그로 HTML을 따라 쳐 봤는데, 왜 그렇게 쓰는지는 모르겠어요.

· 화면은 똑같이 나오는데 b와 strong, div와 section 중 무엇을 써야 할지 헷갈려요.

· AI에게 "회원가입 페이지 만들어 줘"라고 시키면 잘 만들어 주는 것 같은데, 그 코드가 맞는지 판단할 수가 없어요.

· 웹접근성, 웹표준 이야기는 자주 듣는데 막상 어디서부터 지켜야 할지 막막해요.

· 포트폴리오를 만들고 있는데 W3C 검사만 돌리면 빨간 오류가 가득해요.

· 취업 면접에서 "시맨틱 마크업이 뭔가요?"라는 질문을 받을까 봐 걱정돼요.

이 책은 바로 이 질문들에 답하기 위해 만들었습니다.

────────────────────────────────────────

■ 왜 지금도 HTML이 가장 중요할까요?

이제는 "회원가입 페이지 만들어 줘" 한마디면 AI가 몇 초 만에 화면을 만들어 줍니다. 말로 설명하며 결과물을 다듬어 가는 이른바 바이브 코딩 시대가 열렸고, 코딩을 배운 적 없는 분도 그럴듯한 웹 페이지를 만들 수 있게 되었습니다. 그래서 많은 분이 묻습니다. "그럼 HTML은 이제 안 배워도 되나요?"

저자의 대답은 반대입니다. AI 시대일수록 HTML이 가장 중요합니다.

1) AI가 만든 코드를 판단하는 기준이 HTML입니다.

AI는 겉보기에 멀쩡하지만 div만 가득하고, 이미지 대체 텍스트(alt)와 입력창 label이 빠지고, 제목 순서가 엉킨 코드를 자주 만듭니다. 화면이 예뻐 보여도 키보드로는 쓸 수 없고 스크린 리더로는 읽을 수 없는 페이지가 될 수 있습니다. 무엇이 잘못됐는지 알아보려면 HTML을 읽을 줄 알아야 합니다.

2) 제대로 된 웹은 구조에서 시작됩니다.

웹표준, 웹접근성, 검색 노출, 유지보수는 모두 의미에 맞는 HTML 구조 위에서만 성립합니다. CSS와 JavaScript는 이 구조를 선택하고, 꾸미고, 움직일 뿐입니다. 뼈대가 부실하면 아무리 AI를 써도 스타일은 꼬이고 스크립트는 복잡해집니다.

3) 좋은 지시는 정확한 용어에서 나옵니다.

"헤더 안에 주 메뉴 nav를 두고, 본문은 main, 표에는 caption과 th scope를 넣어 줘."라고 말할 수 있는 사람과 "예쁘게 만들어 줘."라고 말하는 사람이 받는 결과물은 완전히 다릅니다. HTML을 아는 것은 AI를 잘 부리는 능력입니다.

AI는 훌륭한 조수입니다. 하지만 결과물에 책임지는 사람은 나 자신입니다. 이 책은 그 책임을 질 수 있는 "기본기와 눈"을 기르는 책입니다.

────────────────────────────────────────

■ 이 책의 핵심 질문 하나

"이 내용에 가장 알맞은 태그는 무엇인가?"

태그를 외우는 책이 아닙니다. 모양이 아니라 의미로 태그를 고르는 힘을 기르는 책입니다. 이 원칙 하나가 웹표준, 검색 친화성, 유지보수, 그리고 모든 사람을 위한 웹접근성을 한꺼번에 해결해 줍니다.

────────────────────────────────────────

■ 이 책의 특징

1. 15년 실무 + 교육 현장의 노하우

저자는 15년 넘게 웹 실무를 해 왔고, 학원과 교육 현장에서 취업 준비생과 재직자를 가르쳐 왔습니다. 문법 설명에 그치지 않고 "왜 이렇게 써야 하는지"를 이유와 함께 설명합니다. 수강생들이 자주 실수하는 부분은 "잘못된 예 / 올바른 예"로 나란히 보여 드립니다.

2. 최신 웹표준·웹접근성 기준으로 전면 점검한 개정판

기존 학습 자료에 흔히 남아 있는 오래된 설명을 현재 기준으로 바로잡았습니다. 문법 오류, 폐지된 태그, 인터넷 익스플로러 시대의 호환성 설명, 접근성에 어긋나는 예제를 모두 점검해 고쳤습니다. 이 책은 HTML Living Standard와 WCAG 2.2를 기준으로 합니다.

3. 모든 장에 들어 있는 "웹접근성 박스"

각 장마다 "왜 이렇게 써야 하는지"를 사람의 관점에서 설명하는 접근성 박스가 있습니다. 스크린 리더 사용자가 페이지를 어떻게 읽는지, 키보드만 쓰는 사용자는 어디서 막히는지, 어떤 WCAG 기준과 연결되는지를 함께 알려 드립니다. 웹접근성을 "나중에 따로 배우는 것"이 아니라 처음부터 습관으로 만들 수 있습니다.

4. 직접 실행해 검증한 예제 40여 개

본문의 예제는 실제 브라우저에서 실행해 결과 화면을 확인하고, 문법 검사 도구로 오류가 없음을 점검한 코드입니다. 책에 실린 결과 화면이 곧 실제 실행 결과입니다. 별도의 샘플 파일을 내려받을 필요 없이 코드를 따라 입력하며 학습할 수 있게 구성했습니다.

5. 장마다 학습 목표, 핵심 정리, 직접 해보기, 확인 문제

도서 형식을 그대로 갖췄습니다. 학습 목표로 방향을 잡고, 본문과 실습으로 익히고, 핵심 정리로 복습하고, 확인 문제(총 55문항)로 이해도를 점검합니다. 정답과 해설은 부록에 있습니다.

6. 저자의 유튜브 강의 40편과 연계

모든 장에 관련 유튜브 영상 주소를 정리했습니다. 글로 이해가 부족한 부분은 영상으로 바로 확인할 수 있고, 영상 설명이 이 책과 다를 때는 책의 내용(최신 기준)을 우선하도록 안내했습니다. 부록에는 장별 영상 색인표가 있어 원하는 영상을 쉽게 찾을 수 있습니다.

7. 실무에 바로 쓰는 부록

참고 사이트와 점검 도구, HTML 태그 치트시트, 자주 하는 실수 30선, 확인 문제 정답과 해설, 영상 색인, 웹표준·웹접근성 체크리스트를 담았습니다. 작업이 끝난 뒤 체크리스트로 내 페이지를 점검해 볼 수 있습니다.

8. AI 시대를 위한 점검 가이드

13장에서는 AI가 만든 HTML을 점검하는 질문 목록을 정리했습니다. "의미에 맞는 태그를 썼는가, 제목 위계는 맞는가, alt와 label이 있는가, 키보드로 조작할 수 있는가" 등 AI 결과물을 검수하는 기준을 알려 드립니다.

────────────────────────────────────────

■ 이 책을 읽고 나면

· 웹 문서의 기본 구조(DOCTYPE, lang, charset, title)를 이유까지 설명하며 작성할 수 있습니다.

· 블록/인라인 요소와 중첩 규칙, 그리고 예외를 이해합니다.

· strong/em, abbr, blockquote 등 텍스트 요소를 의미에 맞게 구분해 사용합니다.

· header, nav, main, section, article, aside, footer 등 시맨틱 태그로 페이지 구조를 설계합니다.

· 제목 위계를 지키고, 문단·목록·표·링크·이미지·폼·오디오·비디오를 올바르게 마크업합니다.

· 접근성 있는 표(caption, th scope), 접근성 있는 폼(label, fieldset/legend, 오류 안내), 접근성 있는 미디어(자막, 대본)를 만들 수 있습니다.

· "본문 바로가기" 링크, 키보드로 열리는 서브메뉴, 새 창 안내 같은 접근성 구현 요령을 익힙니다.

· W3C 유효성 검사기, Lighthouse 등으로 내 문서를 직접 점검하고 오류를 고칩니다.

· AI가 만든 HTML을 읽고 문제점을 찾아낼 수 있는 "눈"이 생깁니다.

────────────────────────────────────────

■ 목차

머리말 / 이 책의 구성과 학습 방법

01. HTML의 구조

- HTML이란 무엇인가 / 실습 환경(VS Code, Live Server) / 문서의 기본 구조 / DOCTYPE, lang, charset / 첫 번째 HTML 문서 / 태그 작성 규칙과 엔터티 / 구조·표현·동작의 분리 / head 요소 제대로 알기 / W3C 유효성 검사

02. 블록 레벨 요소와 인라인 레벨 요소

- 블록·인라인의 차이 / 중첩 규칙과 예외 / HTML5 콘텐츠 모델 / 폐지된 요소

03. 텍스트 정의 요소

- strong과 em / b와 i / abbr, dfn / blockquote, q, cite / 스크린 리더와 강조

04. div로 작성하는 문서의 그룹화

- 그룹화가 필요한 이유 / div로 구조 만들기 / id와 class / div만으로 만든 구조의 한계

05. HTML5 시맨틱 섹셔닝

- 시맨틱 태그의 쓰임새 / section과 article의 차이 / div 구조를 시맨틱 태그로 바꾸기 / 랜드마크와 role / 중복 role을 쓰지 않는 이유

06. 제목, 문단, 연락처, 구분선, 정형화된 텍스트

- h1~h6 위계 / 문단과 글자 형태 요소 / address / hr의 올바른 사용 / pre와 code

07. 목록을 표현하는 요소

- ul, ol, dl / 목록의 자식 요소 규칙 / 서브 메뉴 구조 / 키보드로도 열리는 메뉴

08. 표를 만드는 테이블 요소

- 기본 표 / thead, tbody, tfoot / th와 scope / caption / colspan·rowspan / 레이아웃용 표를 쓰지 않는 이유

09. 앵커(Anchor)의 표현

- 절대 경로와 상대 경로 / 폴더 구조 실습 / target과 rel / 다운로드·메일·전화 링크 / 내부 링크와 본문 바로가기 / 좋은 링크 텍스트

10. 이미지와 관련된 요소들

- img와 alt / 상황별 대체 텍스트 작성법 / width·height / 이미지 맵 / picture와 반응형 이미지

11. 폼 요소의 종류

- label과 input / input type 총정리 / form, get과 post / fieldset, legend / select, radio, checkbox, textarea, file / HTML5 입력 유형 / 입력 오류 안내

12. 오디오와 비디오 활용

- 비디오·오디오 형식 / video와 audio / 자동 재생과 접근성 / 자막(track)과 대본 / 유튜브·비메오 삽입(iframe)

13. 종합 실습과 웹접근성 마무리

- 웹접근성이란(WCAG 4원칙, KWCAG) / 장별 접근성 총정리 / 종합 실습 페이지 / 접근성 점검 방법 / inert 속성 / AI 시대에도 HTML을 알아야 하는 이유 / 다음 단계

부록

A. 참고 사이트와 도구

B. HTML 태그 치트시트

C. 자주 하는 실수 모음 (30선)

D. 확인 문제 정답과 해설

E. 유튜브 재생목록 영상 색인

F. 웹표준·웹접근성 체크리스트

────────────────────────────────────────

■ 책의 구성 한눈에 보기

· 분량: 본문과 부록을 합쳐 152쪽 (A4 기준)

· 구성: 13개 장 + 부록 6종

· 예제: 실행·검증한 예제 40여 개와 결과 화면

· 확인 문제: 총 55문항 (정답·해설 수록)

· 연계 영상: 저자 유튜브 40편의 주소를 장별로 정리

· 형식: PDF 전자책, DOCX (링크 클릭 가능, 목차에서 해당 쪽으로 이동 가능)

────────────────────────────────────────

■ 맛보기: 이런 내용이 들어 있습니다

[ 같은 모양, 다른 의미 ]

b와 strong은 화면에서 똑같이 굵게 보입니다. 그런데 왜 strong을 써야 할까요? 스크린 리더는 strong을 "중요한 내용"으로 받아들여 읽는 방식을 바꿔 줄 수 있고, b는 단순한 시각 효과일 뿐이기 때문입니다. 책에서는 이런 차이를 표와 예제로 정리합니다.

[ 흔한 실수 ]

p 태그로 만든 "클릭 가능한" 요소는 키보드로 접근할 수 없고 스크린 리더도 버튼이라고 알려 주지 못합니다. 올바른 대안은 button입니다. 구조(HTML), 표현(CSS), 동작(JavaScript)을 분리해 같은 기능을 접근성 있게 다시 만드는 과정을 1장에서 보여 드립니다.

[ 이미지의 alt는 설명이 아니라 "역할" ]

로고에 홈 링크가 걸려 있다면 alt는 "로고 이미지"가 아니라 "ABC 홈으로 이동"이어야 합니다. 정보 이미지, 링크 이미지, 장식 이미지, 텍스트가 들어간 이미지 각각의 대체 텍스트 작성법을 비교표로 정리했습니다.

[ 폼은 보이는 label부터 ]

placeholder는 label이 아닙니다. 입력을 시작하면 사라지고, 대비가 낮고, 보조 기기에서 지원이 불안정하기 때문입니다. 폼 하나를 만드는 데 label 연결, fieldset/legend, required, autocomplete, 오류 메시지 연결까지 어떤 순서로 접근성을 쌓아 가는지 단계별로 보여 드립니다.

[ 영상과 소리는 조심스럽게 ]

소리가 나는 영상을 자동 재생하면 스크린 리더 음성과 겹쳐 시각장애인이 페이지 내용을 들을 수 없게 됩니다. autoplay와 muted, controls, 자막과 대본을 어떻게 함께 써야 하는지 알려 드립니다.

────────────────────────────────────────

■ 이런 분께 추천합니다

· HTML을 처음 배우는 입문자, 비전공자, 취업 준비생

· 독학했지만 태그를 "모양"으로만 써 와서 의미 있는 마크업을 익히고 싶은 분

· 웹접근성·웹표준 준수가 필요한 프로젝트를 앞둔 퍼블리셔, 신입 개발자

· 개발자와 소통해야 하는 웹 기획자, 디자이너

· AI로 웹 페이지를 만들고 있지만 결과물을 검수할 기준이 필요한 분

· 오래된 책과 블로그로 배운 내용을 최신 기준으로 점검하고 싶은 분

· CSS, JavaScript를 배우기 전에 탄탄한 기초를 다지고 싶은 분

■ 이런 분께는 맞지 않을 수 있어요

· 이미 실무에서 접근성 인증 심사를 수행하는 전문가 (이 책은 기초·입문 단계입니다)

· CSS 디자인이나 JavaScript 개발 방법이 필요한 분 (이 책은 HTML 구조와 의미에 집중합니다. CSS와 JavaScript는 후속 학습을 권해 드립니다)

· 서버 프로그램(PHP, JSP 등)과 연동하는 폼 처리를 배우려는 분 (폼은 HTML 마크업 관점까지 다룹니다)

────────────────────────────────────────

■ 학습 방법 제안

저자는 코딩 공부는 눈으로 하는 것이 아니라 손가락으로 하는 것이라고 생각합니다. 코드를 복사하지 말고, 아주 사소한 코드라도 한 타 한 타 직접 입력해서 결과를 확인해 보세요. 백문이 불여일타입니다.

■ 준비물

· 코드 편집기: Visual Studio Code (무료)

· 브라우저: 크롬 (엣지, 파이어폭스, 사파리도 가능)

· VS Code 확장: Live Server (저장하면 자동 새로고침)

· 별도의 유료 프로그램이나 샘플 파일은 필요 없습니다.

────────────────────────────────────────

■ 저자 소개

김동주 (ezweb)

15년 이상 웹 실무를 해 왔고, 학원과 교육 현장에서 취업 준비생과 재직자에게 HTML·CSS·JavaScript를 가르쳐 왔습니다. 유튜브 채널 Ezweb에서 "Back to Basic" HTML 시리즈를 비롯한 웹 강의를 운영하고 있습니다. 어려운 내용을 핵심만 쉽게 정리하고, 수강생들이 자주 실수하는 지점을 짚어 주는 설명 방식으로 많은 분들께 도움을 드리고자 합니다.

[ 저서 ]

· 2021.07.19 출간 | 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 (비제이퍼블릭)

· 2022.08.25 출간 | 코딩을 처음이라 with 웹 퍼블리싱 (영진출판사)

· 2023.10 출간 | 2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 (시대고시기획)

· 2024.11 재판 | 2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 (시대고시기획)

· 2025.11 재판 | 2026 SD에듀 유선배 웹디자인기능사 실기 과외노트 (시대고시기획)

────────────────────────────────────────

■ 구매 전 꼭 확인해 주세요

· 본 상품은 PDF 형식의 전자책이며, 결제 후 즉시 내려받을 수 있는 디지털 콘텐츠입니다.

· 책의 예제 코드는 학습 및 상업적 프로젝트에서 자유롭게 사용할 수 있습니다.

· 본문에 소개된 외부 사이트와 서비스의 주소, 화면은 시간이 지나면 변경될 수 있습니다.

· 디지털 콘텐츠의 특성상 열람 또는 다운로드 이후의 환불은 각 플랫폼(크몽, 클래스101, 인프런 등)의 정책에 따릅니다. 구매 전 상품 설명과 목차, 맛보기 내용을 충분히 확인해 주세요.

────────────────────────────────────────

■ 마지막으로

웹은 모든 사람을 위한 공간입니다. 장애의 유무, 사용하는 기기, 주변 환경과 상관없이 누구나 정보에 접근할 수 있어야 합니다. 그 출발점은 거창한 기술이 아니라 올바른 HTML 한 줄입니다.

AI가 코드를 대신 써 주는 시대에도, 아니 바로 그런 시대일수록, "이 내용에는 어떤 태그가 가장 알맞은가"를 스스로 판단하는 힘은 가장 값진 기본기입니다. 이 책이 여러분이 제대로 된 웹을 만들어 가는 든든한 길잡이가 되기를 바랍니다.

지금 바로 첫 장을 열고, 첫 번째 HTML 문서를 직접 만들어 보세요.

#HTML #HTML5 #웹표준 #웹접근성 #시맨틱마크업 #퍼블리싱 #프론트엔드입문 #바이브코딩 #WCAG #웹퍼블리셔