최근 글
HTML 강좌 / 입력값 검증: required, 길이·범위 제한, 오류 안내
required, minlength, min, max 등의 기본 입력 제약을 설정하고 오류를 안내·시험하는 방법과 서버 검증의 필요성을 설명합니다.
HTML 강좌 / form의 구조와 GET·POST 제출 방식
form의 action·method·name을 구분하고 GET과 POST의 요청 차이를 설명합니다. 서버 전송 없이 FormData로 제출 항목을 관찰하고 비활성·읽기 전용 필드도 비교합니다.
HTML 강좌 / label과 input으로 입력 필드 만들기
label의 for와 input의 id를 연결하는 방법, name의 제출 역할, placeholder가 레이블을 대신할 수 없는 이유를 설명합니다.
HTML 강좌 / input 유형 선택하기: 이메일·숫자·날짜·체크박스·라디오
입력 목적에 맞는 email·number·date·checkbox·radio를 선택하는 기준을 설명합니다. 하나의 양식에서 날짜 형식, 필수 그룹, 미선택 항목의 제출값을 비교합니다.
CSS 강좌 / 배경색과 배경 이미지 설정하기
실습용 이미지를 내려받아 배경색과 배경 이미지 경로를 설정합니다. cover·contain의 잘림과 빈 공간, 반복과 위치를 비교하고 배경이 안 보일 때의 확인 순서를 설명합니다.
CSS 강좌 / 문단과 목록의 간격, 정렬, 목록 표시 설정하기
문단 안의 줄 간격, 문단 사이 여백, 첫 줄 들여쓰기를 구분합니다. 긴 목록을 이용해 outside·inside 표시 위치와 항목 간격을 비교하고 정렬 문제를 확인할 수 있습니다.
CSS 강좌 / 글꼴, 글자 크기, 굵기, 줄 간격 설정하기
글꼴·글자 크기·굵기·줄 간격을 설정하고 실제 사용된 글꼴을 확인하는 방법을 설명합니다. 단위 없는 line-height와 em 값의 상속 차이를 실행 가능한 예제로 비교합니다.
CSS 강좌 / 색상 값과 px·em·rem·% 단위 이해하기
색상 표기와 px·em·rem·%의 계산 기준을 비교합니다. 중첩된 글자 크기와 여백이 있는 상자 예제로 실제 크기를 계산하고 개발자 도구에서 확인할 수 있습니다.
HTML 강좌 / 읽기 쉬운 표 만들기: caption, th, scope, 셀 병합
caption과 제목 셀의 scope로 표의 관계를 분명히 하고, colspan·rowspan으로 셀을 병합할 때 주의할 점을 설명합니다.
HTML 강좌 / figure와 figcaption으로 그림과 설명 묶기
figure와 figcaption으로 이미지와 설명을 묶고, alt와 캡션의 역할을 구분하는 방법을 예제로 설명합니다.