---
title: CSS 레이아웃
slug: Learn/CSS/CSS_layout
tags:
  - 가변상자
  - 격자
  - 다단
  - 단위
  - 부동
  - 부동체
  - 씨에스에스
  - 안내서
  - 위치잡기
  - 조판
  - 초보자
  - 테이블
  - 학습
translation_of: Learn/CSS/CSS_layout
---
<div>{{LearnSidebar}}</div>

<p>이 시점에서 우리는 이미 CSS 기본 사항, 텍스트 스타일링 방법, 콘텐츠가 안에 있는 상자를 스타일링하고 조작하는 방법을 살펴 보았습니다. 이제 뷰포트와 관련하여 상자를 올바른 장소에 배치하는 방법을 살펴볼 때입니다. 우리는 필요한 전제조건을 다루었기 때문에 이제 CSS 레이아웃에 깊이 뛰어들어 다른 디스플레이 설정, 플렉스박스, CSS 그리드, 포지셔닝과 같은 현대적인 레이아웃 도구, 그리고 당신이 여전히 알고 싶어할 만한 레거시 기술들을 살펴볼 수 있다.</p>

<h2 id="선결사항">선결사항</h2>

<p>이번 단위를 시작하기 전에 여러분은 이미 아래 내용을 익혔어야 합니다:</p>

<ol>
 <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 단위에서 논의했듯이 HTML에 대해 기본적인 친숙도가 있어야 합니다.</li>
 <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a> 단위에서 논의한 만큼 CSS 기본 사항에 대해 부담이 없어야 합니다.</li>
 <li><a href="/en-US/docs/Learn/CSS/Styling_boxes">상자 스타일링</a> 방법에 대한 이해가 있어야 합니다.</li>
</ol>

<div class="note">
<p><strong>참고</strong>: 여러분은 본인만의 파일을 생성할 능력이 없는 컴퓨터/태블릿/다른 장치에서 작업하고 있는 경우, <a href="http://jsbin.com/">JSBin</a>나 <a href="https://thimble.mozilla.org/">Thimble</a>과 같은 온라인 코딩 프로그램 상에서 코드 예제를 시험해볼 수 있다.</p>
</div>

<h2 id="안내서">안내서</h2>

<p>이 글은 CSS에서 이용할 수 있는 기본 레이아웃 도구 및 기술에 대한 지침을 제공합니다. 단원 말미에 웹페이지 하나를 예시하는 방식으로 레이아웃 매서드에 대한 이해도를 자가 점검하는데 도움이 되는 학습 평가가 있습니다.</p>

<dl>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 입문서</a></dt>
 <dd>이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 서로 다른 {{cssxref("display")}} 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></dt>
 <dd>웹페이지의 엘리먼트 무리는 여러분이 무언가 변화를 주기전까지는 <em>normal flow</em>(일반 대열)에 따라 또래 엘리먼트들을 배치합니다. 이 글은 일반 대열을 설명하는데, 그 걸 토대로 일반 대열 자체를 변경하는 방법을 배우겠습니다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
 <dd><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/%EA%B0%80%EB%B3%80%EC%83%81%EC%9E%90%EC%9D%98_%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8_%EC%82%AC%EC%9A%A9%EB%A1%80">Flexbox</a>는 행과 열의 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 글은 근간이 되는 내용 전체를 설명한다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드(Grids)</a></dt>
 <dd>CSS 그리드 레이아웃(Grid Layout)은 웹페이지를 위한 이차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 알려드립니다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></dt>
 <dd>원래 텍스트 블록 내에서 부동 이미지를 위한 {{cssxref("float")}} 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. Flexbox와 그리드의 출현과 함께 부동 속성은 이 글에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></dt>
 <dd>당신이 일반 문서 레이아웃 대열에서 엘리먼트를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 엘리먼트 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 글은 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></dt>
 <dd>CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 글은 그 기능을 어떻게 사용하는지 설명합니다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></dt>
 <dd>웹 기반 장치에 다양한 화면 크기가 등장함에 따라 반응형 웹 디자인(RWD) 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 레이아웃과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 글에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></dt>
 <dd><strong>CSS Media Query</strong>는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></dt>
 <dd>그리드 시스템은 CSS 레이아웃에서 사용되는 매우 일반적인 기능이며, CSS 그리드 레이아웃(Grid Layout) 이전에는 부동체 또는 기타 레이아웃 기능을 이용하여 그리드 레이아웃(Grid Layout)이 구현되는 경향이 있었습니다. 자신의 레이아웃을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 여러분의 콘텐츠를 그 가상의 열 안에 콘텐츠 열을 끼워맞춥니다. 이 글에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.</dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></dt>
 <dd>
 <p>이 단위에서는 Flexbox 및 그리드를 여러분의 웹디자인을 위한 주 레이아웃 방법으로 사용할 것을 권장합니다. 그러나 이전 브라우저 또는 당신이 사용하는 메서드를 지원하지 않는 브라우저를 사용하는 사이트 방문자가 있습니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 글은 구식 기술의 사용자들을 차단하지 않고 현대적인 웹 기술을 사용하는 방법에 대해 설명합니다.</p>
 </dd>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">학습 평가: 레이아웃 이해의 핵심 사항</a></dt>
 <dd>웹페이지를 하나 예시하는 방식으로 서로 다른 레이아웃 메서드 지식을 테스트하는 학습 평가</dd>
</dl>

<h2 id="참조_항목">참조 항목</h2>

<dl>
 <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">위치잡기 실례</a></dt>
 <dd>이 글은 위치잡기로 당신이 할 수 있는 일의 종류를 설명하기 위해 실제 사례를 구축하는 방법을 제시합니다.</dd>
</dl>