1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
---
title: 'CSS: Cascading Style Sheets'
slug: Web/CSS
tags:
- CSS
- Design
- Landing
- Layout
- Reference
- 'l10n:priority'
- 스타일시트
translation_of: Web/CSS
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>(<strong>CSS</strong>)는 <a href="/ko/docs/HTML" title="HyperText Markup Language">HTML</a>이나 <a href="/ko/docs/XML">XML</a>(<a href="/ko/docs/SVG">SVG</a>, <a href="/ko/docs/XHTML">XHTML</a> 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 <a href="/ko/docs/Web/API/StyleSheet">스타일시트</a> 언어입니다.</span> CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다.</p>
<p>CSS는 <strong>오픈 웹</strong>의 핵심 언어 중 하나이며 <a class="external" href="http://w3.org/Style/CSS/#specs">W3C 명세</a>에 따라 브라우저끼리 표준을 맞춥니다. 레벨 단위로 개발한 CSS1은 더 이상 사용하지 않고, 다음 레벨인 CSS2.1은 권고안이며, 레벨보다 작은 단위인 모듈로 나뉜 <a href="/ko/docs/Web/CSS/CSS3" title="CSS3">CSS3</a>은 표준화 과정을 밟고 있습니다.</p>
<section id="sect1">
<ul class="card-grid">
<li><span>CSS 소개</span>
<p>웹 개발을 처음 하신다면 <a href="/ko/docs/Learn/Getting_started_with_the_web/CSS_기본">CSS 기본</a> 문서를 읽어 CSS가 무엇인지와 사용법을 배워보세요.</p>
</li>
<li><span>CSS 자습서</span>
<p>시작하는 완전한 초보자를 돕는 <a href="/ko/docs/CSS/Getting_Started" title="Getting Started">단계별 입문서</a>. 필요한 기초를 모두 제공합니다.</p>
</li>
<li><span>CSS 참고서</span>
<p>숙련된 개발자를 위한 <a href="/ko/docs/Web/CSS/Reference">전체 CSS 참고서</a>는 CSS의 모든 속성과 개념을 설명합니다.</p>
</li>
</ul>
<div class="row topicpage-table">
<div class="section">
<h2 class="Documentation" id="자습서">자습서</h2>
<dl>
<dt><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a></dt>
<dd>선택자, 속성, 규칙 작성, HTML에 CSS 적용하기, 길이와 색 등 단위 지정하기, 종속과 상속, 박스 모델, 디버깅 등 CSS의 작동 원리와 기본을 배웁니다.</dd>
<dt><a href="/ko/docs/Learn/CSS/Styling_text">텍스트 꾸미기</a></dt>
<dd>글꼴, 굵기, 기울이기, 줄 간격과 글자 간격, 그림자 등 텍스트 스타일의 기초를 논합니다. 사용자 설정 글꼴 적용, 목록과 링크 꾸미기로 마무리합니다.</dd>
<dt><a href="/ko/docs/Learn/CSS/Styling_boxes">박스 꾸미기</a></dt>
<dd>웹 페이지 레이아웃의 기초 중 하나인 박스 스타일을 살펴봅니다. 박스 모델에 대해 복습하고, 마진, 테두리, 패딩, 배경색, 이미지, 그림자, 필터 등 박스 레이아웃을 조절하는 법을 배웁니다.</dd>
<dt><a href="/ko/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a></dt>
<dd>텍스트를 꾸미고 박스를 변형하는 등 CSS 기초를 살펴보았으니, 이제 화면이나 서로에게 상대적인 위치에 올바르게 배치하는 법을 배웁니다. 필요한 전제조건은 다루었으니 각기 다른 디스플레이 설정, 플로팅과 포지션을 사용하는 전통적인 레이아웃법 및 플렉스박스 등 새로운 방법 등 더 깊은 영역을 배웁니다.</dd>
</dl>
</div>
<div class="section">
<h2 id="참고서">참고서</h2>
<ul>
<li><a href="/ko/docs/Web/CSS/Reference">CSS 참고서</a>: 숙련된 웹 개발자를 위해 CSS의 모든 속성과 개념을 설명합니다.</li>
<li>CSS 핵심 개념
<ul>
<li><a href="/ko/docs/Web/CSS/Syntax">언어 구문과 형태</a></li>
<li><a href="/ko/docs/Web/CSS/Specificity">명시도</a>, <a href="/ko/docs/Web/CSS/inheritance">상속</a>, <a href="/ko/docs/Web/CSS/Cascade">종속</a></li>
<li><a href="/ko/docs/Web/CSS/CSS_Values_and_Units">CSS 단위와 값</a></li>
<li><a href="/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">박스 모델</a>과 <a href="/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 상쇄</a></li>
<li><a href="/ko/docs/Web/CSS/All_About_The_Containing_Block">컨테이닝 블록</a></li>
<li><a href="/ko/docs/Web/CSS/Understanding_z-index/The_stacking_context">쌓임 맥락</a>과 <a href="/ko/docs/Web/Guide/CSS/Block_formatting_context">블록 서식 맥락</a></li>
<li><a href="/ko/docs/Web/CSS/initial_value">초기값</a>, <a href="/ko/docs/Web/CSS/computed_value">계산값</a>, <a href="/ko/docs/Web/CSS/used_value">사용값</a>, <a href="/ko/docs/Web/CSS/actual_value">실제값</a></li>
<li><a href="/ko/docs/Web/CSS/Shorthand_properties">CSS 단축 속성</a></li>
<li><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS 플렉스 박스 레이아웃</a></li>
<li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout">CSS 그리드 레이아웃</a></li>
<li><a href="/ko/docs/Web/CSS/Media_Queries">미디어 쿼리</a></li>
<li><a href="/ko/docs/Web/CSS/animation">애니메이션</a></li>
</ul>
</li>
</ul>
<h2 id="쿡북">쿡북</h2>
<p><a href="/ko/docs/Web/CSS/Layout_cookbook">CSS 레이아웃 쿡북</a>은 여러분의 웹 사이트에서도 구현해야 할 수 있는, 흔히 쓰이는 레이아웃 패턴을 모아놓은 문서입니다. 프로젝트의 시작 코드는 물론이고, 레이아웃 명세를 사용하는 각기 다른 방법과 개발자로서 고를 수 있는 선택지를 제공합니다.</p>
<h2 class="Tools" id="CSS_개발_도구">CSS 개발 도구</h2>
<ul>
<li>CSS가 유효한지 검사하는 <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation 서비스</a>. 매우 유용한 디버깅 도구입니다.</li>
<li><a href="/ko/docs/Tools">Firefox 개발자 도구</a>는 <a href="/ko/docs/Tools/Page_Inspector">검사기</a>와 <a href="/ko/docs/Tools/Style_Editor">스타일 편집기</a> 도구를 통해 페이지의 실시간 CSS 보기와 편집을 허용합니다.</li>
<li>Firefox 전용 <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">웹 개발자 확장</a>도 특정 사이트를 주시해 CSS를 추적하고 실시간 편집을 가능케 합니다.</li>
<li><a href="/ko/docs/Web/CSS/Tools">기타 CSS 도구.</a></li>
</ul>
</div>
</div>
</section>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="/ko/docs/Web/Demos_of_open_web_technologies#CSS">CSS 데모</a>: 최신 CSS 기술을 사용한 데모를 탐색하며 영감을 얻어보세요.</li>
<li>흔히 CSS를 적용하는 웹 언어: <a href="/ko/docs/HTML">HTML</a>, <a href="/ko/docs/SVG">SVG</a>, <a href="/ko/docs/Glossary/XHTML">XHTML</a>, <a href="/ko/docs/Web/XML/XML_Introduction">XML</a>.</li>
<li>CSS를 광범위하게 사용하는 Mozilla 기술: <a href="/ko/docs/Mozilla/Firefox">Firefox</a>, <a href="/ko/docs/Mozilla/Thunderbird">Thunderbird</a> <a href="/ko/docs/Mozilla/Add-ons">확장기능</a>과 <a href="/ko/docs/Mozilla/Add-ons/Themes">테마</a>.</li>
<li><a href="https://stackoverflow.com/questions/tagged/css">Stack Overflow의 CSS 질문</a></li>
</ul>
|
