CascadingStyleSheet

http://www.w3.org/Style/CSS/

[[HTML]]문서의 다양한 레이아웃과 꾸미기를 가능하게 한 StyleSheet. 최근 WebDesign의 필수요소

||<<TableOfContents>>||

== 사용법 ==
=== 입력방법 ===

기본적으로 다음의 서식으로 입력된다.
{{|
SELECTOR {속성 : 값}
|}}

예를 들어 다음은 H1테그를 다음의 스타일이 적용되도록 한다.
{{{
h1 {
    font-size: 24pt; 
    color: blue;
}
}}}

다음은 H1,H2,H3을 모드 같은 스타일로 한다.
{{{
h1, h2, h33 {
    font-size: 24pt; 
    color: blue;
}
}}}

특정한 class 를 지정한 테그에만 적용할 수도 있다.
{{{
.myclass {
    font-size: 24pt; 
    color: blue;
}
}}}

특정한 id를 지정한 테그에만 적용할 수도 있다.
{{{
#myid { 
    font-size: 24pt; 
    color: blue;
}
}}}

링크부분에 대한 스타일설정
{{{
a:link {
    color: blue;
}
a:visited {
    color: green;
}
a:active {
    color: black;
}
a:hover {
    color: yellow;
}
}}}

일부부분에 대한 설정 (div로 감싸진 영역 : <div class="aaa"></div>)
{{{
div.aaa table {
    background-color:blue;
}
}}}

웹폰트 사용
{{{
@font-face {font-family:나눔고딕; src:url(http://pds10.egloos.com/pds/200905/30/26/nanumgodic.eot);}
@font-face {font-family:나눔명조; src:url(http://pds10.egloos.com/pds/200905/30/26/nanummyungjo.eot);}
}}}

=== CSS 삽입 ===
{{{
<style type="text/css">
<!--
.warning {
    color: #ff0000;
} /*주의는 빨간색으로 */
#special {
    font-weight: bold;
} /*여기는 굵게 */
-->
</style>
}}}
다른 파일을 부를경우
{{{
<link rel="stylesheet" href="default.css" type="text/css">
}}}

최신 CSS를 지원하지 않는 웹브라우저를 위해. (그리고, 주요내용은 main에, 특이 내용은 custom에 기입하기)
{{{
<style type="text/css">
    @import "master.css"
    @import "custom.css"
</style>
}}}

alternate stylesheet사용하기. (JavaScript등으로 화면에 적용하는 CSS를 그때그때 바꿀 수 있다. [[http://www.alistapart.com/articles/alternate|관련정보]])
{{{
<link rel="stylesheet" type="text/css" href="default.css" title="default">
<link rel="alternate stylesheet" type="text/css" href="large.css" title="large">
<link rel="alternate stylesheet" type="text/css" href="larger.css" title="larger">
}}}


=== CSS 레이아웃 ===
[HTML]은 다음처럼 작성
{{{
<div id="wrapper">
    <div id="head">상단영역</div>
    <div id="sub">좌측서브메뉴영역</div>
    <div id="body">본문영역</div>
    <div id="foot">하단영역</div>
</div>
}}}
그리고, CSS는 다음처럼.
{{{
#wrapper {
    width: 802px;
}
#head {
    height: 100px;
    border-bottom: 2px solid #ddd;
#sub {
    width: 200px;
    height: 300px;
    float: left;
}
#body {
    float: left;
    width: 600px;
    height: 450px;
    border-left: 2px solid #ddd;
}
#foot {
    clear: both;
    height: 100px;
    border-top: 2px solid #ddd;
}
}}}

== 몇가지 팁 ==
 * 자주 등장하는 padding설정. 하나의 값을 지정하면 네면 모두. 네값을 모두 지정하면 top 부터 시계방향으로. 두값을 지정하면 상하, 좌우
 * CssCrossBrowserIssue
 * CssPrint
 * input box 의 한글기본입력 {{{style="ime-mode:auto;"}}}

== 관련책 ==
 1. WebStandardsSolutions
 1. CssMastery

== 관련정보 ==
 * [[http://outvoy.com/archives/2004/09/30/48/|CSS 테크닉 문서 모음]]
 * [[http://www.csszengarden.com/tr/korean|CSS 로 변화되는 문서모양보기]]
 * [[http://ilmol.com/wp/2005/06/09/25/|테이블은 이제 쉬어야 할때]]. 웹페이지 레이아웃은 div 를 사용해야한다고.
 * [[http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html|페이지 레이아웃 예제]]
 * [[http://www.cssplay.co.uk/menu/index.html|CSS Play]]
 * [[http://forum.standardmag.org/|CSS design korea]]
 * [[attachment:css.chm]] : CSS 사전 도움말 파일
 * [[http://www.w3schools.com/css/|CSS Tutorial]]
 * [[http://www.mycelly.com/|CSS 를 사용한 깔끔한 사이트 레이아웃 모음]]