CSS1 - 1. 기본개념 General Web2008/11/30 23:42
작성일 : 2006년 12월 31일
옮긴일 : 2008년 12월 21일
전에 네이버 블로그에 있던 자료를 옮겨 왔습니다.
Cascading Style Sheets
- CSS는 웹 문서에 스타일을 추가하기 위한 간단한 메커니즘이다.
CSS1
- Cascading Style Sheet 레벨1을 정의.
1. “learning CSS” 에 사용자를 위한 메일링 리스트, 책, 교육서 등이 있다.
2. Web style sheets page에 스타일쉬트를 위한 배경 정보가 있다.
1. 기본개념
H1{ color: blue }
- 단일 CSS Rule.
- 선택자(H1)과 선언(color:blue)로 구성됨.
- 선언의 경우 속성(color)과 값(blue)로 구성됨.
선택자(Selector)는 HTML 문서와 스타일 쉬트를 연결함, 모든 HTML Element는 Selector가 될 수 있다.
스타일 쉬트 예)
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>CSS 스터디</title>
<link rel="Stylesheet" type="text/css" href="http://style.com/cool" title="Cool" />
<style type="text/css">
@import url(http://style.com/basic);
H1{ color: blue }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<H1>Head Line is blue</H1>
<P Style="color:green">While the paragraph is green.</P>
</div>
</form>
</body>
</html>
(스타일 쉬트와 결합하는 방법)
1. Link Element를 이용하여 외부 스타일 쉬트와 연결
2. HEAD Element 내에 STYLE Element를 지정
3. CSS @import 기술로 스타일 쉬트 도입
1.2 그룹으로 묶기
스타일 쉬트의 크기를 줄이기 위해 선택자를 콤마로 분리하여 그룹으로 묶어서 관리할 수 있음.
H1, H2, H3 { font-family: helvetica }
다음과 같은 방법으로도 가능
H1{
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvate;
font-variant: normal;
font-style: normal;
}
1.3 Inherits
- 디폴터 문서를 정의하기 위한 방법
코드 예)
BODY{ color: black; background: url(texture.gif) white; }
- 이미지가 없으면, 배경색이 백색으로 됨.
일부 스타일의 속성들은 parent element로 부터 child element로 전달되지 않는다.
P{ font-size:10pt } or p { line-height: 120% }
1.4 선택자와 클래스
- element에 대한 점진적인 제어를 향상시키기 위해 'CLASS' 라는 새로운 어트리뷰트가 있음.
- Body element내의 모든 element들은 class화 될 수 있고 class는 스타일쉬트에 지정될 수 있음.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>제목 없음</title>
<style>
Body
{
color: green; background: url("150989main_image_feature_598_ys_full.jpg") white;
}
H1.cls
{
font-size:20pt; color:#00FF00
}
</style>
</head>
<body>
<h1 class="cls">녹색을 표현하는 방법</h1>
</body>
</html>
전달받은 Rule들은 class화된 element에 적용된다. class들은 selector들을 생략하고 사용할 수 있다. 예를 들어서 다음과 같은 표현이 가능하다.
예) .cls{ font-color: green }
selector마다 하나의 클래스만 지정하는 것도 가능하다.
1.5 ID as Selector
- 아이디를 사용할 경우 '#'으로 시작한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>제목 없음</title>
<style>
Body
{
color: green; background: url("150989main_image_feature_598_ys_full.jpg") white;
}
H1.cls
{
font-size:20pt; color:#00FF00
}
#z98y { letter-spacing: 0.3em } // 아이디만 판별
H1#z98y{ letter-spacing: 0.5em } // 엘리먼트(H1)과 아이디(z98y) 모두 판별
</style>
</head>
<body>
<h1 class="cls">녹색을 표현하는 방법</h1>
<p id="z08y">Wide Text</p>
</body>
</html>
스타일 쉬트는 문서의 구조에 잘 맞게끔 설계되어 있으므로 아이디만 가지고 판별하는 방법은 피하는게 좋다.
1.6 복합 선택자
- H1{ color: blue }, EM{ color: red } or H1 EM{ color: red }
- 위에서 가장 뒤에 나오는 선택자를 복합 선택자라고 한다.
- 복합 선택자는 빈 칸을 기준으로 구분하여 지정
- 다음과 같은 조합으로도 검정하는 것이 가능하다.
코드 예1)
DIV P { font: small sans-serif }
.reddish H1 { color: red }
#x78y CODE { background: blue }
DIV.sidenote H1 { font-size: large }
코드 예2)
H1 B, H2 B, H1 EM, H2 EM { color: red }
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
1.7 Comment
EM{ color: red } /* red, 적색 */
'General Web' 카테고리의 다른 글
| 사용자 인터페이스 디자인에 활용되는 10가지 유용한 기술 (0) | 2008/12/17 |
|---|---|
| Basic CSS syntax (0) | 2008/11/30 |
| CSS1 - 1. 기본개념 (0) | 2008/11/30 |
| W3C 표준 DOM (0) | 2008/11/30 |
| [HTML] Box Model (0) | 2008/08/06 |
| 2. xml 문서의 생성과 CSS를 이용한 XML 문서 출력 (0) | 2008/04/11 |
