HTML/CSS 기초 : 시맨틱 태그 · 선택자 · 레이아웃

0. 웹 개발 구조

웹 페이지를 만들 때 크게 3가지 기술을 이용한다.

• HTML = 구조/의미(뼈대)
• CSS = 모양/배치(디자인)
• JS = 동작/상호작용(기능)

이 글(1편)은 그중 HTML(시맨틱 구조)와 CSS(선택자/레이아웃)까지 정리한다.

---

1. 시맨틱 태그(Semantic Tag)란?

시맨틱 태그는 디자인 목적의 태그가 아니라, HTML 문서에서 각 영역이 무슨 역할/의미인지(구조)를 명확하게 표현해 브라우저·검색엔진·보조기기(스크린리더 등)가 콘텐츠를 더 잘 이해하도록 돕는 태그다.

• 메뉴/본문/글 처럼 구조를 더 정확하게 이해하게 한다.

대표 태그는 다음과 같다.

• <header> : 상단 영역(로고/타이틀 등)
• <nav> : 메뉴/내비게이션 링크 묶음
• <main> : 페이지의 핵심 본문(보통 1개)
• <section> : 주제별 구역(섹션이 필요할 때)
• <article> : 독립적으로 떼어내도 의미 있는 콘텐츠(게시글/카드)
• <aside> : 보조 영역(사이드바/관련글)
• <footer> : 하단 정보(저작권/연락처 등)

시맨틱 태그를 쓰면

• 사람이 읽기 쉬움 : 코드를 보면 구조가 바로 보인다.
• 기계가 이해하기 쉬움 : 검색엔진·스크린리더가 페이지 구조를 더 잘 해석한다.
• 결과적으로 유지보수와 접근성, SEO에 도움이 된다.

---

2. CSS 선택자(Selector)란?

CSS 선택자는 어떤 HTML 요소에 스타일을 적용할지를 지정하는 규칙이다.
즉, CSS는 “디자인 규칙”이고, 선택자는 그 규칙을 적용할 대상을 고르는 방식이다.

• 기본 선택자 : 가장 많이 사용
  • 태그 선택자 : p, h1, ul →  해당 태그 전체에 적용
  • 클래스 선택자 : .btn, .card → 여러 요소에 반복 적용
  • 아이디 선택자 : #header → 페이지에서 보통 1개 요소에 사용
• 결합자 : 요소들 사이의 관계로 고르기
  • 후손 결합자 : A B →  A 안에 있는 모든 B(깊이 상관 없음)
  • 자식 결합자 : A > B → A의 바로 아래(1단계) 자식 B
  • 인접 형제 결합자 : A + B → A 바로 다음에 오는 형제 B
  • 일반 형제 결합자 : A ~ B → A 뒤에 오는 모든 형제 B
• 상태 선택자 사용자 행동/상태
  
  • :hover 마우스 올렸을 때
  • :focus 입력창에 커서가 들어갔을 때
  • :active 클릭하는 순간
  • :checked 체크된 상태(checkbox/radio)
  • :disabled 비활성 상태
• 구조 선택자 : 형제 순서로 고르 
  • :first-child, :last-child
  • :nth-child(n) (n번째 자식)

중요한 포인트 : 우선순위 (특이성, specificity)

• 같은 요소에 CSS 규칙이 겹치면 더 “구체적인” 선택자가 이긴다.
• 그래서 스타일이 “안 먹는 것처럼 보일 때”는, 선택자를 틀린 게 아니라 우선순위 때문에 덮인 경우가 많다.

---

3. CSS 레이아웃 기초 — Display / Position / Flex / Grid

 

레이아웃은 “요소를 어떻게 배치할지”를 정하는 도구다.
같은 화면도 어떤 도구를 쓰느냐에 따라 구현 방식이 달라진다.

• Display : 요소의 기본 성격(기본 배치)
  display는 요소가 기본적으로 어떻게 줄을 차지하고 배치되는지를 정한다.
  레이아웃이 “왜 줄바꿈 되지?” “왜 옆에 못 붙지?” 같은 문제는 display 성격을 보면 해결된다.
  
  • block : 한 줄을 통째로 차지한다(다음 요소는 다음 줄로 내려감)
    예: div, p, h1
  • inline : 내용만큼만 차지한다(옆에 붙는다)
    예: span, a
  • inline-block : inline처럼 옆에 붙지만, block처럼 너비/높이 설정이 비교적 자유롭다
  • none : 화면에서 사라지고 자리도 차지하지 않는다
• Position : 기준점과 겹침(떠다니는 배치)
  absolute가 이상한 곳에 붙는 경우는 대부분 “부모에 position: relative가 없다”가 원인이다.
  • static : 기본값(좌표 이동 불가)
  • relative : 자기 원래 자리 기준으로 살짝 이동 가능 + absolute의 기준점 역할을 하기도 한다
  • absolute : 문서 흐름에서 빠지고, **기준이 되는 부모(가장 가까운 positioned 조상)**를 찾아 그 기준으로 배치된다
  • fixed : 화면(뷰포트)에 고정(스크롤해도 따라다님)
  • sticky : 평소엔 흐름대로 있다가, 스크롤 임계점부터 고정처럼 동작
• Flex : 1차원(한 방향) 정렬/배치
  Flex는 가로(행) 또는 세로(열) 한 방향으로 요소를 배치하고 정렬하는 데 강하다.
  • justify-content : 주축(가로/세로) 방향 정렬
  • align-items : 교차축 정렬
  • gap : 요소 사이 간격
  • flex-wrap : 줄바꿈

 

• Grid : 2차원(행+열) 레이아웃
  Grid는 행(row)과 열(column)을 동시에 다루는 레이아웃이다.
  • grid-template-columns : 열 구성
  • gap : 간격
  • fr : 남는 공간 비율 단위
  • minmax() : 최소~최대 범위 지정(반응형에 유용)

 

정리

• 기본 흐름/줄바꿈 성격이 문제다 → Display
• 특정 요소를 띄우거나 겹치게 놓고 싶다(배지/모달/고정버튼) → Position
• 한 방향으로 나열하고 정렬한다(메뉴/정렬/카드 나열) → Flex
• 행+열 구조가 필요하다(페이지 틀/갤러리) → Grid

• Grid는 행(row)과 열(column)을 동시에 다루는 레이아웃이다.
• Flex는 가로(행) 또는 세로(열) 한 방향으로 요소를 배치하고 정렬하는 데 강하다.
• position은 요소를 정확한 좌표로 이동시키거나, 겹치게 만들 때 쓴다.
• display는 요소가 기본적으로 어떻게 줄을 차지하고 배치되는지를 정한다.