최근 글

같은 웹페이지의 구조만 있는 모습과 CSS로 스타일을 적용한 모습을 나란히 보여 주는 일러스트

CSS 강좌 / CSS란 무엇이고 HTML과 어떻게 다를까?

HTML과 CSS의 역할을 구분하고, 같은 작은 정원 문서에 색상·배경·여백을 적용합니다. 실행 가능한 예제와 세 가지 변형 실습으로 스타일이 바뀌는 범위를 확인할 수 있습니다.

중앙 데이터 블록과 연결된 화면 구성 요소, 커서로 개별 요소를 선택하는 화면을 나란히 표현한 일러스트

React란? 핵심 개념과 jQuery의 차이점

컴포넌트·JSX·props·state로 React의 작동 방식을 이해하고 jQuery와 화면 갱신 방식을 비교합니다. 같은 카운터 예제와 도입 조건을 통해 작업에 맞는 선택 기준을 살펴봅니다.

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

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 동작을 확인합니다.