CSS layout

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

이 문서는 작성중입니다.

At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.


이 모듈은 아래의 기본지식이 있어야 한다:

  1. Have basic familiarity with HTML, as discussed in the Introduction to HTML module.
  2. Be comfortable with CSS fundamentals, as discussed in Introduction to CSS.
  3. Understand how to style boxes.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.


These articles will provide instruction on the fundamental layout tools and techniques available in CSS.

CSS 레이아웃 소개
This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
Originally for floating images inside blocks of text, the float property has become one of the most commonly used tools for creating multiple column layouts on webpages. This article explains all.
Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different position values, and how to use them.
A new technology, but with support now fairly widespread across browsers, Flexbox is starting to become ready for widespread use. Flexbox provides tools to allow rapid creation of complex, flexible layouts, and features that historically proved difficult with CSS. This articles explains all the fundamentals.
Advanced layout techniques
In our last article, we'll have a more detailed look at other CSS layout features, which are either simply not as well known or nascent and less cross-browser compatible. This includes CSS tables, CSS Grids, Multi-column layout, and others.


The following assessments will test your ability to lay out web pages with CSS.

Creating a flexible multicolumn layout
This assessment tests your ability to create a standard multicolumn layout, with a few interesting features.
Creating a fixed control widget
This assessment challenges your understanding of positioning by asking you to create a fixed position control widget that allows the user to access a web app's controls regardless of where they scroll to.

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: yooonmi
 최종 변경: yooonmi,