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