CSS 레이아웃과 HTML5 구조 요소의 실용 가이드

div와 span: 콘텐츠 그룹화의 기본 도구

HTML 문서 내에서 콘텐츠를 논리적으로 분리할 때 <div>와 <span> 요소를 사용한다. <div>는 블록 수준 컨테이너로, 별도의 시각적 스타일 없이 페이지를 영역으로 나누는 데 사용된다. 반면 <span>은 인라인 수준에서 작은 텍스트 조각을 감싸며, 주로 특정 단어나 구문에 스타일을 적용할 때 유용하다.

박스 모델과 치수 계산

CSS 박스 모델은 콘텐츠 영역, 패딩, 보더, 마진을 포함하여 요소의 전체 크기를 결정한다. 블록 요소의 너비가 지정되지 않으면 기본값으로 auto를 가지며, 이는 부모 컨테이너의 가용 공간을 모두 차지한다는 의미다. 너비는 픽셀이나 백분율로 설정할 수 있으며, 백분율은 현재 컨테이너 기준으로 계산된다. 높이는 일반적으로 auto로 두어 내용물에 맞게 자동 확장되도록 하는 것이 좋다.

선택자와 상속 관계

특정 컨테이너 내부의 요소만 스타일링하고 싶을 때 자손 선택자(예: #container p)를 사용하면, 중첩된 모든 하위 <p> 요소에 스타일이 적용된다. 직접 자식만 선택하려면 자식 결합자(>)를 사용해 #container > p와 같이 작성한다. 예를 들어, ID가 sidebar인 div 내부의 첫 번째 <blockquote> 하위 요소들에 스타일을 주고 싶다면 다음과 같이 작성할 수 있다:

#sidebar blockquote h3 {
    color: #333;
    font-weight: bold;
}

텍스트 정렬과 줄 간격

text-align 속성은 블록 요소 내부의 인라인 콘텐츠 정렬에만 작동하며, 인라인 요소 자체에는 적용되지 않는다. 줄 높이(line-height)는 숫자 값으로 설정할 수 있는데, 이 경우 폰트 크기 대비 배수로 해석된다. 예를 들어 line-height: 1.5;는 각 줄 사이에 폰트 크기의 1.5배만큼 여백을 준다. normal 값은 브라우저가 폰트에 적절한 간격을 자동으로 결정하게 한다.

여백과 테두리의 단축 표현

마진과 패딩은 네 방향을 한 줄로 정의할 수 있다:

  • margin: 10px 20px 30px 40px; → 상, 우, 하, 좌 순서
  • padding: 15px 30px; → 위아래 15px, 좌우 30px
  • border: 2px solid #000; → 두께, 스타일, 색상 순서 (순서 자유)

링크 상태와 의사 클래스(Pseudo-class)

링크 요소는 다양한 상태를 가지며, 이를 :link, :visited, :hover, :focus, :active 등의 의사 클래스로 스타일링할 수 있다. 중요한 점은 이들의 선언 순서를 지켜야 한다는 것이다. 일반적인 순서는 LVHFA(Love-Hate)로 기억할 수 있다:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:focus { outline: 2px solid yellow; }
a:active { color: orange; }

또한, p:first-child 또는 li:last-child처럼 구조 기반 선택도 가능하다. nth-child() 함수를 사용하면 짝수/홀수 행에 다른 스타일을 주는 것도 간단하다:

tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:nth-child(odd) {
    background-color: #ffffff;
}

레이아웃 흐름과 포지셔닝

브라우저는 HTML 요소를 상단에서 하단으로 흐르듯 렌더링한다. 블록 요소는 줄바꿈과 함께 세로로 배치되고, 인라인 요소는 가로로 나란히 배치된다. 이 과정에서 수직 마진은 '겹침(margin collapse)' 현상이 발생하는데, 두 요소의 마진이 만나면 더 큰 값 하나만 반영된다. 그러나 보더나 패딩이 있으면 이 현상이 방지된다.

포지셔닝은 다음 네 가지 방식으로 제어할 수 있다:

  • static: 기본값, 문서 흐름 내 위치 유지
  • relative: 원래 위치를 기준으로 오프셋 이동 (문서 흐름 유지)
  • absolute: 가장 가까운 position 값을 가진 조상 기준으로 절대 배치 (흐름에서 제거됨)
  • fixed: 뷰포트 기준으로 고정 (스크롤과 무관)

절대 또는 고정 위치 요소는 z-index 속성으로 겹침 순서를 조정할 수 있다. 단, z-index는 position 값이 static이 아닌 요소에서만 작동한다.

유동형, 고정형, 젤로 레이아웃

