카테고리: HTML

HTML 강좌 / label과 input으로 입력 필드 만들기

label의 for와 input의 id를 연결하는 방법, name의 제출 역할, placeholder가 레이블을 대신할 수 없는 이유를 설명합니다.

HTML 강좌 / input 유형 선택하기: 이메일·숫자·날짜·체크박스·라디오

입력 목적에 맞는 input type을 고르고 체크박스와 라디오 버튼의 선택·제출 동작을 구분하는 방법을 설명합니다.

HTML 강좌 / 읽기 쉬운 표 만들기: caption, th, scope, 셀 병합

caption과 제목 셀의 scope로 표의 관계를 분명히 하고, colspan·rowspan으로 셀을 병합할 때 주의할 점을 설명합니다.

HTML 강좌 / figure와 figcaption으로 그림과 설명 묶기

figure와 figcaption으로 이미지와 설명을 묶고, alt와 캡션의 역할을 구분하는 방법을 예제로 설명합니다.

HTML 강좌 / div와 span은 언제 사용할까?

div와 span의 차이와 사용 기준을 설명하고, 의미 요소가 없는 경우에만 묶음 요소를 쓰는 예제를 보여 줍니다.

HTML 강좌 / 시맨틱 요소로 페이지 영역 나누기

header, nav, main, section, article, aside, footer의 역할을 구분하고 간단한 페이지를 의미에 맞게 구성하는 방법을 설명합니다.

HTML 강좌 / 반응형 이미지: srcset, sizes, picture

HTML의 srcset과 sizes로 화면에 맞는 이미지 파일을 선택하고, picture로 좁은 화면의 이미지 구도를 바꾸는 방법을 실제 파일 예제로 설명합니다.

HTML 강좌 / 이미지 넣기: img, alt, 크기

HTML img 요소로 이미지를 넣고 alt 대체 텍스트와 width·height를 설정하는 방법을 설명합니다. 실제 예제 이미지로 경로와 크기 문제도 확인할 수 있습니다.

HTML 강좌 / 텍스트에 의미 부여하기

HTML의 em, strong, q, blockquote, abbr, code, kbd를 상황에 맞게 쓰는 방법을 예제로 설명합니다. 글자의 모양이 아니라 텍스트의 의미를 표시하는 기준을 익힐 수 있습니다.

HTML 강좌 / HTML 문서의 기본 구조

HTML 문서를 이루는 doctype, html, head, body의 역할과 기본 작성 순서를 예제로 설명합니다. 문서 정보와 페이지 본문을 구분하고 첫 HTML 파일을 직접 만들어 볼 수 있습니다.