CSS(Cascading Style Sheets)는 웹페이지의 스타일과 레이아웃을 지정하는 데에 사용됩니다. 예를 들면, 폰트, 색상, 콘텐츠의 크기와 간격을 변경하거나, 여러 열로 나누거나, 애니메이션 또는 꾸밈 효과들을 더할 수 있습니다. 이 강좌에서 CSS의 기초지식(작동 방법, 선택자와 특성, CSS 규칙 작성, HTML에 적용하기, 길이 지정 방법, 색상, CSS의 다른 단위들, 직렬화와 상속, 디버깅 등)을 습득할 수 있습니다.
준비 과정
이 과정을 시작하기 전에 여러분은...
- 컴퓨터의 기본적인 사용법을 알고 있어야 하고, 웹을 둘러볼 수 있어야 합니다.
- 기본 소프트웨어 설치하기에 따라 기본적인 작업환경을 세팅해야 하고, 파일 다루기 에 따라 파일을 만들고 관리하는 방법을 이해하고 있어야 합니다.
- 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 선택자, 속성 및 가치에 대해 알아봅니다.