728x90
8장. CSS 시작하기
<link : 외부 정보와 링크로 연결하기 위해 link 엘리먼트 사용
type="text/css" : 정보의 유형. 스타일시트 css
rel : XHTML 파일과 연결하려고하는 대상 사이의 관계. 스타일시트 "stylesheet"
href : 해당 스타일시트 파일 위치.
/> : 빈 엘리멘트.
h1 {
<link type="text/css" rel="stylesheet" href="lounge.css" />
type="text/css" : 정보의 유형. 스타일시트 css
rel : XHTML 파일과 연결하려고하는 대상 사이의 관계. 스타일시트 "stylesheet"
href : 해당 스타일시트 파일 위치.
/> : 빈 엘리멘트.
h1 {
color: gray;
}
-> h1 : 선택자(selector). <h1> 엘리멘트
h1, h2 {
color: gray;
}
p {
font-family: sans-serif;
}
- 상속
<html> - <body> 에 <h1> 엘리먼트와 <p> 엘리먼트가 있을때, <p> 엘리멘트에 스타일을 지정하면 <p> 엘리먼트의 자식 엘리먼트들도 동일한 스타일을 상속받는다.(자식 엘리먼트가 font-family 속성을 가지고 있을 경우에만 해당)
- 상속의 재정의(overriding)
}
em {
font-family: serif;
}
em 엘리먼트는 body 로부터 상속받은 font-family 속성을 재정의하기 위해, serif 로 설정.
- 클래스
p.greentea {
color: green;
}
->
p : 선택자
. : 클래스를 명시
greentea : 클래스이름
10장. 박스모델
- id 속성
#footer {
color: red;
}
-> "footer" id 를 가진 임의의 엘리멘트. id 선택자는 한 페이지에서 오직 하나의 엘리먼트와 일치해야 한다.
11장. div와 span 엘리먼트
}
-> h1 : 선택자(selector). <h1> 엘리멘트
h1, h2 {
color: gray;
}
p {
font-family: sans-serif;
}
- 상속
<html> - <body> 에 <h1> 엘리먼트와 <p> 엘리먼트가 있을때, <p> 엘리멘트에 스타일을 지정하면 <p> 엘리먼트의 자식 엘리먼트들도 동일한 스타일을 상속받는다.(자식 엘리먼트가 font-family 속성을 가지고 있을 경우에만 해당)
- 상속의 재정의(overriding)
body {
font-family: sans-serif;
}
h1, h2 {
}
em {
font-family: serif;
}
em 엘리먼트는 body 로부터 상속받은 font-family 속성을 재정의하기 위해, serif 로 설정.
- 클래스
p.greentea {
color: green;
}
->
p : 선택자
. : 클래스를 명시
greentea : 클래스이름
<html>
<p class="greentea">
<img src="../img/... />
....
</html>
10장. 박스모델
- id 속성
#footer {
color: red;
}
-> "footer" id 를 가진 임의의 엘리멘트. id 선택자는 한 페이지에서 오직 하나의 엘리먼트와 일치해야 한다.
<p id="footer">Please steal this page, it isn't copyrighted in any way</p>
11장. div와 span 엘리먼트
'Engineering > Etc' 카테고리의 다른 글
| Windows XP 에서 필요없는 하위 디렉토리/파일 삭제 (0) | 2012.01.26 |
|---|---|
| centos 64-bit 머신에서 32-bit binary 실행 (0) | 2012.01.18 |
| CD/DVD 굽기 프로그램(CD/DVD Burning 무료 프로그램들 (0) | 2011.09.17 |
| unix(linux) 에서 date 를 unixtime 형태로 변환 (0) | 2011.07.27 |
| vim 에서 UTF-8 지원 (0) | 2011.07.26 |