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

CSS는 웹페이지의 스타일과 레이아웃을 지정하는 데에 사용됩니다.
예를 들면, 폰트, 색상, 콘텐츠의 크기와 간격, 여러 열로 나누기 또는 꾸밈 효과들을 더할 수 있습니다. 이 강좌에서 CSS의 기초지식(작동 방법, 선택자와 특성, CSS 규칙 작성, HTML에 적용하기, 길이 지정 방법, 색상, 직렬화와 상속, 디버깅 등)을 습득할 수 있습니다.

본 강좌에 필요한 조건

이 과정을 시작하기 전에

  1. 컴퓨터 사용에 대한 기본 지식과 콘텐츠를 보고 사용할 줄 알아야 합니다.
  2. Installing basic software 에 따라 기본적인 작업환경이 세팅되어야 하고, Dealing with files 에 따라 파일을 만들고 관리하는 방법을 이해합니다.
  3.  Introduction to HTML 강좌를 이해할 만큼 HTML에 익숙해야 합니다.

Note: 만약 파일을 적용할 수 없는 상황에서 작업을 하고 있다면, 예제 코드들의 대부분은 JSBin 나 Thimble과 같은
온라인 코딩 프로그램에서도 실행되니 참고하십시오.

가이드

이 과정에는 CSS의 기본적인 이론을 배우고 테스트할 수 있는 기회를 제공합니다.

CSS의 작동원리(How CSS works)
이 과정에서는 CSS가 무엇인지, 브라우저가 HTML을 DOM으로 바꾸는 방법, CSS가 DOM에 일부 적용되는 방법, 기본 구문의 예제 및 우리 웹페이지의 CSS에 실제로 적용되는 코드를 설명합니다.
CSS 문법(CSS syntax)
CSS 문법을 더 자세히 알아봅시다. 속성과 값이 선언되는 방식, 여러 선언문이 선언 블록으로 형성이 되는지,
선언 블록과 선택자가 CSS의 규칙으로 형성되는지 살펴봅니다.
코멘트와 공백과 같은 다른 CSS 문법의 특징을 살펴봄으로 써 이 글을 마무리합니다.
선택자(Selector)
선택자는 이전 글에서 언급되었지만, 이 가이드에서는 선택자 유형과 작동 방식을 더 자세하게 알려줍니다.
CSS 값과 단위(CSS values and units)
숫자 값에서 색상, 배경 이미지 삽입 또는 요소 회전과 같은 특정 작업을 수행하는 기능에 이르기까지 여러 가지 유형의 CSS 속성 값을 고려해야 합니다. 
일부는 정확한 값을 지정하기 위해 특정 단위를 사용합니다. 이 가이드에서는 길이, 색상 및 간단한 기능과 같은 일반적인 값을 살펴보고 각도와 같은 일반적이지 않은 단위 및 단위가 없는 숫자 값을 탐색합니다.
캐스케이드와 상속(Cascade and inheritance)
CSS에는 선택자 충돌이 발생한 상황을(다른 선택자들이 동일한 요소를 선택했을 때, 하나는 적용되고 다른 하나는 내부에 중첩됩니다.)(상위 요소에 적용되는 일부는 자식 요소에 상속되는 건 맞지만, 어떤 것은 그렇지 않다.) 해결하기 위한 두 가지 시스템이 있습니다. 이 글은 두 가지 시스템을 자세하게 다룹니다.
박스모델(The box model)
CSS 박스 모델은 웹 레이아웃의 기초입니다. 각 요소들은 직사각형 박스로 표시되고, 상자의 내용, 패딩, 테두리, 여백 들은 양파 껍질처럼 쌓입니다. 브라우저가 웹페이지를 렌더링 할 때, 각 박스의 콘텐츠에 어떤 스타일이 적용되는지를 알아내고, 크기가 얼마나 큰지 또 서로 관련된 위치에 적용되는 스타일을 결정합니다.
CSS 레이아웃이 어떻게 만들어지는지 알기 전에 박스 모델의 이해가 필요합니다.
CSS 디버깅(Debugging CSS)
마지막으로 페이지에 적용된 CSS 탐색과 CSS 코드에서 오류 찾는 것을 도와주는 도구를 포함하여 CSS 디버깅의 기본을 살펴볼 것입니다.

평가

다음 평가는 위의 가이드에서 다루는 CSS 기본에 대한 이해를 테스트합니다.

기본적인 CSS의 이해
이 평가는 위의 가이드에 대한 이해를 테스트합니다.

참고항목

중급 웹 서적1 : CSS 소개
Mozilla 기반 과정으로, CSS 모듈 소개에서 언급된 기술들을 살펴보고 테스트합니다.
웹페이지의 HTML 요소 스타일, CSS 선택자, 속성 및 가치에 대해 알아봅니다.

문서 태그 및 공헌자

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