<< Cascading Style Sheet(계단형 스타일 시트) >>
계단식 폭포에 물이 흐르듯 하나의 HTML문서에 여러 개의 스타일 시트를
정의할 수 있기 때문이며, 여러 개의 스타일 시트는 역순으로 적용.
(가장 나중에 만들어진 스타일시트가 적용됨)
** 문서의 외형을 구체적으로 명시하기 위한 문장의 집합
1.웹 페이지의 외형을 제어하기 위한 언어
2.웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그 에 따라 별도의
스타일 정보를 정의하여 종류별로 일괄적인 스타일 적용
3.웹 페이지의 구성 요소의 위치 자유롭게 지정
** 스타일 시트의 기능과 장점
1.웹 페이지 구성 요소에 크기, 색깔 등의 스타일을 일괄적으로 적용
2.글자 간격, 문단 간격, 위치 등 HTML 태그로는 제어할 수 없는
부분을 제어.
3.문서의 구조와 스타일의 분리
4.스타일의 변경과 웹 페이지의 일관성 유지가 용이
CSS 삽입
•내부 스타일 시트
•html 문서의 <head>태그 사이에 <style> 이라는 태그를 사용하여 선언 하는 방법
<head>
<style type="text/css">
body {font-family:굴림; font-size:20px;}
</style>
</head>
•외부 스타일 시트
•스타일 시트의 내용을 담고 있는 파일을 따로 분리하여 사용
•Linked Style Sheet
<LINK rel=stylesheet type=text/css href="스트일 시트 문서">
• Import!! Style Sheet <br />
<STYLE type=text/css><br />
@import!! url("스타일 시트 문서");<br />
</STYLE>
•인라인 스타일 시트
•html tag의 속성으로 지정
<P style="BACKGROUND-COLOR: blue; WIDTH: 500px; HEIGHT: 200px">인라인타입</P>
* 스타일 시트의 상속과 우선순위
1. 스타일 시트의 상속 (inherit)
- 일반적인 상식선에서 상위의 속성을 하위 레벨의 엘리먼트가 상속을 받는다.
- 여백(margin), 패딩(padding), 배경 이미지(background), 테두리(border) 상속이 되지 않는다
ex) <p><div></div></p>와 같은 구조의 태그에서
p{color:red;padding:20px;} 을 주면
div에는 color값는 상속이 되지만 padding은 상속되지 않는다
2. 스타일 시트의 우선순위
1) !important
2) inline stylesheet
3) id
4) class
5) html 엘리먼트
6) 상속받은 스타일
* 같은 레벨에서는 나중에 선언된 것이 우선 순위를 갖는다.
* CSS의 주요속성
font-style:italic
font-weight:bold
font: italic bold 12pt/15pt 바탕체
font-size:1px(또는in, cm, mm, pt, pc, em, ex, px, %)
word-spacing:20px
letter-spacing:10px
line-height:40pt
color:red(또는#핵사코드)
background-image:url(image\back1.gif)
background-color:red
background-image:url(image/back1.gif)
background-repeat:repeat(또는 no-repeat, repeat-y, repeat-x)
background-attachment:fixed
background-position:70% 30%
background:url(image/icon1.gif) no-repeat fixed center center(속성연결지정)
text-indent:30px
text-align:center
text-decoration:underline(또는overline, line-through}
list-style-type:circle(또는disc, square, decimal, lower-roman, lower-alpha, upper-alpha)
list-style-image:url(image/icon2.gif)
list-style-position:inside(또는outside)
border-style:dotted, dashed, solid, double, groove, ridge, inset, outset)
border-color:blue
border-top-width:thin
border-right-width:medium
border-bottom-width:thick
border-left-width:10px;
border-width:thick thin(좌우, 상하)
border-width:thick thin medium thin(시계방향)
border-width:10px(전체)
border-color:red
border: 10px dotted #CC6666;(단일값연속지정)
margin:40px 10pt 40px 10pt
padding:40px 10pt 40px 10pt
white-space:nowrap
* 박스모델
마진, 테두리와 패딩은 왼쪽, 오른쪽, 맨위과 바닥 부분들로 나뉘어 질 수 있다
(예: 도표에서, 왼쪽 마진(margin)은 "LM", 오른쪽 패딩(padding)은 "RP",
맨위 테두리(border)는 "TB", 등으로).
각 네 지역들(내용, 패딩, 테두리와 마진)의 주변으로 구분되는 부분을 모서리("edge")라 부르고,
각 박스는 네개의 모서리(edge) 들을 갖는다:
내용 모서리(content edge) 또는 내부 모서리(inner edge)
그 엘레멘트의 내용의 표현의 주위를 둘러 싼다.
패딩 모서리(padding edge) 박스 패딩 주위를 둘러 싼다.
만일 패딩이 0의 너비를 가지면, 그 패딩 모서리는 내용 모서리와 같다.
박스의 패딩 모서리는, 박스에 의하여 형성된,
용기블럭(containing block)의 모서리를 정의한다.
테두리 모서리(border edge) 박스 테두리의 주위를 둘러 싼다.
만일 테두리가 0의 너비를 가지면, 테두리 모서리는 그 패딩 모서리와 같다.
마진 모서리(margin edge) 또는 바깥쪽 모서리(outer edge) 박스 마진의 주위를 둘러 싼다.
만일 마진이 0의 너비를 가지면,
마진 모서리는 그 테두리 모서리와 같다.
각 모서리는 왼쪽, 오른쪽, 맨위, 바닥 모서리로 나눌 수 있다.
박스의 내용 지역에 대한 크기인 내용 너비와 내용 높이는 여러가지 요인에 따라 다르다:
엘레멘트가 생성하는 박스의 'width' 또는 'height' 속성을 설정하는가,
그 박스가 텍스트 또는 다른 박스를 포함하는가,
그 박스가 테이블(table)인가, 등 박스 너비와 높이들은 보이는 양식화 모델 세부사항에서 다뤘다.
박스 너비는 왼쪽과 오른쪽 마진, 테두리, 패딩과 내용 너비들의 합계로 주어진다.
박스 높이는 왼쪽과 오른쪽 마진, 테두리, 패딩과 내용 높이들의 합계로 주어진다.
박스에서 여러 지역의 배경 스타일은 다음과 같이 결정된다:
내용 지역: 엘레멘트의 'background' 속성으로 생성.
패딩 지역: 엘레멘트의 'background' 속성으로 생성.
테두리 지역: 엘레멘트의 테두리 속성으로 생성.
마진 지역: 마진들은 항상 투명하다.
•html 문서의 태그 사이에
계단식 폭포에 물이 흐르듯 하나의 HTML문서에 여러 개의 스타일 시트를
정의할 수 있기 때문이며, 여러 개의 스타일 시트는 역순으로 적용.
(가장 나중에 만들어진 스타일시트가 적용됨)
** 문서의 외형을 구체적으로 명시하기 위한 문장의 집합
1.웹 페이지의 외형을 제어하기 위한 언어
2.웹 페이지의 내용에 하나하나 스타일을 지정하지 않고 태그 에 따라 별도의
스타일 정보를 정의하여 종류별로 일괄적인 스타일 적용
3.웹 페이지의 구성 요소의 위치 자유롭게 지정
** 스타일 시트의 기능과 장점
1.웹 페이지 구성 요소에 크기, 색깔 등의 스타일을 일괄적으로 적용
2.글자 간격, 문단 간격, 위치 등 HTML 태그로는 제어할 수 없는
부분을 제어.
3.문서의 구조와 스타일의 분리
4.스타일의 변경과 웹 페이지의 일관성 유지가 용이
CSS 삽입
•내부 스타일 시트
•html 문서의 <head>태그 사이에 <style> 이라는 태그를 사용하여 선언 하는 방법
<head>
<style type="text/css">
body {font-family:굴림; font-size:20px;}
</style>
</head>
•외부 스타일 시트
•스타일 시트의 내용을 담고 있는 파일을 따로 분리하여 사용
•Linked Style Sheet
<LINK rel=stylesheet type=text/css href="스트일 시트 문서">
• Import!! Style Sheet <br />
<STYLE type=text/css><br />
@import!! url("스타일 시트 문서");<br />
</STYLE>
•인라인 스타일 시트
•html tag의 속성으로 지정
<P style="BACKGROUND-COLOR: blue; WIDTH: 500px; HEIGHT: 200px">인라인타입</P>
* 스타일 시트의 상속과 우선순위
1. 스타일 시트의 상속 (inherit)
- 일반적인 상식선에서 상위의 속성을 하위 레벨의 엘리먼트가 상속을 받는다.
- 여백(margin), 패딩(padding), 배경 이미지(background), 테두리(border) 상속이 되지 않는다
ex) <p><div></div></p>와 같은 구조의 태그에서
p{color:red;padding:20px;} 을 주면
div에는 color값는 상속이 되지만 padding은 상속되지 않는다
2. 스타일 시트의 우선순위
1) !important
2) inline stylesheet
3) id
4) class
5) html 엘리먼트
6) 상속받은 스타일
* 같은 레벨에서는 나중에 선언된 것이 우선 순위를 갖는다.
* CSS의 주요속성
font-style:italic
font-weight:bold
font: italic bold 12pt/15pt 바탕체
font-size:1px(또는in, cm, mm, pt, pc, em, ex, px, %)
word-spacing:20px
letter-spacing:10px
line-height:40pt
color:red(또는#핵사코드)
background-image:url(image\back1.gif)
background-color:red
background-image:url(image/back1.gif)
background-repeat:repeat(또는 no-repeat, repeat-y, repeat-x)
background-attachment:fixed
background-position:70% 30%
background:url(image/icon1.gif) no-repeat fixed center center(속성연결지정)
text-indent:30px
text-align:center
text-decoration:underline(또는overline, line-through}
list-style-type:circle(또는disc, square, decimal, lower-roman, lower-alpha, upper-alpha)
list-style-image:url(image/icon2.gif)
list-style-position:inside(또는outside)
border-style:dotted, dashed, solid, double, groove, ridge, inset, outset)
border-color:blue
border-top-width:thin
border-right-width:medium
border-bottom-width:thick
border-left-width:10px;
border-width:thick thin(좌우, 상하)
border-width:thick thin medium thin(시계방향)
border-width:10px(전체)
border-color:red
border: 10px dotted #CC6666;(단일값연속지정)
margin:40px 10pt 40px 10pt
padding:40px 10pt 40px 10pt
white-space:nowrap
* 박스모델
마진, 테두리와 패딩은 왼쪽, 오른쪽, 맨위과 바닥 부분들로 나뉘어 질 수 있다
(예: 도표에서, 왼쪽 마진(margin)은 "LM", 오른쪽 패딩(padding)은 "RP",
맨위 테두리(border)는 "TB", 등으로).
각 네 지역들(내용, 패딩, 테두리와 마진)의 주변으로 구분되는 부분을 모서리("edge")라 부르고,
각 박스는 네개의 모서리(edge) 들을 갖는다:
내용 모서리(content edge) 또는 내부 모서리(inner edge)
그 엘레멘트의 내용의 표현의 주위를 둘러 싼다.
패딩 모서리(padding edge) 박스 패딩 주위를 둘러 싼다.
만일 패딩이 0의 너비를 가지면, 그 패딩 모서리는 내용 모서리와 같다.
박스의 패딩 모서리는, 박스에 의하여 형성된,
용기블럭(containing block)의 모서리를 정의한다.
테두리 모서리(border edge) 박스 테두리의 주위를 둘러 싼다.
만일 테두리가 0의 너비를 가지면, 테두리 모서리는 그 패딩 모서리와 같다.
마진 모서리(margin edge) 또는 바깥쪽 모서리(outer edge) 박스 마진의 주위를 둘러 싼다.
만일 마진이 0의 너비를 가지면,
마진 모서리는 그 테두리 모서리와 같다.
각 모서리는 왼쪽, 오른쪽, 맨위, 바닥 모서리로 나눌 수 있다.
박스의 내용 지역에 대한 크기인 내용 너비와 내용 높이는 여러가지 요인에 따라 다르다:
엘레멘트가 생성하는 박스의 'width' 또는 'height' 속성을 설정하는가,
그 박스가 텍스트 또는 다른 박스를 포함하는가,
그 박스가 테이블(table)인가, 등 박스 너비와 높이들은 보이는 양식화 모델 세부사항에서 다뤘다.
박스 너비는 왼쪽과 오른쪽 마진, 테두리, 패딩과 내용 너비들의 합계로 주어진다.
박스 높이는 왼쪽과 오른쪽 마진, 테두리, 패딩과 내용 높이들의 합계로 주어진다.
박스에서 여러 지역의 배경 스타일은 다음과 같이 결정된다:
내용 지역: 엘레멘트의 'background' 속성으로 생성.
패딩 지역: 엘레멘트의 'background' 속성으로 생성.
테두리 지역: 엘레멘트의 테두리 속성으로 생성.
마진 지역: 마진들은 항상 투명하다.
•html 문서의 태그 사이에
'정보 > 꾸미기' 카테고리의 다른 글
| Element (0) | 2011.07.01 |
|---|---|
| CSS Layout (0) | 2011.07.01 |
| 표 만들기 (0) | 2011.07.01 |
| srplayer Configuration (0) | 2011.06.28 |
| 글쓰기 Format (0) | 2011.06.28 |
