From b57b6aa5a38d4a56d78095dc8c8803064f247432 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Wed, 2 Jun 2021 00:16:56 +0900 Subject: Update CSS main page (#1002) --- files/ko/web/css/index.html | 222 ++++++++++++++++++++++++++++++++------------ 1 file changed, 161 insertions(+), 61 deletions(-) diff --git a/files/ko/web/css/index.html b/files/ko/web/css/index.html index 7c5210e812..e749df15c0 100644 --- a/files/ko/web/css/index.html +++ b/files/ko/web/css/index.html @@ -1,5 +1,5 @@ --- -title: 'CSS: Cascading Style Sheets' +title: "CSS: Cascading Style Sheets" slug: Web/CSS tags: - CSS @@ -7,90 +7,190 @@ tags: - Landing - Layout - Reference - - 'l10n:priority' + - "l10n:priority" - 스타일시트 translation_of: Web/CSS --- -
{{CSSRef}}
-

Cascading Style Sheets(CSS)는 HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다.

+
{{CSSRef}}
-

CSS는 오픈 웹의 핵심 언어 중 하나이며 W3C 명세에 따라 브라우저끼리 표준을 맞춥니다. 레벨 단위로 개발한 CSS1은 더 이상 사용하지 않고, 다음 레벨인 CSS2.1은 권고안이며, 레벨보다 작은 단위인 모듈로 나뉜 CSS3은 표준화 과정을 밟고 있습니다.

+

+ Cascading Style Sheets(CSS)는 HTML이나 + XML(XML의 방언인 SVG, + XHTML 포함)로 작성된 문서의 표시 방법을 기술하기 위한 + 스타일 시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 + 어떻게 렌더링되어야 하는지 지정합니다. +

-
- +

+ CSS3 이후, CSS 명세의 범위가 엄청나게 넓어짐에 따라 여러 CSS 모듈 사이의 차이도 너무나 커졌습니다. 그래서 이제는 + 권고안을 모듈별로 개발하고 공개하는 것이 더 효과적인 + 상황입니다. 이제 W3C는 CSS 명세의 버전을 올리지 않고, 대신 주기적으로 + CSS 명세 안정판의 스냅샷을 생성하고 있습니다. +

-
-
-

자습서

+

중요한 자료

-
CSS 소개
-
선택자, 속성, 규칙 작성, HTML에 CSS 적용하기, 길이와 색 등 단위 지정하기, 종속과 상속, 박스 모델, 디버깅 등 CSS의 작동 원리와 기본을 배웁니다.
-
텍스트 꾸미기
-
글꼴, 굵기, 기울이기, 줄 간격과 글자 간격, 그림자 등 텍스트 스타일의 기초를 논합니다. 사용자 설정 글꼴 적용, 목록과 링크 꾸미기로 마무리합니다.
-
박스 꾸미기
-
웹 페이지 레이아웃의 기초 중 하나인 박스 스타일을 살펴봅니다. 박스 모델에 대해 복습하고, 마진, 테두리, 패딩, 배경색, 이미지, 그림자, 필터 등 박스 레이아웃을 조절하는 법을 배웁니다.
-
CSS 레이아웃
-
텍스트를 꾸미고 박스를 변형하는 등 CSS 기초를 살펴보았으니, 이제 화면이나 서로에게 상대적인 위치에 올바르게 배치하는 법을 배웁니다. 필요한 전제조건은 다루었으니 각기 다른 디스플레이 설정, 플로팅과 포지션을 사용하는 전통적인 레이아웃법 및 플렉스박스 등 새로운 방법 등 더 깊은 영역을 배웁니다.
+
CSS 소개
+
+ 웹 개발이 처음이시라면 CSS 기본 문서에서 CSS란 + 무엇인지, 그리고 CSS의 사용법을 배워보세요. +
+
CSS 자습서
+
+ MDN의 CSS 학습지는 기초 수준부터 숙련 레벨까지, 모든 기초를 망라하는 방대한 + 자습서를 포함하고 있습니다. +
+
CSS 참고서
+
+ MDN의 CSS 전체 참고서는 숙련된 개발자를 위해 CSS의 모든 속성과 개념의 + 설명을 제공합니다. +
+ +
+

프런트엔드 웹 개발자가 되고자 하시나요?

+ +

목표를 달성하기 위한 모든 필수 정보가 들어있는 교육 과정을 준비했습니다.

+ +

+ 시작하기 +

-
+

자습서

+ +

+ MDN CSS 학습지는 CSS를 처음부터 알려주는 모듈로 구성되어 있습니다. 사전 지식도 + 필요하지 않습니다. +

+ +
+
CSS 첫걸음
+
+ CSS(Cascading Style Sheets)는 웹 페이지에 스타일과 레이아웃을 적용할 때 사용합니다. 예시를 몇 가지 들자면 글꼴, + 색상, 크기를 조절하고, 콘텐츠의 간격을 조정하고, 페이지를 여러개의 열로 나누고, 애니메이션 등 장식을 추가할 수도 + 있습니다. 이 모듈에서는 CSS의 기본적인 작동 원리와 구문의 생김새, HTML에 실제로 적용하는 법을 배우면서 다음 과정으로 + 가는 길을 닦습니다. +
+
CSS의 구성 블록
+
+

+ 이 모듈은 CSS 첫걸음이 끝난 곳부터 시작합니다. 이제 언어와 구문에 + 익숙해졌고, 기본적인 사용법도 익혀봤으니 약간 더 깊게 들어갈 차례입니다. 이 모듈에서는 종속과 상속, 사용할 수 있는 + 모든 선택자 유형, 단위와 크기, 배경과 테두리 스타일, 디버깅 등등 많은 것을 알아봅니다. +

+ +

+ 여기의 목표는 여러분이 훌륭한 CSS를 작성할 수 있도록 도구를 제공하고, + 텍스트 스타일링나 + CSS 레이아웃처럼 더 상세한 주제로 들어가기 전에 알고 있어야 할 필수 + 이론을 익히는 것입니다. +

+
+
텍스트 스타일링
+
+ CSS 언어 기초를 다뤘으니, 다음 주제는 대표적인 CSS의 영역인 텍스트 스타일링에 집중합니다. 여기서는 글꼴 설정, 굵기, + 기울임꼴, 행간과 자간, 그림자 등 다양한 텍스트 기능을 배웁니다. 그 후 사용자 지정 글꼴을 페이지에 적용하는 법, + 그리고 리스트와 링크 스타일로 모듈을 마무리합니다. +
+
CSS 레이아웃
+
+ 여기까지 왔으면 이미 CSS 기초, 텍스트 스타일링, 그리고 콘텐츠가 들어갈 박스를 조작하고 스타일을 적용하는 법을 + 다뤘으니, 이번엔 박스를 뷰포트나 다른 박스에 상대적인 위치에 원하는 대로 배치하는 법을 알아봅니다. 필요한 사전 + 지식은 모두 학습했으니 서로 다른 display 설정과 플렉스박스, CSS 그리드처럼 최신 레이아웃 방식, 위치 + 조정처럼 CSS 레이아웃을 더 자세히 살펴보겠습니다. 마지막으로, 오래됐지만 여전히 알고 있으면 도움이 될만한 레이아웃 + 방법도 몇 가지 둘러봅니다. +
+
일반적인 CSS 문제 해결하기
+
이 모듈은 웹 페이지를 만들 때의 일반적인 문제를 CSS를 사용해서 해결하는 법을 설명합니다.
+
+

참고서

-

쿡북

+

쿡북

-

CSS 레이아웃 쿡북은 여러분의 웹 사이트에서도 구현해야 할 수 있는, 흔히 쓰이는 레이아웃 패턴을 모아놓은 문서입니다. 프로젝트의 시작 코드는 물론이고, 레이아웃 명세를 사용하는 각기 다른 방법과 개발자로서 고를 수 있는 선택지를 제공합니다.

+

+ CSS 레이아웃 쿡북은 여러분의 웹 사이트에서도 사용할 일이 생길지 모르는, + 흔히 쓰이는 레이아웃 패턴을 모아놓은 문서입니다. 프로젝트에서 사용할 기초 코드에 더해, 레이아웃 명세를 사용하는 각기 + 다른 방법과 개발자로서 결정할 수 있는 선택지도 제공합니다. +

-

CSS 개발 도구

+

CSS 개발 도구

-
-
-
-

같이 보기

+

같이 보기

-- cgit v1.2.3-54-g00ecf