MDN wants to learn about developers like you:

번역 작업 진행중입니다.

CSS 웹페이지를 꾸미고 배치하는 데 사용된다. 예를 들어, 콘텐츠의 폰트, 색깔, 크기를 바꾸거나, 콘텐츠를 여러개의 열로 나누거나, 애니메이션 같은 꾸밈요소를 추가할 수 있다. 본 강좌로 CSS를 통달할 때까지 필요한 기초지식(선택자와 특성, CSS 규칙작성, HTML에 적용하기, 길이, 색깔 등등의 CSS 유닛을 정의하는 방법, 직렬화와 상속, 디버깅 같은 것들)을 습득할 수 있다.

본 강좌에 필요한 조건

학습을 시작하기 전에 필요한 조건은 다음과 같다.

  1. 컴맹이 아닐 것, 웹을 접해봤을 것.(예를 들어, 단순히 인터넷을 해봤으면 됨)
  2. Installing basic software에 따라 기초 작업환경이 준비되어 있고, Dealing with files에 따라 파일을 만들고 관리하는 방법을 이해하고 있을 것.
  3. Introduction to HTML 강좌를 이해할 만큼 HTML에 익숙할 것.

Note: 만약 파일을 만들 수 없는 환경에서 작업하고 있다면, 예제 코드 대부분이 JSBinThimble 같은 온라인 코딩 프로그램에서 실행되니 참고할 것.


This module contains the following articles, which will take you through all the basic theory of CSS, and provide ample opportunity for you to test out some skills.

How CSS works
In this module we start off with a theoretical grounding, looking at what CSS is, how the browser turns HTML into a DOM, how CSS is applied to parts of the DOM, some very basic syntax examples, and what code is used to actually include our CSS in our web page.
CSS syntax
Next up, we dive into CSS syntax in a lot more detail, looking at how properties and their values form into declarations, multiple declarations form into declaration blocks, and declaration blocks and selectors form into complete CSS rules. We round off the article by looking at other CSS syntax features such as comments and whitespace.
Selectors are mentioned in the previous article, but in this guide we go into a lot more detail, showing what selector types are available and how they work.
CSS values and units
There are many types of CSS property values to consider, from numerical values to colors to functions that perform a certain action (like embedding a background image, or rotating an element.) Some of these rely on particular units for specifying the exact values they are representing — do you want your box to be 30 pixels wide, or 30 centimeters, or 30 ems? In this guide we look at more common values like length, color and simple functions, as well as exploring less common units like degrees, and even unitless numerical values.
Cascade and inheritance
CSS has two different but related systems to resolve situations where you have selector conflicts (different selectors select the same elements; which one wins and ends up being applied?) and elements nested inside other elements (some of the styling applied to the parent elements makes sense to be inherited by the child elements; some doesn't.) This article covers both systems in enough detail to be useful but not overwhelming.
The box model
The CSS box model is the foundation of layout on the Web — each element is represented as a rectangular box, with the box's content, padding, border, and margin built up around one another like the layers of an onion. As a browser renders a web page, it works out what styles are applied to the content of each box, how big the surrounding onion layers are, and where the boxes sit in relation to one another. Before understanding how to create CSS layouts, you need to understand the box model.
Debugging CSS
In the final article of this module, we take a look at the basics of debugging CSS, including exploring the CSS applied to a page, and other tools that can help you find errors in your CSS code.


The following assessments will test your understanding of the CSS basics covered in the guides above.

Fundamental CSS comprehension
This assessment tests your understanding of the above guides with some carefully crafted exercises.

See also

Intermediate Web Literacy 1: Intro to CSS
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to CSS module. Learn to style HTML elements on a webpage using CSS selectors, attributes, and values.

문서 태그 및 공헌자

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