카테고리: HTML Reference

문장 흐름 안의 짧은 인용 구간을 표현한 일러스트

HTML q 태그: 짧은 인용·cite 출처와 인용 부호 사용법

q의 짧은 인용과 blockquote·cite의 역할을 구분합니다. 출처 링크와 중첩 인용을 전체 예제로 확인하고, 자동 인용 부호를 중복하지 않는 방법을 설명합니다.

일정한 간격과 줄 맞춤을 유지하는 내용 블록을 표현한 일러스트

HTML pre 태그: 공백·줄바꿈 보존과 자동 줄바꿈 방법

pre와 일반 문단의 공백 처리 차이를 비교하고, 긴 코드에 가로 스크롤이나 자동 줄바꿈을 적용합니다. HTML 소스 이스케이프와 code 요소의 역할도 예제로 설명합니다.

사진과 설명 띠가 하나의 프레임 안에 묶인 일러스트

HTML figure·figcaption 태그: 그림과 캡션 묶는 방법

figure로 독립된 자료를 묶고 figcaption을 앞이나 뒤에 배치하는 방법을 전체 예제로 비교합니다. 캡션과 이미지 대체 텍스트의 역할, 반응형 크기 조절도 함께 설명합니다.

비활성 스크립트 화면 옆에 대체 안내가 표시되는 일러스트

HTML noscript 태그: JavaScript 비활성화 시 대체 콘텐츠 표시

noscript의 표시 조건과 JavaScript 실행 오류의 차이를 전체 예제로 비교합니다. 스크립트 사용 여부와 관계없이 핵심 안내를 제공하는 구조, body와 head의 사용 조건도 설명합니다.

선택 메뉴와 여러 선택 항목을 표현한 일러스트

HTML select 태그: 드롭다운·복수 선택과 전송 값 확인

select·option의 name과 value, 필수 선택과 복수 선택을 실제 양식으로 비교합니다. disabled 항목의 제외, selected 초기값과 reset, 여러 선택 값을 읽는 방법도 설명합니다.

설명 항목과 입력 컨트롤을 연결한 일러스트

HTML label 태그: for·id 연결과 클릭 영역 넓히기

for·id 연결과 label로 입력 요소를 감싸는 방식을 전체 예제로 비교합니다. 클릭·키보드 동작, placeholder와의 차이, 중복 id와 연결 오류를 확인하는 방법도 설명합니다.

일부가 채워진 진행 막대와 로딩 상태를 표현한 일러스트

HTML progress 태그: 진행률 표시와 미정 상태 전환 방법

progress의 value·max 계산과 미정 상태의 차이를 설명합니다. 버튼으로 진행률을 바꾸는 전체 예제와 작업 이름·상태 문장을 제공하는 방법을 확인합니다.

한 항목만 선택된 원형 라디오 버튼 그룹 일러스트

HTML 라디오 버튼: name 그룹·checked·필수 선택과 전송 값

같은 name으로 라디오 버튼을 묶고 선택 값을 확인하는 전체 예제를 제공합니다. required·checked, 미선택 시 제출 누락, 초기화와 선택 해제의 차이도 설명합니다.

여러 항목을 동시에 선택한 체크박스 그룹 일러스트

HTML 체크박스: 복수 선택·checked·미선택 전송 처리

체크박스의 복수 선택과 제출 누락, disabled·required·checked를 실제 양식으로 확인합니다. 부분 선택 표시와 서버의 배열 처리 규칙도 구분합니다.

입력 양식에서 서버로 값이 전달되는 과정을 표현한 일러스트

HTML form 태그: action·GET·POST와 입력 값 전송 방법

action·method·name의 역할과 GET·POST의 차이를 실행 가능한 두 파일 예제로 설명합니다. 서버 입력 검증과 출력 이스케이프, 파일 업로드 인코딩과 제출 오류 확인 방법도 다룹니다.