Web - CSS Layout

Sally·2026년 2월 25일

CSS(Cascading Style Sheets)

웹 사이트를 만들 때 HTML이 건물의 뼈대라면, CSS는 건물의 외벽, 인테리어, 조명을 담당한다.

HTML vs CSS vs JS

HTML (Structure): 웹 페이지의 의미와 구조를 정의하는 마크업 언어로, 텍스트, 이미지, 버튼 등 요소들의 존재 여부를 결정한다.
CSS (Styling): HTML 요소가 화면에 출력되는 방식을 정의하는 스타일시트 언어로, 색상, 레이아웃, 크기 등 시각적인 디자인을 제어한다.
JavaScript (Behavior): 브라우저에서 실행되는 프로그래밍 언어로, 데이터 처리나 사용자 클릭에 따른 반응 등 웹 페이지의 동적인 동작을 담당한다.

내용(HTML)과 표현(CSS)을 분리하여 유지보수를 용이하게 하며, 박스 모델, 플렉스박스 등을 통해 웹 요소 배치를 제어하는 것이다. 결국 CSS란, 구조화된 HTML에 시각적 질서를 부여하여 사용자 경험(UX)을 완성하고, 코드의 재사용성과 관리 효율을 극대화하는 전략적인 도구라고 볼 수 있다.

CSS box model

display 속성

CSS는 모든 요소를 하나의 '박스'로 취급하는데, 이 박스의 크기(Margin)과 여백(Padding)을 조절하여 디자인을 완성한다.
박스를 화면에 어떻게 보여줄지 결정하는 가장 중요한 규칙이 바로 display 속성이다. 여기에는 크게 세 가지 핵심 방식 (block, inline-block, flex) 이 있다.

박스 타입

Outer display 타입 : block, inline
Inner display 타입 : flex (CSS Flexbox)

block 타입 : 하나의 독립된 덩어리처럼 동작하는 요소

항상 새로운 행으로 나뉨 (한 줄 전체를 차지, 너비 100%)

width, height, margin, padding 속성을 모두 사용 가능

width 속성 사용하지 않으면 박스는 inline 방향으로 사용 가능한 공간 모두 차지

padding, margin, border로 인해 다른 요소를 상자로부터 밀어냄

대표적으로 <div> 가 존재.

헤더, 푸터, 사이드바 등 웹페이지의 다양한 섹션을 구조화하는데 가장 많이 사용됨.

<h1~6>, <p>, <ul>, <li>

inline 타입 : 문장 안의 단어처럼 흐름에 따라 자연스럽게 배치되는 요소
- 줄바꿈 x (콘텐츠의 크기만큼만 영역을 차지)
- width, height 사용 불가
- 수직방향 (상하) : margin, padding, border 적용되지만, 다른 요소를 밀어낼 수 없음
- 수평방향 (좌우) : margin, padding, border 적용되어 다른 요소를 밀어낼 수 있음 (스페이스바 한 것 같은 효과)
- <a>, <span>, <img>, <strong>

Normal Flow

일반적인 흐름 또는 레이아웃을 변경하지 않은 경우 웹 페이지 요소가 배치되는 방식
- Word 문서에서 엔터를 눌러 문단을 나누는 것 : block 요소의 배치 방식 vs 엔터를 누르지 않고 계속 타이핑하는 것 : inline 요소 배치 방식

기타 display 속성

1. inline-block 타입

.index {
  display: inline-block;
}

inline 과 block의 특징을 모두 가진 특별한 display 속성 값

줄바꿈 없이 크기 지정 가능 (width O, height O)
주로 가로로 정렬된 내비게이션 메뉴 / 여러 개의 버튼 / 이미지 갤러리처럼 수평으로 나열하면서, 각 항목의 크기를 직접 제어하고 싶을 때 매우 유용하게 사용된다

2. None 타입

.index {
  display: none;
}

요소를 화면에 표시하지 않고, 공간조차 부여되지 않는다

