CSS(Cascading Stylesheets; 종속형 스타일시트)는 HTML을 익힌 후 가장 먼저 배워야할 웹기술입니다. HTML이 컨텐트의 구조와 의미를 정의하는 반면, CSS는 스타일을 지정하고 레이아웃을 지정하는 데 사용됩니다. 예를 들어, CSS를 사용하면 컨텐트의 글꼴, 색상, 크기 및 간격을 변경하거나, 여러 개의 열로 분할하거나, 애니메이션이나 기타 장식 효과를 추가할 수 있습니다.

학습경로

CSS에 도전하기 전에 반드시 HTML의 기초를 익혀야 합니다. 먼저 HTML 소개 모듈을 수행하세요. 그러면 다음을 익힐 수 있습니다.:

HTML의 기본 원리를 이해하고 나면, HTML과 CSS 사이를 왕복하며 동시에 학습하는 것이 좋습니다. HTML은 CSS를 활용할 때 더 흥미롭고 재미있는 기술이며, HTML을 알지 못한 채로는 CSS를 제대로 익힐 수 없기 때문입니다.

이 토픽을 시작하기 전에, 최소한 컴퓨터를 사용하고 웹을 수동적으로 사용(웹에서 컨텐츠를 소비)할 정도의 기본 지식 또한 있어야 합니다. 기본 소프트웨어 설치에서 설명하는 기본적 작업 환경을 갖춰야 하고, 파일 다루기에서 설명하는 파일 생성 및 제어도 이해해야 합니다. 둘 모두 완전한 초보자를 위한 웹과 함께 시작하기 모듈의 일부입니다.

이 토픽을 시도하기 전에 웹과 함께 시작하기를 수행하는 것이 좋지만 꼭 필요한 것은 아닙니다. CSS 기초 문서에서 다뤄지는 대부분의 내용은 CSS 소개 모듈에서 보다 자세하게 다뤄집니다.

모듈

아래는 이 토픽의 모듈들입니다. 처음 항목부터 차례대로 수행하는 것이 좋습니다.

CSS 소개
CSS 작동 원리에 대한 기초부터 시작할 수 있습니다. 여기에는 포함하는 선택자(selectors)와 속성(properties), CSS 작성 규칙, CSS를 HTML에 적용하는 법, 길이나 색상 등의 단위를 특정하는 법, 종속(cascade)과 상속(inheritance), 박스 모델(box model)의 기초, CSS 디버깅이 포함됩니다.
텍스트 스타일링
여기서 글꼴, 굵기 및 기울임꼴, 줄과 문자 간격, 그림자 및 기타 텍스트 기능 설정을 비롯한 텍스트 스타일링 기본 사항을 살펴 봅니다. 페이지에 맞춤 글꼴을 적용하거나 목록 및 링크에 스타일을 적용할 수도 있습니다.
박스 스타일링
다음으로 웹페이지 레이아웃을 위한 기본 단계 중 하나인 박스 스타일링을 살펴 봅니다. 먼저 박스 모델을 다시 요약하여 설명한 후, 내부 여백(padding), 테두리(borders) 및 외부 여백(margins)을 설정하거나 사용자 지정 배경색, 이미지 및 기타 기능을 설정하고, 박스에 그림자나 필터와 같은 멋진 기능을 설정하는 등 상자 레이아웃을 제어하는 법을 알아봅니다.
CSS 레이아웃
이 시점에서 이미 CSS 기초, 텍스트 스타일링 및 콘텐트가 포함된 박스의 스타일링 및 조작을 살펴보았습니다. 이제는 박스를 뷰포트(viewport) 또는 다른 박스와 관련하여 올바른 위치에 배치하는 방법을 살펴볼 시간입니다. 필요한 사전 요구 사항을 포함하여, CSS 레이아웃, 디스플레이(display) 속성의 다양한 설정, 플로트(float) 및 위치 지정(positioning)과 관련된 기존 레이아웃 방식과 더불어 유동적 박스(flexbox) 같은 새롭고 놀라운 레이아웃 도구를 깊게 살펴봅니다.
반응형 디자인 (TBD)
요즘은 다양한 장치로 웹을 탐색하기 때문에 반응형 웹 디자인(RWD; Responsive Web Design)은 핵심적인 웹 개발 기술이 되었습니다. 이 모듈에서는 반응형 웹 디자인의 기본 원칙과 도구들을 다루며, 화면 너비, 방향, 해상도와 같은 장치 특성에 따라 다른 CSS를 적용하는 방법을 설명합니다. 그리고 이런 특성에 따라 다양한 비디오와 이미지를 제공할 수 있게 하는 기술을 탐구합니다.

CSS로 일상적인 문제 해결하기

CSS를 사용하여 일반적인 문제 해결하기는 웹페이지를 만들 때의 매우 흔한 문제들을 CSS를 사용해 해결하는 방법을 살펴보는 섹션들의 링크를 제공합니다.

시작부터 가장 많이 하게 되는 일은 HTML 요소들(elements)의 색상과 배경색을 지정하고, 크기나 모양 또는 위치를 변경하고, 테두리(borders)를 정의하고 추가하는 일입니다. 하지만 일단 CSS의 기초에 대해 확실하게 이해만 하면 못하는 일이 거의 없게 됩니다. CSS 학습의 장점 중 하나는 잘 모르는 것에 대해서도 일단 기초만 익혀두면 무엇을 할 수 있고 무엇을 할 수 없는지를 꽤 정확하게 느낄 수 있다는 것입니다!

더 알아보기

CSS on MDN
MDN의 CSS 문서 목록에 대한 주 진입 지점입니다. CSS 언어의 모든 기능에 대한 자세한 참조 문서 목록을 찾을 수 있습니다. 혹시 속성(property)이 가질 수 있는 모든 값(values)에 대한 정보가 필요한가요? 그렇다면 이곳으로 이동하세요.

문서 태그 및 공헌자

이 페이지의 공헌자: Narrativi, cs09g
최종 변경자: Narrativi,