Diff for "CSS" - BioHackersNet

Differences between revisions 15 and 16

CascadingStyleSheet

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

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

TableOfContents

사용법

입력방법

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

예를 들어 다음은 H1테그를 다음의 스타일이 적용되도록 한다.

H1{font size: 24pt; color : blue}

다음은 H1,H2,H3을 모드 같은 스타일로 한다.

H1,H2,H3{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;
}

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">

인쇄스타일지정

media속성을 지정한다.

<link rel="stylesheet" type="text/css" media="print" href="print.css">
or
<style type="text/css">
    @import url("screen.css") screen;
    @import url("print.css") print;
</style>

대개, content만 프린트하고 싶어하므로,

body {
    font-family: "Times New Roman", serif;
    font-size: 12pt;
}
#nav, #sidebar, #search {
    display: none;
}
#content a:link:after, #content a:visited:after {
    content: " (" attr(href) ") ";
}

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 부터 시계방향으로. 두값을 지정하면 상하, 좌우

-  ⇤ ← Revision 15 as of 2006-04-07 11:33:24 → 
  Size: 4043
  Editor: 211
  Comment:
+   ← Revision 16 as of 2006-04-07 11:43:16 → ⇥
  Size: 4014
  Editor: 211
  Comment:
-Deletions are marked like this.
+Additions are marked like this.
 Line 55:
-<![CDATA[
@import "another.css";
+<!--
-Line 59:
+Line 58:
-]]>
+-->