CSS Position

CSS Layout : 각 요소의 위치와 크기를 조정하여 웹 페이지의 디자인을 결정하는 것
- 핵심 속성 : display (block, inline, flex, grid 등)
CSS Position : 요소를 Normal Flow에서 제거하여 다른 위치로 배치하는 것
- 겹치는 요소의 쌓이는 순서 조절하기, 화면의 특정 위치에 고정시키기 등
- 핵심 속성 : position (static, relative, absolute, fixed, sticky..)

Position의 유형

1. Static

.static {
  position: static;
}

요소를 Normal Flow에 따라 배치
top, right, bottom, left 속성 적용 X

2. Relative

.relative {
  position: relative;
  top: 100px;
  left: 100px;
}

요소를 Normal Flow에 따라 배치하되 자신의 원래 위치 (static)을 기준으로 이동
top, right, bottom, left 속성으로 위치를 이동
다른 요소의 레이아웃에 영향을 주지 않음

3. absolute

.absolute {
  position: absolute;
  top: 100px;
  left: 100px;
}

요소를 Normal Flow에서 제거
가장 가까운 relative 부모 요소를 기준으로 이동하는 것이 원칙이고, 만족하는 부모 요소가 없다면 body 태그를 기준으로 한다
top, right, bottom, left 속성으로 위치를 이동
문서에서 요소가 차지하는 공간이 없어짐

4. Fixed

요소를 Normal Flow에서 제거
현재 화면영역(viewport) 기준으로 이동
스크롤해도 항상 같은 위치에 유지
top, right, bottom, left 속성으로 위치를 이동
문서에서 요소가 차지하는 공간이 없어짐

5. Sticky

relative와 fixed 특성을 결합한 속성
스크롤 위치가 임계점에 도달하기 전 : relative 처럼 동작
스크롤 위치가 임계점에 도달한 후 : fixed 처럼 화면에 고정
- 다음 sticky 요소가 나오면 이전 sticky 요소의 자리 대체

활용

<div class="card">
  <div class="card-content">
    <h3>Card Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <span class="badge">New</span>
  </div>
</div>

/* CSS 스타일 */
.card {
  position: relative;     /* [중요] 자식인 badge의 기준점이 됨 */
  width: 300px;
  height: 200px;
  border: 1px solid black;
  margin: 20px;
}

.card-content {
  padding: 10px;
}

.badge {
  position: absolute;     /* 문서 흐름에서 빠져나와 붕 떠오름 */
  top: 0;                 /* 부모(card)의 맨 위에서 0만큼 떨어짐 */
  right: 0;               /* 부모(card)의 오른쪽에서 0만큼 떨어짐 */
  background-color: red;  /* 빨간색 배경 */
  color: white;           /* 하얀색 글자 */
  padding: 5px 10px;      /* 배지 안쪽 여백 */
  font-weight: bold;
}

부모(.card)를 relative로 기준을 잡고, 자식(.badge)을 absolute로 띄워 특정 위치(top, right)에 자유롭게 배치할 수 있다

z-index

요소의 쌓임 순서를 정의 (정수 값을 사용해 Z축 순서를 지정)
값이 클수록 요소가 위에!
static 아닌 요소에만 적용됨
기본값 : auto, 부모 요소의 z-index 값에 영향을 받음
- 부모의 z-index가 낮으면 자식의 z-index가 아무리 높아도 부모보다 위로 올라갈 수 없음
- 음수 값은 요소를 부모 요소의 뒤(배경)로 보낼 때 사용 가능

CSS Flexbox

block, inline 타입과 다르게 Inner display 타입으로, 박스 내부의 요소들이 어떻게 배치될지를 결정하는 Display 타입이다.
요소를 행과 열 형태로 배치하는 1차원 레이아웃 방식 (공간 배열 & 정렬)
Flexbox 구성요소 : main axis, cross axis, flex container, flex item