기본 개념
태그
Tag
<header>...</header>뜻
브라우저에게 어떤 종류의 요소를 만들지 알려주는 꺾쇠괄호 안의 마크업 이름입니다.
대상 지정 방법
모든 버튼이나 모든 링크처럼 넓은 요소 종류를 지칭할 때 태그명을 사용합니다.
마크업
<header>...</header>요청 예시
헤더 안의 모든 button 태그 스타일을 수정해줘.
프로그래밍
페이지 수정을 위한 HTML 구조 용어
태그, 요소, 속성, 페이지 영역, 폼 컨트롤, 접근성 라벨처럼 웹사이트 수정을 요청할 때 대상을 정확히 지칭하기 위한 HTML 용어 참고 자료입니다.
51 개 항목
기본 개념
요소
Element
<button>Menu</button>뜻
시작 태그, 내용, 닫는 태그로 이루어진 HTML의 한 덩어리입니다.
대상 지정 방법
제목, 카드, 버튼처럼 화면의 한 부분을 말할 때 요소라고 부르면 됩니다.
마크업
<button>Menu</button>요청 예시
언어 변경 요소를 메뉴 버튼 옆으로 이동해줘.
기본 개념
속성
Attribute
<a href="/ko">Home</a>뜻
시작 태그 안에 적는 추가 정보입니다. href, class, id, src, aria-label 등이 여기에 해당합니다.
대상 지정 방법
같은 태그가 여러 개 있을 때 특정 class, id, label을 가진 요소만 지칭하는 데 유용합니다.
마크업
<a href="/ko">Home</a>요청 예시
아이콘만 있는 메뉴 버튼에 aria-label 속성을 추가해줘.
기본 개념
시작 태그와 닫는 태그
Opening and closing tag
<section>Content</section>뜻
많은 요소는 시작 태그로 열리고 짝이 맞는 닫는 태그로 끝납니다.
대상 지정 방법
마크업에서 특정 영역이 어디서 시작하고 끝나는지 설명할 때 도움이 됩니다.
주의
닫는 태그가 빠지면 뒤쪽 내용이 잘못된 요소 안에 들어간 것처럼 처리될 수 있습니다.
마크업
<section>Content</section>요청 예시
카드 섹션의 시작 태그와 닫는 태그가 제대로 맞는지 확인해줘.
문서 구조
문서 타입 선언
DOCTYPE
<!doctype html>뜻
브라우저에게 이 문서를 최신 HTML 방식으로 해석하라고 알려주는 선언입니다.
대상 지정 방법
대부분 프레임워크가 처리하므로 일반 컴포넌트 수정에서는 거의 직접 바꾸지 않습니다.
마크업
<!doctype html>요청 예시
문서 타입 선언은 건드리지 말고 페이지 컴포넌트만 수정해줘.
문서 구조
html 루트
html
<html lang="ko">...</html>뜻
HTML 문서 전체를 감싸는 최상위 요소입니다.
대상 지정 방법
html 요소는 언어 설정이나 테마 속성처럼 문서 전체 설정에 쓰입니다.
마크업
<html lang="ko">...</html>요청 예시
각 언어 페이지마다 html lang 속성이 올바르게 들어가게 해줘.
문서 구조
head 영역
head
<head><title>...</title></head>뜻
메타데이터, 제목, 아이콘, SEO 태그처럼 화면 본문에 직접 보이지 않는 문서 정보를 담는 영역입니다.
대상 지정 방법
SEO 제목, 설명, canonical URL, 메타데이터를 바꿀 때 이 용어를 사용합니다.
마크업
<head><title>...</title></head>요청 예시
HTML 구조 용어 페이지의 메타데이터 제목을 수정해줘.
문서 구조
body 영역
body
<body>Visible page</body>뜻
사용자가 실제 화면에서 보는 페이지 콘텐츠가 들어가는 문서 영역입니다.
대상 지정 방법
대부분의 레이아웃, 헤더, 메뉴, 도구 수정은 body 안에서 이루어집니다.
마크업
<body>Visible page</body>요청 예시
라이트모드와 다크모드에서 body 배경이 일관되게 보이게 해줘.
문서 구조
문서 제목
title
<title>Engineering Tools for AI</title>뜻
브라우저 탭에 보이고 검색엔진에도 사용되는 페이지 제목입니다.
대상 지정 방법
화면의 H1은 그대로 두고 브라우저/SEO 제목만 바꿔야 할 때 사용합니다.
마크업
<title>Engineering Tools for AI</title>요청 예시
화면에 보이는 제목은 그대로 두고 브라우저 제목만 더 구체적으로 바꿔줘.
문서 구조
메타 태그
meta
<meta name="description" content="...">뜻
페이지 설명, 뷰포트, 문자 인코딩, 소셜 미리보기 정보를 담는 메타데이터 태그입니다.
대상 지정 방법
메타 설명은 화면 본문이 아니라 검색 결과나 공유 미리보기에 영향을 줍니다.
마크업
<meta name="description" content="...">요청 예시
검색 가능한 HTML 용어 페이지라는 점이 드러나도록 meta description을 수정해줘.
페이지 영역
헤더
header
<header>...</header>뜻
페이지나 섹션의 소개 영역 또는 상단 네비게이션을 담는 시맨틱 영역입니다.
대상 지정 방법
사이트 제목, 상단 네비게이션, 테마 버튼, 언어 버튼, 메뉴 버튼을 지칭할 때 사용합니다.
마크업
<header>...</header>요청 예시
언어 변경 버튼을 헤더 컨트롤 안에서 메뉴 버튼 옆으로 이동해줘.
페이지 영역
네비게이션
nav
<nav>...</nav>뜻
주요 이동 링크를 담는 시맨틱 영역입니다.
대상 지정 방법
카테고리 링크, 메뉴 그룹, 페이지 이동 링크를 수정할 때 사용합니다.
마크업
<nav>...</nav>요청 예시
nav 안의 메뉴 링크를 변환기, 수학, 프로그래밍으로 나눠줘.
페이지 영역
메인
main
<main>...</main>뜻
페이지의 핵심 본문 영역입니다. 일반적으로 한 페이지에는 main 요소가 하나 있는 것이 좋습니다.
대상 지정 방법
헤더, 푸터, 메뉴가 아닌 페이지 본문을 지칭할 때 사용합니다.
마크업
<main>...</main>요청 예시
떠 있는 메뉴가 main 콘텐츠를 아래로 밀지 않고 위에 겹쳐 보이게 해줘.
페이지 영역
섹션
section
<section>...</section>뜻
관련된 콘텐츠를 묶는 주제별 영역입니다. 보통 제목과 함께 쓰입니다.
대상 지정 방법
히어로, 도구 목록, 참고 콘텐츠처럼 큰 페이지 블록을 지칭할 때 사용합니다.
마크업
<section>...</section>요청 예시
모바일에서 도구 섹션의 위아래 여백을 줄여줘.
페이지 영역
아티클
article
<article>...</article>뜻
카드, 글, 참고 항목, 결과처럼 독립적으로 볼 수 있는 콘텐츠 단위입니다.
대상 지정 방법
반복되는 각 카드가 제목과 본문을 가진 독립 항목일 때 사용합니다.
마크업
<article>...</article>요청 예시
각 용어 article을 데스크탑에서 더 촘촘하게 만들어줘.
페이지 영역
보조 영역
aside
<aside>...</aside>뜻
본문과 관련된 보조 콘텐츠를 담는 영역입니다. 사이드바나 참고 메모에 자주 쓰입니다.
대상 지정 방법
필터 패널, 측면 네비게이션, 참고 메모의 위치를 바꿀 때 사용합니다.
마크업
<aside>...</aside>요청 예시
모바일에서는 aside를 main 콘텐츠 아래로 내려줘.
페이지 영역
푸터
footer
<footer>...</footer>뜻
법적 링크, 보조 네비게이션, 연락처, 마무리 정보를 담는 하단 영역입니다.
대상 지정 방법
섹션 내부의 하단이 아니라 페이지 전체의 하단을 지칭할 때 사용합니다.
마크업
<footer>...</footer>요청 예시
푸터에 작은 법적 링크 묶음을 추가해줘.
콘텐츠
제목 태그
Heading
<h1>Page title</h1>뜻
h1부터 h6까지 있는 제목 요소로, 페이지 콘텐츠의 구조를 만듭니다.
대상 지정 방법
단순 글자 크기가 아니라 문서 구조상 제목 단계까지 바꿔야 할 때 사용합니다.
주의
크기 때문에 h1/h2를 고르기보다는, 시각적 크기는 CSS로 조정하고 heading은 문서 구조에 맞춰야 합니다.
마크업
<h1>Page title</h1>요청 예시
페이지 제목은 h1으로 유지하고 카드 제목은 h2 또는 h3로 정리해줘.
콘텐츠
문단
p
<p>Description text.</p>뜻
본문 설명이나 문장을 담는 문단 요소입니다.
대상 지정 방법
설명 본문이나 문단 간격을 바꿀 때 사용합니다.
마크업
<p>Description text.</p>요청 예시
히어로 제목 아래 문단을 더 짧게 줄여줘.
콘텐츠
링크
a
<a href="/ko/tools/math-prompt">Start</a>뜻
다른 페이지, 경로, 파일, 위치로 이동하는 링크 요소입니다.
대상 지정 방법
현재 화면에서 동작을 실행하는 버튼이 아니라 다른 곳으로 이동하는 요소일 때 링크라고 부릅니다.
마크업
<a href="/ko/tools/math-prompt">Start</a>요청 예시
도구 둘러보기 링크를 누르면 도구 섹션으로 이동하게 해줘.
콘텐츠
목록
List
<ul><li>Item</li></ul>뜻
관련 항목을 묶는 구조입니다. 순서가 없으면 ul, 순서가 있으면 ol을 사용합니다.
대상 지정 방법
반복되는 텍스트 항목을 추가, 제거, 정렬, 그룹화할 때 사용합니다.
마크업
<ul><li>Item</li></ul>요청 예시
메뉴 항목들을 카테고리별 목록으로 묶어줘.
콘텐츠
표
table
<table><tr><td>Cell</td></tr></table>뜻
행과 셀로 이루어진 표 형식 데이터 구조입니다.
대상 지정 방법
카드 배치처럼 보이는 grid가 아니라 실제 행/열 데이터일 때 table을 사용합니다.
마크업
<table><tr><td>Cell</td></tr></table>요청 예시
진리표 데이터는 일반 div 블록이 아니라 table로 구성해줘.
콘텐츠
코드 블록
code / pre
<pre><code>npm run build</code></pre>뜻
code는 코드 텍스트를 표시하고, pre는 여러 줄 코드의 줄바꿈과 공백을 유지합니다.
대상 지정 방법
명령어나 예시가 정확한 공백과 줄바꿈을 유지해야 할 때 코드 블록을 사용합니다.
마크업
<pre><code>npm run build</code></pre>요청 예시
터미널 명령어는 pre/code 블록으로 보여줘.
콘텐츠
강조 텍스트
strong / em
<strong>Important</strong>뜻
의미를 가진 강조 요소입니다. strong은 중요함, em은 강조해서 읽는 의미를 가집니다.
대상 지정 방법
단순 장식용 굵기/기울임이 아니라 의미 있는 강조에 사용합니다.
마크업
<strong>Important</strong>요청 예시
주의 문장 안의 중요한 표현은 strong으로 표시해줘.
이미지와 미디어
이미지
img
<img src="/hero.png" alt="Tool preview">뜻
이미지 파일을 화면에 표시하는 요소입니다.
대상 지정 방법
이미지를 교체, 크기 조정, 자르기, alt 추가할 때 사용합니다.
마크업
<img src="/hero.png" alt="Tool preview">요청 예시
히어로 이미지에 명확한 alt 속성을 추가해줘.
이미지와 미디어
대체 텍스트
alt
<img alt="Menu panel open">뜻
스크린리더가 이미지를 설명하거나 이미지가 로드되지 않을 때 보여주는 텍스트입니다.
대상 지정 방법
이미지 접근성이나 의미 전달을 개선할 때 alt를 지칭합니다.
주의
장식용 이미지는 빈 alt를 쓸 수 있지만, 의미 있는 이미지는 유용한 설명이 필요합니다.
마크업
<img alt="Menu panel open">요청 예시
스크린샷이 무엇을 보여주는지 설명하는 alt 텍스트를 추가해줘.
이미지와 미디어
SVG
svg
<svg>...</svg>뜻
아이콘, 다이어그램, 확대해도 선명한 도형에 쓰이는 벡터 그래픽 요소입니다.
대상 지정 방법
단순한 도형이나 아이콘처럼 확대해도 선명해야 하는 시각 요소를 말할 때 사용합니다.
마크업
<svg>...</svg>요청 예시
아이콘 라이브러리가 없다면 메뉴 버튼에는 SVG 아이콘을 사용해줘.
폼과 컨트롤
버튼
button
<button type="button">Menu</button>뜻
클릭하거나 탭했을 때 동작을 실행하는 컨트롤입니다.
대상 지정 방법
UI 상태를 바꾸거나 메뉴를 열거나 폼을 제출하거나 동작을 실행하는 요소를 지칭할 때 사용합니다.
주의
다른 페이지로 이동하는 목적이라면 보통 button보다 link가 더 적절합니다.
마크업
<button type="button">Menu</button>요청 예시
메뉴 버튼을 누르면 메뉴가 열리기 전에 언어 드롭다운이 닫히게 해줘.
폼과 컨트롤
폼
form
<form>...</form>뜻
사용자 입력을 모으고 제출하기 위한 컨트롤 묶음입니다.
대상 지정 방법
입력창들이 하나의 제출이나 입력 흐름에 속할 때 form이라고 부릅니다.
마크업
<form>...</form>요청 예시
검색창과 카테고리 컨트롤을 하나의 폼 같은 컨트롤 영역으로 묶어줘.
폼과 컨트롤
라벨
label
<label for="search">Search</label>뜻
입력 컨트롤의 이름을 알려주는 텍스트입니다.
대상 지정 방법
입력창에 화면상 이름이나 스크린리더용 이름이 필요할 때 사용합니다.
마크업
<label for="search">Search</label>요청 예시
UI를 복잡하게 만들지 않으면서 검색창에 라벨을 추가해줘.
폼과 컨트롤
입력창
input
<input type="search" placeholder="Search">뜻
사용자가 값을 입력하거나 선택하는 필드입니다.
대상 지정 방법
검색창, 텍스트 필드, 숫자 입력, 체크박스 같은 단일 컨트롤을 지칭할 때 사용합니다.
마크업
<input type="search" placeholder="Search">요청 예시
모바일에서 검색 input을 전체 폭으로 만들어줘.
폼과 컨트롤
선택 박스
select
<select><option>English</option></select>뜻
목록에서 하나의 옵션을 선택하는 기본 드롭다운 컨트롤입니다.
대상 지정 방법
커스텀 메뉴 패널이 아니라 기본 폼 드롭다운 컨트롤일 때 select라고 부릅니다.
마크업
<select><option>English</option></select>요청 예시
다크모드에서 선택된 언어 option이 읽히도록 select 스타일을 수정해줘.
폼과 컨트롤
여러 줄 입력창
textarea
<textarea>Long text</textarea>뜻
여러 줄의 텍스트를 입력하는 필드입니다.
대상 지정 방법
사용자가 긴 텍스트를 붙여넣거나 편집해야 할 때 textarea를 사용합니다.
마크업
<textarea>Long text</textarea>요청 예시
긴 프롬프트 입력을 위해 textarea 높이를 늘려줘.
속성
클래스
class
<button class="icon-button">...</button>뜻
스타일이나 동작을 적용하기 위해 요소를 묶는 속성입니다.
대상 지정 방법
반복되는 UI 패턴을 지칭할 때 class가 가장 실용적인 기준이 되는 경우가 많습니다.
마크업
<button class="icon-button">...</button>요청 예시
모든 메뉴 카테고리 토글 버튼에 같은 class를 적용해줘.
속성
ID
id
<section id="tools">...</section>뜻
한 페이지 안에서 하나의 요소를 고유하게 식별하는 속성입니다.
대상 지정 방법
특정 섹션으로 이동하거나 label을 input과 연결해야 할 때 id를 사용합니다.
주의
같은 id를 한 페이지에서 여러 요소에 반복해서 쓰면 안 됩니다.
마크업
<section id="tools">...</section>요청 예시
도구 둘러보기 링크가 이동할 수 있도록 도구 섹션에 id를 추가해줘.
속성
href 링크 경로
href
<a href="/ko/reference/html-structure-terms">HTML</a>뜻
링크가 이동할 목적지 URL 또는 페이지 내부 위치입니다.
대상 지정 방법
링크가 잘못된 페이지나 섹션으로 이동할 때 href를 지칭합니다.
마크업
<a href="/ko/reference/html-structure-terms">HTML</a>요청 예시
프로그래밍 메뉴의 href를 새 HTML 구조 용어 페이지로 바꿔줘.
속성
src 파일 경로
src
<img src="/images/example.png" alt="Example">뜻
이미지, 스크립트, iframe 같은 미디어가 가져올 파일 경로입니다.
대상 지정 방법
이미지나 스크립트가 누락되었거나 잘못되었거나 교체되어야 할 때 src를 지칭합니다.
마크업
<img src="/images/example.png" alt="Example">요청 예시
이미지 src를 새 미리보기 이미지 경로로 교체해줘.
속성
데이터 속성
data-*
<html data-theme="dark">뜻
요소에 상태나 메타데이터를 저장하기 위한 사용자 정의 속성입니다.
대상 지정 방법
테마, 열림, 닫힘, 선택됨 같은 상태에 따라 스타일이 바뀔 때 data 속성을 사용할 수 있습니다.
마크업
<html data-theme="dark">요청 예시
다크모드 색상을 전환하기 위해 html 요소의 data-theme를 사용해줘.
접근성
역할 속성
role
<div role="menu">...</div>뜻
요소가 어떤 UI 객체인지 보조 기술에 알려주는 접근성 속성입니다.
대상 지정 방법
menu, dialog, tab, alert처럼 커스텀 컴포넌트에 명확한 의미가 필요할 때 사용합니다.
주의
일반 div에 role을 추가하는 것보다 가능한 경우 기본 시맨틱 요소를 쓰는 편이 좋습니다.
마크업
<div role="menu">...</div>요청 예시
커스텀 언어 목록에 적절한 menu 역할을 부여해줘.
접근성
접근성 라벨
aria-label
<button aria-label="Toggle menu">...</button>뜻
화면에 보이는 텍스트가 없거나 부족할 때 보조 기술에 제공하는 텍스트 라벨입니다.
대상 지정 방법
메뉴, 검색, 닫기, 테마 버튼처럼 아이콘만 있는 컨트롤에 사용합니다.
마크업
<button aria-label="Toggle menu">...</button>요청 예시
햄버거 메뉴 버튼의 의미가 분명한 aria-label을 추가해줘.
접근성
펼침 상태 속성
aria-expanded
<button aria-expanded="false">Menu</button>뜻
연결된 패널이 열렸는지 닫혔는지를 알려주는 접근성 속성입니다.
대상 지정 방법
드롭다운 버튼, 아코디언, 메뉴 토글에 사용합니다.
마크업
<button aria-expanded="false">Menu</button>요청 예시
메뉴 카테고리가 열리거나 닫힐 때 aria-expanded도 같이 갱신해줘.
계층과 관계
부모와 자식
Parent and child
<nav><a>Link</a></nav>뜻
부모 요소는 그 안에 자식 요소를 포함합니다.
대상 지정 방법
nav 안의 링크, header 안의 버튼처럼 위치 관계가 중요한 대상을 지칭할 때 사용합니다.
마크업
<nav><a>Link</a></nav>요청 예시
헤더 nav의 자식 링크에만 스타일을 적용해줘.
계층과 관계
형제 요소
Sibling
<button /> <button />뜻
같은 부모 요소 안에 나란히 있는 요소들을 형제 요소라고 합니다.
대상 지정 방법
옆 항목과의 간격이나 상호작용이 중요할 때 형제 요소라는 말을 사용합니다.
마크업
<button /> <button />요청 예시
헤더 버튼 형제 요소 사이의 gap을 줄여줘.
계층과 관계
중첩 구조
Nesting
<section><article><h2>Title</h2></article></section>뜻
요소 안에 다른 요소가 들어가면서 만들어지는 포함 구조입니다.
대상 지정 방법
어떤 안쪽 요소를 바꿔야 하는지 정확히 설명할 때 사용합니다.
마크업
<section><article><h2>Title</h2></article></section>요청 예시
각 카드 안에서 요청 예시를 속성 칩 아래로 이동해줘.
계층과 관계
감싸는 요소
Wrapper
<div class="container">...</div>뜻
다른 요소를 묶거나 폭을 제한하거나 위치를 잡기 위해 사용하는 감싸기 요소입니다.
대상 지정 방법
각 자식 요소가 아니라 바깥에서 묶는 요소의 레이아웃을 바꿔야 할 때 사용합니다.
마크업
<div class="container">...</div>요청 예시
드롭다운을 오른쪽 정렬할 수 있도록 헤더 컨트롤을 감싸는 wrapper를 추가해줘.
계층과 관계
컨테이너
Container
<div class="container">Page content</div>뜻
페이지 콘텐츠를 일정한 폭 안에 정렬하고 너무 넓어지지 않게 잡아주는 감싸기 요소입니다.
대상 지정 방법
전체 본문 폭이나 좌우 여백을 바꿀 때 container를 지칭합니다.
마크업
<div class="container">Page content</div>요청 예시
데스크탑에서 메인 콘텐츠 컨테이너를 조금 더 좁혀줘.
계층과 관계
프래그먼트
Fragment
<>...</>뜻
React에서 여러 요소를 묶되 실제 DOM 요소를 추가하지 않는 감싸기 방식입니다.
대상 지정 방법
레이아웃이나 CSS 선택자에 영향을 주는 div를 추가하지 않고 요소를 묶을 때 사용합니다.
마크업
<>...</>요청 예시
불필요한 wrapper div를 추가하지 말고 fragment를 사용해줘.
접근성
시맨틱 HTML
Semantic HTML
<main><section><h1>...</h1></section></main>뜻
겉모양만이 아니라 의미에 맞는 요소를 사용하는 HTML 작성 방식입니다.
대상 지정 방법
구조, 접근성, SEO, 유지보수성을 개선할 때 시맨틱 HTML을 지칭합니다.
마크업
<main><section><h1>...</h1></section></main>요청 예시
참고 페이지 영역을 전부 일반 div로 만들지 말고 시맨틱 HTML로 구성해줘.
접근성
랜드마크 영역
Landmark
<header> <nav> <main> <footer>뜻
보조 기술 사용자가 페이지의 주요 영역으로 빠르게 이동할 수 있게 하는 중요한 영역입니다.
대상 지정 방법
header, nav, main, aside, footer는 랜드마크 역할을 할 수 있습니다.
마크업
<header> <nav> <main> <footer>요청 예시
각 페이지에 명확한 main 랜드마크가 하나 있도록 유지해줘.
접근성
접근성 이름
Accessible name
<button aria-label="Open menu">☰</button>뜻
보조 기술이 컨트롤을 읽어줄 때 사용하는 이름입니다.
대상 지정 방법
화면상으로는 알 수 있지만 스크린리더에는 이름이 부족한 컨트롤을 수정할 때 사용합니다.
마크업
<button aria-label="Open menu">☰</button>요청 예시
테마 변경 버튼에 모든 언어에서 명확한 접근성 이름을 부여해줘.
접근성
탭 순서
tabindex
<button tabindex="0">Action</button>뜻
키보드 포커스 이동 순서에 영향을 줄 수 있는 속성입니다.
대상 지정 방법
커스텀 컨트롤이 키보드로 접근되지 않을 때 신중하게 사용합니다.
주의
양수 tabindex는 키보드 이동 순서를 혼란스럽게 만들 수 있습니다. 보통 기본 포커스 순서가 더 좋습니다.
마크업
<button tabindex="0">Action</button>요청 예시
양수 tabindex를 피하고 키보드 이동 순서를 자연스럽게 유지해줘.