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

준비 과정

이 과정을 시작하기 전에 여러분은...

  1. 컴퓨터의 기본적인 사용법을 알고 있어야 하고, 웹을 둘러볼 수 있어야 합니다.
  2. 기본 소프트웨어 설치하기에 따라 기본적인 작업환경을 세팅해야 하고, 파일 다루기 에 따라 파일을 만들고 관리하는 방법을 이해하고 있어야 합니다.
  3.  HTML 소개 강좌를 이해할 만큼 HTML에 익숙해야 합니다.

참고: 파일을 만들 수 없는 컴퓨터나 태블릿, 기타 장치에서 작업을 하신다면 예제 코드의 대부분을 JSBin이나 Thimble 같은 온라인 코딩 프로그램에서도 시험할 수 있습니다.

구성

본 과정은 다음과 같은 안내서로 이루어지며, CSS의 기초 이론을 탐구하면서 실제로 써볼 수 있는 풍부한 기회를 제공합니다.

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

평가

다음 평가를 통해 안내서가 소개한 CSS 기초 지식을 시험할 수 있습니다.

기본적인 CSS의 이해
정교하게 제작한 연습 과제를 통해 안내서를 이해했는지 시험합니다.

같이 보기

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

문서 태그 및 공헌자

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