AD JB Toolbox 01

최근 글

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

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

HTML 검사 도구로 문법 오류를 찾고 수정한 뒤 링크, 키보드 조작, 모바일 표시까지 확인하는 절차를 안내합니다.

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

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

홈·소개·문의 페이지를 연결하는 작은 사이트를 만들고 메뉴, 양식, 키보드 조작과 문서 오류를 점검하는 종합 실습입니다.

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

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

제목 구조, 의미 있는 링크 문구, 이미지 대체 텍스트와 키보드 조작을 점검하는 HTML 접근성의 기본을 정리합니다.

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

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

title, meta description, html lang, UTF-8 문자 인코딩, viewport의 역할을 완성된 HTML 문서 예제로 설명합니다.

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

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

오디오·비디오 파일과 외부 콘텐츠를 HTML에 삽입할 때 필요한 기본 코드, 자막, 파일 경로, 접근성 확인 사항을 설명합니다.

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

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

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

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

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

fieldset과 legend로 관련 입력을 묶고, autocomplete 토큰으로 필드의 입력 목적을 알리는 방법을 설명합니다.

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

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

여러 줄 입력, 선택 목록, 양식 버튼을 만드는 요소의 역할과 값이 제출되는 방식을 예제로 설명합니다.

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

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

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

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

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

form, action, method, name의 역할을 이해하고 GET과 POST 방식으로 양식 값이 전달되는 차이를 설명합니다.