레슨 9 / 9·15분
HTML 태그 & CSS 속성 레퍼런스
자주 쓰는 HTML 태그
html
<!-- ── 문서 구조 ── -->
<!DOCTYPE html> <!-- HTML5 선언 -->
<html lang="ko"> <!-- 루트 요소 -->
<head> <!-- 메타데이터 영역 -->
<body> <!-- 표시되는 콘텐츠 -->
<!-- ── 시맨틱 구조 ── -->
<header> 머리글 (로고, 네비게이션)
<nav> 내비게이션 링크 모음
<main> 주요 콘텐츠 (페이지당 1개)
<section> 주제별 콘텐츠 그룹
<article> 독립적 콘텐츠 (블로그 글 등)
<aside> 부가 정보 (사이드바)
<footer> 바닥글 (저작권, 링크)
<!-- ── 텍스트 ── -->
<h1>~<h6> 제목 (1이 가장 큼)
<p> 문단
<span> 인라인 텍스트 묶기
<strong> 중요 텍스트 (굵게)
<em> 강조 텍스트 (기울임)
<br /> 줄바꿈
<hr /> 수평선
<!-- ── 링크와 미디어 ── -->
<a href="url"> 링크
<img src="url" alt=""> 이미지
<video> 동영상
<audio> 오디오
<!-- ── 목록 ── -->
<ul> 순서 없는 목록
<ol> 순서 있는 목록
<li> 목록 항목
<!-- ── 테이블 ── -->
<table> 표
<thead> 표 머리글
<tbody> 표 본문
<tr> 행
<th> 머리글 셀
<td> 데이터 셀
<!-- ── 폼 ── -->
<form> 폼 컨테이너
<input> 입력 필드
<textarea> 여러 줄 입력
<select> 드롭다운
<option> 드롭다운 항목
<button> 버튼
<label> 입력 필드 라벨
<fieldset> 관련 필드 그룹
<legend> fieldset 제목
<!-- ── 기타 ── -->
<div> 블록 레벨 컨테이너
<code> 코드
<pre> 서식 유지 텍스트input 타입 모음
html
<input type="text" /> 일반 텍스트
<input type="password" /> 비밀번호
<input type="email" /> 이메일 (형식 검증)
<input type="number" /> 숫자
<input type="tel" /> 전화번호
<input type="url" /> URL
<input type="date" /> 날짜 선택
<input type="time" /> 시간 선택
<input type="color" /> 색상 선택
<input type="range" /> 슬라이더
<input type="file" /> 파일 업로드
<input type="checkbox" /> 체크박스
<input type="radio" /> 라디오 버튼
<input type="hidden" /> 숨겨진 값
<input type="search" /> 검색
<input type="submit" /> 제출 버튼CSS 선택자 레퍼런스
css
/* ── 기본 선택자 ── */
* 모든 요소
div 태그 선택자
.class 클래스 선택자
#id ID 선택자
/* ── 결합 선택자 ── */
div p 자손 (모든 하위 p)
div > p 직계 자식 p만
div + p 바로 다음 형제 p
div ~ p 이후 모든 형제 p
/* ── 속성 선택자 ── */
[href] href 속성이 있는 요소
[type="text"] type이 text인 요소
[class^="btn"] class가 btn으로 시작
[class$="primary"] class가 primary로 끝남
[class*="card"] class에 card 포함
/* ── 가상 클래스 ── */
:hover 마우스 올렸을 때
:focus 포커스 상태
:active 클릭 중
:first-child 첫 번째 자식
:last-child 마지막 자식
:nth-child(n) n번째 자식
:nth-child(odd) 홀수 번째
:nth-child(even) 짝수 번째
:not(.class) 해당 선택자 제외
/* ── 가상 요소 ── */
::before 요소 앞에 콘텐츠 삽입
::after 요소 뒤에 콘텐츠 삽입
::placeholder placeholder 스타일
::selection 텍스트 선택 시 스타일자주 쓰는 CSS 속성
css
/* ── 박스 모델 ── */
width / height 너비 / 높이
max-width / min-width 최대 / 최소 너비
padding 안쪽 여백
margin 바깥 여백
border 테두리
box-sizing 박스 크기 계산 방식
/* ── 배경 ── */
background-color 배경색
background-image 배경 이미지
background-size cover | contain | 값
background-position 위치
background-repeat 반복 여부
/* ── 텍스트 ── */
color 글자색
font-size 글자 크기
font-weight 글자 굵기 (400, 700 등)
font-family 글꼴
line-height 줄 높이
text-align 정렬 (left, center, right)
text-decoration 밑줄 등 (none, underline)
text-transform 대소문자 (uppercase 등)
letter-spacing 자간
word-spacing 단어 간격
/* ── 레이아웃 ── */
display block | flex | grid | inline | none
position static | relative | absolute | fixed | sticky
top / right / bottom / left 위치 지정
z-index 쌓임 순서
overflow 넘침 처리 (hidden, scroll, auto)
float 요소 띄우기
/* ── Flexbox ── */
display: flex
flex-direction row | column
justify-content main축 정렬
align-items cross축 정렬
flex-wrap 줄바꿈
gap 간격
flex: 1 남은 공간 채우기
/* ── Grid ── */
display: grid
grid-template-columns 열 정의
grid-template-rows 행 정의
grid-template-areas 영역 이름 배치
gap 간격
grid-column 아이템 열 위치
grid-row 아이템 행 위치
/* ── 시각 효과 ── */
border-radius 둥근 모서리
box-shadow 그림자
opacity 투명도 (0~1)
cursor 커서 모양 (pointer 등)
transition 전환 애니메이션
animation 키프레임 애니메이션
transform 변형 (translate, scale, rotate)CSS 단위 정리
- •
px- 절대 단위, 고정 크기 - •
%- 부모 요소 기준 상대 크기 - •
em- 부모의 font-size 기준 (중첩 시 누적) - •
rem- 루트(html)의 font-size 기준 (일관적) - •
vw/vh- 뷰포트 너비/높이의 1% - •
fr- Grid에서 남은 공간의 비율 - •
ch- 문자 "0"의 너비 (텍스트 폭 제한에 유용)
💡
이 레퍼런스는 자주 참고하게 될 내용입니다. 모든 속성을 외울 필요는 없으며, 필요할 때 찾아보는 습관이 더 중요합니다. MDN Web Docs(developer.mozilla.org)는 가장 신뢰할 수 있는 HTML/CSS 레퍼런스입니다.