이 번역은 완료되지 않았습니다. 이 문서를 번역해 주세요.

초안
이 문서는 작성중입니다.

지금까진 CSS 기본, 글자를 스타일링하는 법과 내용이 담긴 박스를 스타일링하고 다루는 법에 대해 살펴보았다.  이제 뷰포트와 관련하여 박스를 위치시키는 법과 다른 것들을 살펴볼 차례다. 우리는 필수조건들을 다뤄왔기에 CSS 배치와 관련하여- 다른 배치 설정, 플로팅과 포지셔닝과 연관된 일반적인 배치 방법 및 플렉스박스와 같이 새롭게 유행하는 배치 도구에 대해- 좀 더 깊게 들어가 볼 수 있다. 

필수조건

이 모듈을 시작하기에 앞서 필요한 것은 다음과 같다:

  1. Introduction to HTML 모듈에서 논의된 바와 같이 HTML에 관한 기초 지식.
  2. Introduction to CSS 에 논의된 바와 같이 CSS 기초에 익숙함
  3. style boxes 에 대한 이해

주의: 본인만의 새로운 파일 생성이 불가능한 환경의 컴퓨터/테블릿/다른 기기등에서 작업하고 있는 경우, JSBin 혹은 Thimble 에서 온라인으로 (대부분의) 코딩 프로그램을 시연해 볼 수 있다.

가이드

이 문서들은 CSS 에서 사용 가능한 기초 배치 도구와 기술에 대한 방법을 제공할 것이다.

CSS 배치 개괄 Introduction to CSS layout
이 문서는 CSS 배치의 특성(다른 display 값과 같이 우리가 이미 이전의 모듈에서 다룬 적이 있는) 중 일부분에 대한 개요를 나타내고 이 모듈의 전체를 통해 다룰 다른 개념의 일부분을 소개할 것이다.
띄우기(플롯) Floats
원래 텍스트 블록의 내부에서 이미지를 플로팅시키기 위해 float 속성은 웹페이지에서 다중열을 생성시키는 가장 일반적인 도구 중 하나가 되었다. 이 문서가 전부 설명한다.
위치시키기(포지셔닝) Positioning
포지셔닝 혹은 위치시키기는 일반적인 문서 배치의 흐름에서 벗어나서 요소를 배치시킬 수 있도록 허용한다. 그리고 그들을 다른 방식으로 작동케 한다, 가령, 다른 요소의 위에 얹을 수도 있으며 혹은 브라우저 뷰포트 내부의 동일한 위치에 언제나 위치하도록 만들 수도 있다. 이 문서는 다른 position 값을 설명하며 그 사용법을 다룬다.
실제 위치시키기 예제 Practical positioning examples
이전 문서에서 다룬 포지셔닝(위치시키기)의 기본과 함께 포지셔닝(위치시키기)으로 할 수 있는 것들이 무엇인지 설명하기 위한 몇 개의 실전 예제 구성을 살펴볼 것이다.
유동적인 박스 Flexbox
새로운 기술이지만 브라우저들간 꽤 광범위하게 지원되는 유동적인 박스는 광범위하게 사용될 준비가 되었다. 유동적인 박스는 복잡하고 유동적인 배치의 빠른 생성과 그동안 CSS로 어렵게 증명된 특성들을 가능케 하는 도구를 제공한다. 이 문서는 모든 기초를 설명한다.
그리드 Grids
그리드 시스템은 CSS 배치에서 사용되는 또 하나의 매우 일반적인 특성이다. 이는 플롯(띄우기) 혹은 다른 배치 특성을 사용하여 실행되곤 한다. 가령, 4, 6 혹은 12개의 정해진 수의 열을 가진 배치를 상상해 보시오. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore the basic idea behind creating a grid system, look at using a ready-made grid system provided by a grid framework, and end by experimenting with CSS Grids — a nascent new browser feature that makes implementing grid design on the Web a lot easier.

Assessments

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.

함께 보기

문서 태그 및 공헌자

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