카테고리: HTML

웹 문서를 돋보기와 점검표로 살펴보는 일러스트

HTML 강좌 / HTML 오류 찾기와 문서 검사하기

Nu HTML Checker로 오류를 찾고 실제 브라우저 동작과 나누어 확인하는 방법을 설명합니다. 중복 ID가 있는 전체 문서와 수정 문서로 레이블 연결을 비교합니다.

세 개의 웹페이지가 링크로 연결된 작은 사이트 일러스트

HTML 강좌 / 여러 페이지로 된 작은 사이트 만들기

홈·소개·문의 페이지를 같은 폴더에 만들고 공통 메뉴와 페이지별 문서 정보를 구성합니다. 실제 문의 수신 기능과 입력 실습을 구분하며 링크·검증·키보드 완료 기준을 점검합니다.

키보드 초점이 표시된 웹페이지와 휠체어 사용자 일러스트

HTML 강좌 / HTML 접근성 기본: 제목·링크·이미지·키보드

제목·링크·이미지·양식의 의미와 키보드 조작을 점검하는 방법을 설명합니다. 본문 건너뛰기와 초점 표시가 있는 작은 페이지로 수동 검사를 연습합니다.

탭 제목과 본문 설명 영역을 갖춘 웹 문서 일러스트

HTML 강좌 / 문서 제목·설명·언어·문자 인코딩 설정하기

html의 lang과 head의 title·meta를 올바른 위치에 작성하는 방법을 설명합니다. 설정별 역할과 확인 방법을 비교하고 UTF-8 저장·응답 헤더 문제를 점검합니다.

오디오 파형과 빈 비디오 화면을 나란히 놓은 일러스트

HTML 강좌 / audio, video, iframe으로 미디어와 외부 콘텐츠 삽입하기

audio·video·iframe과 자막·대체 링크의 역할을 설명합니다. 비율을 유지하는 반응형 코드와 로컬 iframe 실습으로 파일 경로와 모바일 표시를 확인합니다.

닫힌 항목과 펼쳐진 항목이 쌓여 있는 일러스트

HTML 강좌 / details와 summary로 펼침 콘텐츠 만들기

details와 summary로 클릭하거나 키보드로 펼치는 콘텐츠를 만들고 open 속성과 사용 시 주의점을 설명합니다.

제목 탭이 있는 두 입력 필드 그룹 일러스트

HTML 강좌 / fieldset, legend, autocomplete로 양식 설명하기

fieldset·legend와 서로 다른 name으로 질문을 구분하고 autocomplete로 입력 목적을 알리는 방법을 설명합니다. 두 라디오 그룹 실습과 자주 쓰는 자동완성 토큰도 비교합니다.

여러 줄 입력창, 선택 목록, 버튼이 있는 양식 일러스트

HTML 강좌 / textarea, select, option, button 사용하기

textarea·select·option·button의 값과 동작을 구분합니다. 전체 양식 실습으로 필수 선택, 화면 문구와 제출값, 초기값으로 되돌아가는 reset 동작을 확인합니다.

오류와 정상 상태를 다른 테두리 색으로 나타낸 입력 필드 일러스트

HTML 강좌 / 입력값 검증: required, 길이·범위 제한, 오류 안내

required, minlength, min, max 등의 기본 입력 제약을 설정하고 오류를 안내·시험하는 방법과 서버 검증의 필요성을 설명합니다.

입력칸과 제출 버튼이 있는 웹 양식 일러스트

HTML 강좌 / form의 구조와 GET·POST 제출 방식

form의 action·method·name을 구분하고 GET과 POST의 요청 차이를 설명합니다. 서버 전송 없이 FormData로 제출 항목을 관찰하고 비활성·읽기 전용 필드도 비교합니다.