유동형(flexible) 레이아웃은 브라우저 크기에 따라 확장되며, 백분율 너비를 사용한다. 반대로 고정형(frozen) 레이아웃은 픽셀 단위 너비로 고정되어 항상 동일하게 보인다. 젤로(Jello) 레이아웃은 일정한 너비를 가지되 화면 중앙에 정렬되는 방식으로, 중심 컨테이너에 좌우 마진을 auto로 설정하여 구현한다:

.container {
    width: 960px;
    margin: 0 auto;
}

CSS 테이블 디스플레이

실제 데이터 표시가 아닌 레이아웃 목적으로 display: table 관련 속성을 사용할 수 있다. 이 방법은 다중 열 레이아웃을 쉽게 만들 수 있게 해준다:

.table {
    display: table;
    width: 100%;
    border-spacing: 10px;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    vertical-align: top;
    padding: 10px;
}

이 방식은 실제 <table> 태그보다 의미론적으로 더 유연하며, 접근성에도 유리하다.

HTML5 의미론적 요소

HTML5는 콘텐츠 구조를 명확히 하기 위해 새로운 의미론적 태그를 도입했다:

  • <header>: 섹션 또는 페이지 상단 영역
  • <nav>: 주요 내비게이션 링크 그룹
  • <article>: 독립형 콘텐츠 (블로그 글, 뉴스 등)
  • <section>: 주제별 콘텐츠 묶음
  • <aside>: 보조 정보 (사이드바, 인용 등)
  • <footer>: 하단 정보 또는 저작권 안내
  • <time datetime="2024-05-20">: 날짜/시간 메타데이터 제공
  • <figure> 및 <figcaption>: 이미지, 차트 등의 설명 포함

미디어 요소 활용

<video>와 <audio> 태그는 미디어 재생을 위한 핵심 요소다. 여러 형식을 제공해 브라우저 호환성을 보장할 수 있다:

<video controls poster="preview.jpg" width="640">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <p>이 브라우저는 비디오를 지원하지 않습니다.</p>
</video>

주요 속성:

  • controls: 재생, 음량, 전체 화면 버튼 표시
  • autoplay: 자동 재생 (모바일에서는 제한됨)
  • loop: 반복 재생
  • preload: 로딩 전략 제어 (none, metadata, auto)
  • poster: 재생 전 표시될 이미지

폼과 입력 요소

사용자 입력을 처리하는 폼은 다양한 입력 유형을 지원한다:

  • <input type="text">: 일반 텍스트 입력
  • <input type="email"/>, <input type="url"/>: 형식 검증 자동 제공
  • <input type="number" min="1" max="100">: 숫자 범위 입력
  • <input type="range">: 슬라이더 입력
  • <input type="color">: 색상 선택기
  • <input type="date">: 달력 기반 날짜 선택
  • <textarea>: 여러 줄 텍스트 입력
  • <select> + <option>: 드롭다운 리스트

접근성을 위해 <label> 요소를 사용하고, for 속성과 입력의 id를 연결해야 한다:

<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username" required placeholder="이름 입력">

필수 입력 필드에는 required 속성을 추가하면, 제출 전에 유효성 검사를 수행한다.

스타일 우선순위와 계층구조(Cascading)

여러 규칙이 충돌할 경우, 브라우저는 다음 순서로 결정한다:

  1. 사용자 작성 스타일시트 (개발자)
  2. 사용자 정의 스타일시트 (사용자)
  3. 브라우저 기본 스타일시트

같은 우선순위 내에서는 특정성(specificity)이 높은 선택자가 우선한다. ID > 클래스 > 태그 순이며, !important는 거의 모든 것을 덮어쓴다. 하지만 남용 시 유지보수성이 떨어지므로 주의가 필요하다.

테이블 구조와 스타일링

표 형식 데이터는 <table> 요소로 구조화하며, 의미론적으로 올바른 태그 사용이 중요하다:

  • <th>: 헤더 셀 (자동 굵은 글꼴)
  • <td>: 데이터 셀
  • <caption>: 표 제목
  • colspan, rowspan: 셀 병합

테이블 셀 자체는 마진을 가질 수 없지만, border-spacing으로 전체 테이블의 셀 간격을 조절할 수 있다. border-collapse: collapse는 경계선을 하나로 합친다.

고급 선택자와 효과

의사 요소(pseudo-element)를 사용하면 특정 부분에 스타일을 적용할 수 있다:

p::first-letter {
    font-size: 2em;
    font-weight: bold;
}
p::first-line {
    text-transform: uppercase;
}

이 외에도 [href^="https"] 같은 속성 선택자, 형제 결합자(~, +) 등을 조합해 정교한 스타일링이 가능하다.

태그: html5 CSS 레이아웃 박스 모델 의사 클래스 반응형 디자인

7월 13일 20:15에 게시됨

인기 태그

©2026 괴물 클럽