- CSS맛보기
- 셀렉터
- 캐스캐이딩
- 박스모델
- Box의 좌표지정
- Box 좀 더 세밀히 제어하기
- 글꼴과 관련된 속성들
- 텍스트 레이아웃 제어와 관련된 속성들
- 리스트
1. CSS 맛보기
1.1. CSS - Cascading Style Sheet
HTML은 운영체제나 사용하는 프로그램에 관계없이 누구나 같은 내용의 문서를 볼 수 있도록 하겠다는 취지에서 만들어졌다. 그러나, 웹문서가 인쇄 매체처럼 다양하고 화려해짐에 따라, 점차 전자출판의 성격을 띄게 되었고, HTML은 그 한계를 드러내고 있다. 여기서 한계라고 짚어볼 수 있는 부분들은 무엇보다도 레이아웃의 세밀한 제어, 그리고 배경과 문자열과의 배치 등을 꼽을 수 있다. 스타일시트를 사용하면 기존의 TABLE이나 FRAME에 의존하던 문서의 레이아웃을 보다 효과적으로 할 수 있고, 글자 크기나 글자체, 줄 간격, 배경 색상 등도 자유롭게 선택할 수 있다. 또한, 스타일을 정의해 놓고 여러 개의 문서에서 불러 쓸 수 있어, 일관된 외양을 요구하는 여러 개의 문서를 만들 때 매우 편리하다. 그러나 CSS의 단점도 상당부분 존재한다. 무엇보다도 대중적으로 널리 사용되고 있는 넷스케이프와 익스플로러에서 각기 다른 표준안을 채택하고 있다는 점이 가장 문제가 되는 점이다. 이점은 두 브라우저에서 달리 사용되는 부분에 대한 중복적인 코딩을 해야한다는 의미가 되며 웹디자이너들을 혼란에 빠뜨리는 이유가 된다. 또한 표준 권고안으로 제시된 부분에 대해서도 아직까지 지원이 안되는 기능들이 상당히 많은 문제점도 가지고 있다.
CSS는 현재 Level 2 버전이 나와있으며, 넷스케이프와 익스플로러 4.0 이상이 지원한다. HTML 4.0과 CSS, JavaScript 등을 함께 일컬어 Dynamic HTML이라고 부르기도 한다.
1.2. 간단한 예
앞에서 배운 HTML의 H3 요소에 이탤릭 효과와 글씨 색으로 녹색을 지정하기 위해서 HTML에서는 H3 요소에 일일이 다음과 같이 해 주어야 한다.
| |
<H3><I><FONT color=green>녹색 이탤릭</FONT></I></H3>
|
그러나 이러한 방식은 우리가 같은 효과를 주기 위해서는 매번 코딩할 때마다 같은 코드를 써주어야 한다는 의미가 된다. 앞에서 자바스크립트에서는 반복되는 부분을 함수로 처리하는 것을 본 적이 있다. 그렇다면 스타일을 지정할 경우에는 어떠한 방식으로 하면 될까.
다음과 같은 스타일시트를 사용하여 해결한다.
| |
H3 {font-style : italic; color : green}
|
위와 같이 한 번만 정의해 주면 H3 요소에는 모두 같은 속성을 적용시킬 수 있다.
1.3. 스타일시트의 구성 요소
HTML이 태그들의 모음이라면, 스타일시트는 프로퍼티(property)들의 모음이다.
위의 예에서 font-style이나 color가 속성(attribute)이 되고, italic과 green은 해
당 속성에 대한 값(value)이다. HTML의 속성은 정해진 요소에만 붙을 수 있지만, 스타일시트의 속성은 거의 모든 요소에 다 붙을 수 있다는 점이 다르다. 속성이 붙는 H3과 같은 요소를 스타일시트에서는 선택자(selector)라고 부른다.
다음과 같은 형식을 기억하면 된다.
| |
Select { Attribute : Value }
|
스타일시트에서의 주석은 /*와 */ 사이에 써 준다.
1.4. 스타일시트 삽입하기
HTML문서에서 스타일시트를 사용하는 방법은 다음의 세가지가 주로 사용된다.
1.4.1. 문서의 HEAD에 정의하기
| |
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
h3 {font-style : italic; color : green}
-->
</STYLE>
</HEAD>
<BODY>
<H3>이 문장은 원래의 H3 특성과 함께 녹색, 이탤릭체로 나타난다.</H3>
<H3>이 부분도 마찬가지이다.</H3>
</BODY>
</HTML>
|
| |  |
HEAD에 정의할 때는 STYLE 태그를 사용한다. type 속성은 반드시 함께 써 주어야 한다.
주석 표시는 스타일시트를 지원하지 않는 브라우저가 스타일을 무시하도록 하기 위한 것이다
(앞에서 자바스크립트의 경우와 연관지어 보자). 다시 한번 언급하지만 스타일을 정의하는 부분은 { } 안에 넣는다. 속성과 값은 콜론(:)으로 구분하고, 2개 이상의 속성을 쓸 때는 세미콜론(;)으로 구분한다.
HTML에서와 마찬가지로 대소문자나 빈칸은 구분하지 않는다.
1.4.2. style 속성 이용하기
| |
<HTML>
<HEAD>
</HEAD>
<BODY>
<H3 style="font-style : italic; color : green">
여기는 H3이면서 녹색이고 이탤릭체이다.</H3>
<P>
<H3>여기는 스타일 적용이 되지 않는다.</H3>
</BODY>
</HTML>
|
| |  |
특정한 요소에 한 번만 스타일을 적용할 때는 style 속성을 사용할 수 있다. 이 때는 HTML의 문법을 따르므로, style 뒤에 " " 표시를 하고 속성과 값을 써 준다. 속성과 값 사이에 콜론, 속성과 속성 사이에 세미콜론을 쓰는 것은 첫 번째와 같다.
1.4.3. 외부 스타일시트 연결하기
먼저 다음과 같은 내용의 파일을 만들고 style.css로 저장한다.
| |
h3 {font-style : italic; color : green}
|
HEAD 부분에 LINK 요소를 사용해 style.css 파일을 연결한다.
| |
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>
<H3>여기는 녹색이고 이탤릭체인 H3이다.</H3>
<P>
<H3>여기도 그렇다.</H3>
</BODY>
</HTML>
|
| |  |
rel은 연결하는 문서가 스타일시트 문서임을 말해준다. type은 스타일시트의 형식을 나타내고, href는 스타일시트 파일의 경로를 써 준다.
아무리 많은 문서를 만들어도 스타일은 style.css 파일에서 모두 정의해 주고, 문서들에는 LINK 요소만 넣어주면 된다. 수정을 할 때는 style.css 파일만을 고치면 된다. 앞으론 주로 이러한 방법을 자주 사용하기를 권한다.
1.5. 기호 설명
앞으로의 설명을 위해 반드시 알아두어야 할 기호들이다. 이러한 기호들은 이 글외에도 대부분의 컴퓨터 관련 서적에서 사용하고 있는 기호이므로 꼭 알아두도록 하자.
A | B : A 또는 B 중의 하나이다.
[ ] : 일반적인 의미의 괄호이다.
A {1,n} : A가 최소한 1번에서 최대한 n번 들어간다.
<A> : A 속성의 값이 들어간다.
A || B : A 또는 B 중의 하나, 또는 두 개가 다 들어갈 수 있다.
A* : A가 0번 이상 여러 번 나올 수 있다.
A? : A가 들어갈 수도 있고, 안 들어갈 수도 있다.
2. 셀렉터(Selector)
2.1. Type Selector
Type selector는 HTML 요소를 selector로 사용하는 것이다. HTML에서는 selector를
쓸 때 대소문자를 구분하지 않는다.
| |
H1 { font-family: Helvetica }
|
2.2. Group Selector
여러 개의 selector가 같은 속성을 사용할 때는 하나로 묶어서 쓸 수 있다. 아래의 두 예는 같은 뜻이다.
| |
H1 { font-family: Helvetica }
H2 { font-family: Helvetica }
H3 { font-family: Helvetica }
|
| |
H1, H2, H3 { font-family: Helvetica }
|
하나의 selector가 여러 개의 속성을 사용할 때는 속성들 사이에 세미콜론(;)을 써서 쓸 수 있다. 아래의 두 예는 같은 뜻이다.
| |
H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 { line-height: 14pt }
H1 { font-family: Helvetica }
H1 { font-variant: normal }
H1 { font-style: normal }
|
| |
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt;
font-family: Helvetica; font-variant: normal; font-style: normal; }
|
어떤 속성은 shorthand property라고 부르는 대표속성을 가지고 있어서, 위의 H1에 대한 예는 아래와 같이 더 간단하게 만들 수 있다.
| |
H1 { font : bold 12pt/14pt Helvetica }
|
2.3. Class attribute selector
Class 속성을 이용하면 여러 개의 요소를 그룹으로 묶어서 같은 스타일을 적용할 수 있다.
Class attribute selector를 쓸 때는 아래의 예와 같이 마침표(.)를 사용한다.
| |
.pastoral { color : green } /* class=pastoral 속성이 들어간 모든 요소에 적용 */
H1.red { color : red } /* class=red 속성이 들어간 H1 요소에 적용*/
...
...
<STRONG class = pastoral>녹색으로 나오겠지...</STRONG>
<BR>
<EM class = pastoral>여기도 녹색으로 나오겠지...</EM>
<H1 class = red>여기는 빨간색으로 나오겠지...</H1>
<H1>여기는 검은색일꺼야.</H1>
| | |  |
2.4. ID Attribute Selector
Id 속성은 class와 비슷하지만, 한 문서에서 같은 id는 하나만 존재해야 한다는 것이 다르다. Id attribute selector를 쓸 때는 #표시를 사용한다. Id 속성을 쓰면 하이퍼링크의 대상이 될 수 있다는 점을 기억하자.
| |
H1#z98y { letter-spacing: 0.5em }
...
...
<H1 id=z98y>Wide text</H1>
| | |  |
2.5. Contextual selectors
"H1 안에 들어있는 EM 요소에만 파란색 글자를 주고 싶다"와 같이 특정 요소에 포함된 요소에만 스타일을 적용시키고자 할 때 contextual selector를 사용한다. 요소와 요소 사이읏� 빈칸을 주고 나란히 써 주면 된다. Class나 id와 함께 사용할 수도 있다.
| |
H1 EM { color : blue }
...
...
<H1>여기는 검은색</H1>
<EM>여기도 검은색</EM>
<H1>여기는 검다가 <EM>여기는 푸른색</EM> 다시 검은색</H1>
| | |  |
2.5. Pseudo-Elements and Pseudo-Classes
거짓 요소와 class는 보다 다양하게 스타일을 적용시키기 위해서 HTML 4.0에 존재하지 않는 요소를 만들어 낸 것을 말한다.
First-line pseudo-요소와 First-letter pseudo-요소 역시 제공된다고 하나 실제로
는 제대로 구현되지 않으므로 우리는 Anchor pseudo-classes에 대해서만 알아보도록 하자.
2.5.1. Anchor Pseudo-Classes : :link, :visited, :active
링크의 색이나 밑줄 등을 바꿀 때 사용한다. :link는 한 번도 클릭하지 않은 링크,
:visited는 가본 적이 있는 링크, :active는 클릭하는 순간의 링크를 말한다.
| |
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE type="text/css">
A:link { color: red } /* :link라고만 써도 된다. */
A:active { color: lime } /* :active라고만 써도 된다. */
A:visited { color: blue } /* :visited라고만 써도 된다. */
A:link, A:active, A:visited { text-decoration : none } /* 링크의 밑줄을 없앤다. */
</STYLE>
</HEAD>
<BODY>
<A href = "http://www.jinbo.net">진보네트워크</A>
</BODY>
</HTML>
| | |  |
A.external:link(class=external인 A의 링크)와 같이 클래스와 같이 쓸 수도 있고,
a.link나 a#link와 같이 link, active, visited를 클래스나 id로 사용할 수도 있다.
3. 캐스캐이딩(Cascading)
3.1. 캐스캐이딩과 캐스캐이딩 순서(Cascading Order)
cascade의 사전적 의미는 작은 폭포를 뜻한다. 그러나 지금 우리가 여기서 언급하는 캐스캐이딩은 이러한 사전적 의미와는 다소 다르다.
하나의 문서가 이미 내장하고 있는 스타일 정보가 있다고 하자. 만약 외부파일의 스타일이 이 문서에 적용이 되는 경우에 같은 요소에 대하여 서로 다른 스타일이 정의될 수 있다.
CSS2에서는 이럴 때 우선순위가 가장 큰 스타일시트를 적용할 수 있도록 하고 있다. 이것을 캐스캐이딩이라고 한다.
익스플로러 4.0같은 경우에는 사용자가 스타일을 정의할 수 있도록 하고 있는데, 브라우저 사용자가 정의해 놓은 스타일시트는 웹 문서 작성자의 스타일시트보다 비중이 낮다. 따라서, 이 경우에는 웹 문서 작성자의 스타일시트가 우선적으로 적용된다.
스타일을 정의할 때 뒤쪽에 !important를 붙여주면 모든 것에 우선하게 된다.
| |
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-variant: italic } /*font-variant만 중요도가 낮다.*/
|
순서대로 우선순위가 높다.
- id 속성을 쓰면 우선순위가 가장 높다.
- class 등 속성을 쓰면 우선순위가 높다.
- Selector로 사용한 요소의 수가 많으면 우선순위가 높다.
- STYLE 요소 안에 정의한 것보다 style 속성으로 정의한 것이 우선순위가 높다.
4. 박스 모델(Box Model)
4.1. Box Model
CSS의 가장 기본적인 가정은 모든 요소가 신문의 박스기사 형식으로 둘러 쌓여 있다는 것이다. 이것은 하나의 박스의 위치를 독자적으로 - 절대위치 또는 상대위치 - 결정할 수 있음과 동시에 박스와 박스 사이의 여백, 박스와 박스기사의 내용(Content) 사이의 여백, 그리고 박스의 테두리 등, 보다 세밀한 부분을 제어할 수 있다는 것을 의미한다. 물론 아직까지 익스플로러와 넷스케이프가 이러한 모든 기능을 제공하고 있지는 못하다. 그러나 표준 권고안으로 제시된 기능들을 살펴보며 이러한 개념들을 좀더 자세히 이해해 보기로 하자.박스기사라는 모델에 이용될 수 있는 HTML의 태그는 블록 요소였던 P, BLOCKQUOTE, DIV 등이다. 먼저 이들과 관련되어 여백을 좀더 세밀히 조정하는 속성들인 margin, border, padding 속성에 대해서 알아본다.
4.2. 외부여백(Margin) 속성
margin 속성은 문단의 테두리와 외부의 다른 요소와의 간격을 조절할 때 사용되는 속성이다.
margin-left, margin-right, margin-top, margin-bottom을 이용하여 각 요소의
margin 값을 각각 주거나 margin 속성 - 대표속성이다 - 을 이용하여 동시에 줄 수 있다.
속성은 다음과 같다.
| 속성 |
속성값 |
설명 |
| margin-left |
길이 | 퍼센트 | auto |
왼쪽 margin의 폭을 정한다. |
| margin-right |
길이 | 퍼센트 | auto |
오른쪽 margin의 폭을 정한다. |
| margin-top |
길이 | 퍼센트 | auto |
윗쪽 margin의 폭을 정한다. |
| margin-bottom |
길이 | 퍼센트 | auto |
아래쪽 margin의 폭을 정한다. |
| margin |
길이 | 퍼센트 | auto |
네 곳의 margin폭을 동시에 정한다. 순서는 top, right, bottom, left이다. 값을 하나만 쓰면 하나의 값이 네 곳에 모두 적용되고, 값을 둘 쓰면 위아래-왼쪽오른쪽의 순서로 적용된다. |
|
 길이 : 상대길이와 절대길이가 있다.
- 상대길이 : em(현재 글자의 크기), ex(현재 글자 중 x자의 크기), px(픽셀)
- 절대길이 : in, cm, mm, pt(포인트 : 1pt=1/72in), pc(피카 : 1pc=12pt)
퍼센트 : 부모가 되는(현재의 요소가 포함된) 요소의 폭을 기준으로 한다.
auto : 브라우저가 자동으로 정한다.
| |
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE type="text/css">
<body {margin: 2em}
</STYLE>
</HEAD>
<BODY>
CSS의 가장 기본적인 가정은 모든 요소가 신문의 박스기사 형식으로 둘러 쌓여 있다는 것이다. 이것은 하나의 박스의 위치를 독자적으로 - 절대위치 또는 상대위치 - 결정할 수 있음과 동시에 박스와 박스 사이의 여백, 박스와 박스기사의 내용(Content) 사이의 여백, 그리고 박스의 테두리 등, 보다 세밀한 부분을 제어할 수 있다는 것을 의미한다. 물론 아직까지 익스플로러와 넷스케이프가 이러한 모든 기능을 제공하고 있지는 못하다. 그러나 표준 권고안으로 제시된 기능들을 살펴보며 이러한 개념들을 좀더 자세히 이해해 보기로 하자.박스기사라는 모델에 이용될 수 있는 HTML의 태그는 블록 요소였던 P, BLOCKQUOTE, DIV 등이다. 먼저 이들과 관련되어 여백을 좀더 세밀히 조정하는 속성들인 margin, border, padding 속성에 대해서 알아본다.
</BODY>
</HTML>
| | |  |
☞ 하나의 요소가 다른 요소를 포함하고 있을 때 부모요소의 특성이 자식 요소에도
똑같이 적용되는 경우가 있다. 이를 상속(Inheritance)라고 한다. margin 속성의 경우
에는 P에 margin 값을 주었어도, P에 포함된 SPAN의 margin값에는 영향을 미치지
않는다는 뜻이다.
☞ margin과 같이 여러 개의 속성을 하나로 묶어서 쓰도록 한 속성을 대표속성(Shorthand property)이라고 한다. 대표속성에는 초기값이 없다.
| |
BODY { margin: 2em } /* 모든 margin이 2em */
BODY { margin: 1em 2em } /* top과 bottom은 1em, right과 left는 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em,
left=2em(right의 값을 그대로 가져옴) */
|
4.3. 내부여백(Padding) 속성
패딩 속성은 문단의 내용과 문단의 테두리 사이의 간격을 지정할 때 사용되는 속성이다. 폭을 지정하는 속성으로, padding-left, padding-right, padding-top, padding-bottom을 이용하면 4 곳의 패딩 값을 각각 줄 수 있고, padding 속성을 이용하면 4곳의 패딩 값을 동시에 줄 수 있다.
| 속성 |
속성값 |
설명 |
| padding-left |
길이 | 퍼센트 |
왼쪽 padding의 폭을 정한다. |
| padding-right |
길이 | 퍼센트 |
오른쪽 padding의 폭을 정한다. |
| padding-top |
길이 | 퍼센트 |
윗쪽 padding의 폭을 정한다. |
| padding-bottom |
길이 | 퍼센트 |
아래쪽 padding의 폭을 정한다. |
| padding |
길이 | 퍼센트 |
네 곳의padding폭을 동시에 정한다. 순서는 top, right, bottom, left이다. 값을 하나만 쓰면 하나의 값이 네 곳에 모두 적용되고, 값을 둘 쓰면 위아래-왼쪽오른쪽의 순서로 적용된다. 대표속성에는 초기값이 없다. |
|
| |
H1 { background: lime; padding: 1em 2em; }
/*H1의 배경색은 라임색이고, 상하 패딩 폭은 1em, 좌우 패딩 폭은 2em이다.*/
|
| |  |
4.4. 테두리(Border) 속성
테두리의 폭, 색, 모양을 지정하는 속성이다.
4.4.1. Border-width 관련 속성
| 속성 |
속성값 |
설명 |
| border-top-width |
thin | medium | thick | 길이 |
윗쪽 보더의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다.
모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 medium이다. |
| border-right-width |
thin | medium | thick | 길이 |
오른쪽 보더의 폭을 정한다. |
| border-bottom-width |
thin | medium | thick | 길이 |
아랫쪽 보더의 폭을 정한다. |
| border-left-width |
thin | medium | thick | 길이 |
왼쪽 보더의 폭을 정한다. |
| border-width |
thin | medium | thick | 길이 |
네 곳의 보더 폭을 동시에 정한다. 순서는 top, right, bottom, left이다.
대표속성에는 초기값이 없다. |
|
| |
H1 { border-width: thin } /* thin thin thin thin */
H2 { border-width: thin thick } /* thin thick thin thick */
H3 { border-width: thin thick medium } /* thin thick medium thick */
|
| | 
|
4.4.2. Border-color 관련 속성
| 속성 |
속성값 |
설명 |
| border-top-color |
색이름 | RGB code |
윗쪽 보더의 색을 정한다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 자신의 color 속성 또는 부모 요소의 color 속성의 값이다.
윈도우의 기본 16색인 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow는 이름을 그대로 쓸 수 있다. 이상 16색 외에도 orange, pink 등, 색 이름을 쓰면 그대로 나오는 것들이 더 있는데 브라우저에 따라서 지원되지 않을 수도 있으므로 주의해야 한다. RGB 값은 색생을 red, green, blue의 조합으로 나타내는 것으로 #뒤에 6자리의 숫자나 문자의 조합으로 만들어진다. RGB표를 참고한다. ->
RGB값참고페이지 |
| border-right-color |
색이름 | RGB code |
오른쪽 보더의 색을 정한다. |
| border-bottom-color |
색이름 | RGB code |
아랫쪽 보더의 색을 정한다. |
| border-left-color |
색이름 | RGB code |
왼쪽 보더의 색을 정한다. |
| border-color |
색이름 | RGB code |
네 곳의 보더 색깔을 동시에 정한다. 순서는 top, right, bottom, left이다.
대표속성에는 초기값이 없다. |
|
| |
H1 { border-color : black } /* black black black black */
H2 { border-color : black yellow } /* black yellow black yellow */
H3 { border-color : black yellow red } /* black yellow red yellow */
| | | 
|
4.4.3. Border-style 관련 속성
| 속성 |
속성값 |
설명 |
| border-top-style |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
윗쪽 테두리border의 모양을 정한다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 없다. |
| border-right-style |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
오른쪽 테두리border의 모양을 정한다. |
| border-bottom-style |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
아랫쪽 테두리border의 모양을 정한다. |
| border-left-style |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
왼쪽 테두리border의 모양을 정한다. |
| border-style |
none | dotted | dashed | solid | double | groove | ridge | inset | outset |
네 곳의 테두리border 모양을 동시에 정한다. 순서는 top, right, bottom, left이다.
대표속성에는 초기값이 없다. |
|
| |
span { border-style : dottted }
span.solid { border-style : solid }
span.dashed { border-style : dashed }
span.double { border-style : double }
span.groove { border-style : groove }
span.ridge { border-style : ridge }
span.inset { border-style : inset }
span.outset { border-style : outset }
| | | 
|
4.4.4. Border-width 관련 속성
| 속성 |
속성값 |
설명 |
| border-top |
border-top-width|| border-top-style || color |
윗쪽 테두리border의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다.
모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 각각의 속성의 초기값이다. |
| border-right |
border-right-width || border-right-style || color |
오른쪽 테두리border의 모양을 정한다. |
| border-bottom |
border-bottom-width || border-bottom-style || color |
아랫쪽 테두리border의 모양을 정한다. |
| border-left |
border-left-width || border-left-style || color |
왼쪽 테두리border의 모양을 정한다. |
| border-style |
border -width | border -style | color |
네 곳의 테두리border 모양을 동시에 정한다. 순서는 top, right, bottom, left이다.
대표속성에는 초기값이 없다. |
|
| |
P { border: solid red } /*테두리border 선은 굵은 선, 색은 빨강색.*/
|
다응의 그림을 보면서 지금까지 정리한 내용들을 확인해 보도록 하자.
5. Box의 좌표지정
CSS가 가정하고 박스 모델에서 또 하나의 중요한 기능은 바로 박스를 브라우저의 어느 곳에
배치할 수 있는가 이다. 우리가 배운 HTML에서는 문단의 겹침, 문단간격의 세밀한 조정 등
이 불가능했지만 CSS에서는 이러한 것들을 가능하게 해준다.
5.1. Position 속성
5.1.1. position : absolute | relative | static | fixed
모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 static이다.
- absolute
- relative
- static : normal flow에 따라 화면에 배열된다.
- fixed : 브라우저의 화면을 기준으로 고정된다. Background-attachment 속성을 참고하자.
5.1.2. Relative positioning
Block-level이나 inline layout에 의해 위치가 결정되면, 이 위치를 기준으로 box를
상하좌우로 이동시킬 수 있다. 이것을 상대위치지정(relative positioning)이라고 한
다. 이동시키는 정도는 top, left, bottom, right 속성으로 지정할 수 있다. Box의 위
치를 이동시킨다고 해서 다음에 나오는 형제자매 요소의 위치가 함께 이동되는 것은 아니다.
따라서, 상대적 배열을 이용하면, 요소 box들이 서로 겹쳐지는 효과를 낼 수 있다.
P안에 SPAN이 포함되는 경우, P는 SPAN의 부모(parent) 요소가 되고, SPAN은 P의 자식
(child) 요소가 된다. P 다음에 다른 P가 올 경우, 두 개의 P는 서로 형제자매 관계
(sibling)가 된다. P안에 있는 SPAN 안에 다시 EM이 포함된다면, P는 EM의 조상
(ancestor)이 되고, EM은 P의 후손(descendant)이 된다.
부모 요소가 상대적 배열에 의해 위치가 변경되면, 자식 요소는 변경된 위치를 기준으로 배열된다.
하나의 요소 box를 상대적으로 지정하려면, position 속성의 값을 relative로 주어야 한다.
5.2. Float, Clear 속성
5.2.1. float : left | right | none
float 속성은 보통 이미지에 많이 사용한다. 이미지를 왼쪽이나 오른쪽에 떠다니도록 하면, 이미지 다음에 나오는 문자열이 이미지를 둘러싸고 나오게 된다. HTML에서는 그림 옆에 문자열을 넣을 경우, 항상 한 줄만 나오고, 나머지는 그림 아래로 내려가게 된다.모든 요소에 적용되며, 상속되지 않는다.
초기값은 none이다.
5.2.2. clear : none | left | right | both
지정한 방향에는 떠다니는 box가 자리할 수 없음을 나타낸다. 즉, clear의 값을 both로 하면, 해당 요소의 단락 좌우에는 떠다니는 box가 올 수 없다. 따라서, 떠다니는 box의 다음 줄로 내려가게 된다.
모든 요소에 적용되며, 상속되지 않는다.
초기값은 none이다.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
IMG { float : left }
HR.clear { clear : both }
</STYLE>
<BODY>
<IMG src = "images/train.gif">
HTML에서는 이렇게 그림 다음에 글자를 쓰면 그림 옆에 한 줄 나오고,
나머지는 그림 아래로 내려가 버리는 것을 앞선 강좌에서 배우셨을 겁니다.
지금은 어떤가요?
clear 속성을 쓴 가로선은 그림 아래로 내려가구요.
<HR>
<HR class=clear>
<BODY>
</HTML>
|
| |  |
5.3. Absolute positioning
Absolute positioning은 기준박스에서 상하좌우로 위치를 이동시킨다. 기준 박스란 보통 브라우저를 의미하게 된다. 만약, 부모 요소가 absolute positioning에 의해 위치가 정해졌다면, 자식 요소에 absolute positioning을 적용할 때는 부모 요소의 box를 기준으로 위치를 잡게 된다.
Absolute positioning을 하게 되면 margin은 없어지고, padding과 border만 남게 된다.
| 속성 |
속성값 |
설명 |
| top |
길이 | 퍼센트 | auto |
브라우저 화면 윗쪽을 기준으로 얼마나 내려올 지를 정한다. 퍼센트값은 전체 화면 높이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. |
| right |
길이 | 퍼센트 | auto |
브라우저 화면 오른쪽을 기준으로 왼쪽으로 얼마나 들어올 지를 정한다. 퍼센트값은 전체 화면 넓이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. |
| bottom |
길이 | 퍼센트 | auto |
브라우저 화면 아랫쪽을 기준으로 윗쪽으로 얼마나 올라올 지를 정한다. 퍼센트값은 전체 화면 높이를 기준으로 한다. 모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. |
| left |
길이 | 퍼센트 | auto |
브라우저 화면 왼쪽을 기준으로 오른쪽으로 얼마나 들어올 지를 정한다. 퍼센트값은 전체 화면 넓이를 기준으로 한다.
모든 요소에 적용되며, 상속되지 않는다. 초기값은 auto이다. |
|
5.4. relative, floating, absolute positioning 비교
각각의 positioning 방법을 비교하기 위해 아래와 같은 문서가 있다고 가정하자. 아래 나오는 예는 BODY 부분은 변하지 않고, STYLE에 들어가는 속성만을 계속 바꾸어 준 것이다.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
BODY {line-height: 250%}
</STYLE>
</HEAD>
<BODY>
<P>여기서부터 본문이 시작합니다.
<SPAN id=outer>여기는 outer에 해당하는 내용이 시작하는 곳입니다.
<SPAN id=inner>이곳은 Inner의 내용이 들어가는 곳입니다.</SPAN>
여기까지 outer의 내용은 끝입니다.</SPAN>
그리고, 본문이 끝났습니다.
</P>
</BODY>
</HTML>
|
| |  |
5.4.1. Relative positioning
| |
BODY {line-height : 80%}
#outer {position: relative; top: -12px; color: red;}
#inner {position: relative; top: 12px; color: blue;}
|
| |  |
5.4.2. Floating
| |
<HTML>
<HEAD>
<STYLE type="text/css">
BODY {line-height: 200%}
#outer {color: red;}
#inner {float: right; width: 130px; color: blue;}
#sibling {clear: right; color: red;}
</STYLE>
</HEAD>
<BODY>
<P>여기서부터 본문이 시작합니다.
<SPAN id=outer>여기는 outer에 해당하는 내용이 시작하는 곳입니다.
<SPAN id=inner>이곳은 Inner의 내용이 들어가는 곳입니다.</SPAN>
<SPAN id=sibling>이곳은 Sibling의 내용이 들어가지요.</SPAN>
여기까지 outer의 내용은 끝입니다.</SPAN>
그리고, 본문이 끝났습니다.
</P>
</BODY>
</HTML>
|
| |  |
5.4.3. Absolute positioning
| |
#outer {position: absolute; top: 150px; left: 150px; width: 200px; color: red;}
#inner {color: blue;}
|
| |  |
| |
#outer {color: red;}
#inner {position: absolute; top: 100px; left: -50px; width: 130px; color: blue;}
|
| |  |
5.5. Z-index 속성
여러 개의 box가 서로 겹쳐지게 보이도록 하는 속성이다.
z-index : auto | 숫자
Position 속성의 값이 absolute나 relative인 요소에 적용되며, 상속되지 않는다.
초기값은 auto이다.
- auto : 쓴 순서대로 쌓인다. z-index가 0인 것과 같다.
- 숫자 : 숫자가 낮은 요소가 밑으로 간다.
- 음수가 들어가면, 부모 요소보다 밑으로 간다. 조상 요소 밑으로 보낼 수는 없다.
- 양수가 들어가면, 부모 요소보다 위로 간다.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
.top {z-index : 3; position: absolute; left: 10px; top: 50px ; border: 1px black
solid;
width: 200px; height: 200px; background-color: white;}
.middle {z-index: 2; position: absolute; left: 100px; top: 110px ;
border: 2px black thin; width:260px; height: 200px; background-color:
yellow;}
.bottom {z-index: 1; position: absolute; left: 40px; top: 190px ;
border: 1px black thick; width: 200px; height: 200px;
background-color: red;}
</STYLE>
</HEAD>
<BODY>
<DIV class=top>Top</DIV>
<DIV class=middle>Middle</DIV>
<DIV class=bottom>Bottom</DIV>
</BODY>
</HTML>
|
다음의 결과를 확인해 보도록 하자.
6. Box 좀 더 세밀히 제어하기
6.1. Width 속성
하나의 요소에 의해 그려지는 box의 폭은 width 속성의 값으로 결정된다.
| 속성 |
속성값 |
설명 |
| width |
길이 | 퍼센트 | auto |
Block-level과 IMG 요소에 적용되며, 상속되지 않는다.
초기값은 auto이다.
퍼센트 값은 부모 요소 box의 폭을 기준으로 한다. |
| max-width |
길이 | 퍼센트 |
Box의 최대폭을 정한다.
Block-level과 IMG 요소에 적용되며, 상속되지 않는다.
초기값은 100%이다.
퍼센트 값은 부모 요소 box의 폭을 기준으로 한다. |
| min-width |
길이 | 퍼센트 |
Box의 최소폭을 정한다.
Block-level과 IMG 요소에 적용되며, 상속되지 않는다.
초기값은 0이다.
퍼센트 값은 부모 요소 box의 폭을 기준으로 한다. |
|
6.2. Height 속성
하나의 요소에 의해 그려지는 box의 높이는 height 속성의 값으로 결정된다.
| 속성 |
속성값 |
설명 |
| height |
길이 | 퍼센트 | auto |
Block-level과 IMG 요소에 적용되며, 상속되지 않는다.
초기값은 auto이다.
퍼센트 값은 부모 요소 box의 높이를 기준으로 한다. |
| max-height |
길이 | 퍼센트 |
Box의 최대 높이를 정한다.
Block-level과 IMG 요소에 적용되며, 상속되지 않는다.
초기값은 100%이다.
퍼센트 값은 부모 요소 box의 높이를 기준으로 한다. |
| min-height |
길이 | 퍼센트 |
Box의 최소 높이를 정한다.
Block-level과 IMG 요소에 적용되며, 상속되지 않는다.
초기값은 0이다.
퍼센트 값은 부모 요소 box의 높이를 기준으로 한다. |
|
6.3. Overflow 속성
박스(단락)의 범위를 벗어난 content의 경우에 관한 처리방식을 제어하는 속성이다.
일반적으로 자식 요소(content)는 부모 요소의 box 안에 배열되는 것이 보통이지만, 다음과 같은 경우에는 그 경계를 벗어날 수 있다.
- floating 요소이고, 부모 요소 box에 비해 크기가 더 클 때.
- absolute positioning이 적용되었을 때.
- 음수의 margin을 가질 때.
| overflow |
visible | hidden | scroll | auto
Position 속성의 값이 absolute인 요소에 적용되며, 상속되지 않는다.
초기값은 visible이다.
|
| visible |
크기에 관계없이 내용을 모두 보여준다. |
| hidden |
해당 요소에 할당된 공간에 들어가는 내용만 보여주고, 나머지는 자른다.
Padding과 border는 할당된 공간의 크기에 맞춰서 나타난다. |
| auto |
할당된 공간의 크기 이상이 되면 스크롤바를 나타낸다. |
| scroll |
언제나 스크롤바를 나타낸다. |
|
아래 예를 보면, 주어진 공간의 크기보다 내용이 길지만, 기본값이 visible이 적용되어 내용이 화면에 모두 나타난다.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
#overlay {position: absolute; top: 50px; left: 50px; height: 200px; width: 200px}
</STYLE>
</HEAD>
<BODY>
<DIV id=overlay>
가로 200픽셀, 세로 200픽셀 보다 더 긴 내용을 어떻게 처리하는지를 살펴보려고 한
다. 세로로 길게 나타나는 것을 확인할 수 있다. 높이는 200픽셀이 넘어가도 계속 나
오지만, 너비는 200픽셀을 유지한다.
</DIV>
</BODY>
</HTML>
|
| |  |
Overflow 속성의 값을 hidden으로 해 보자.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
#overlay {position: absolute; top: 50px; left: 50px; height: 200px;
width: 200px; overflow: hidden}
</STYLE>
</HEAD>
<BODY>
<DIV id=overlay>
가로 200픽셀, 세로 200픽셀 보다 더 긴 내용을 어떻게 처리하는지를 살펴보려고 한
다. 세로로 길게 나타나는 것을 확인할 수 있다. 높이는 200픽셀이 넘어가도 계속 나
오지만, 너비는 200픽셀을 유지한다.
</DIV>
</BODY>
</HTML>
|
| |  |
Overflow 속성의 값을 auto와 scroll로 준 경우이다.
| |
overflow : auto /*필요한 수직 스크롤바만 나온다.*/
|
| |  |
| |
overflow : scroll /*수평, 수직 스크롤바가 모두 나온다.*/
|
| |  |
6.4. 배경색과 이미지
배경이란, Box model에서 content의 배경이 되는 부분과 padding을 포함한 부분을 말한
다. Border 부분의 색과 모양은 border 속성으로 지정할 수 있다. Margin 부분은 언제나
투명하기 때문에 부모 요소의 배경이 비쳐 보이게 된다.
배경에 관계된 속성은 실제로는 모두 상속되지 않는다. 그러나, background-color 속성
의 기본 초기값이 transparent(투명)이기 때문에 특별히 이 속성을 사용하지 않았을 때는
부모 요소의 배경색이나 무늬가 자식 요소에도 똑같이 나타나 상속된 것처럼 보일 수 있다.
다음의 표를 살펴보면서 하나씩 알아나가도록 하자.
| 속성 |
속성값 |
| background-color |
색이름 | RGB 값 | transparent |
| background-image |
url | none |
| background-repeat |
repeat | repeat-x | repeat-y | no-repeat |
| background-attachment |
scroll | fexed |
| background-position |
퍼센트값 | 길이, top | center | bottom, left | center | right |
| background |
background-color || background-image || background-repeat || background-attachment || background-position |
|
background-color : 모든 요소에 적용할 수 있고, 상속되지 않는다.
초기값은 transparent이다. 다음 예제의 결과를 한번 생각해 보자.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
H1 { background-color: #F00 }
</STYLE>
<BODY>
<H1>FF0000에 해당하는 색</H1>
<BODY>
</HTML>
|
| |  |
background-image : URL의 값으로 나오는 이미지를 요소의 배경으로 지정할 수 있
다.
모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 none이다.
그림 파일을 불러오지 못할 경우에 대비해 비슷한 색조의 배경색을 함께 지정하는 것이 좋다. 그림이 나오게 되면 배경색 위쪽에 덮이게 된다.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { background-image: none }
P { background-image: url(back.gif) }
</STYLE>
<BODY>
이 곳에는 배경이 나오지 않습니다.<BR>
<P>이 곳에는 배경이 나와야겠지요. <BR>
익스플로러 4.0 이상에서는 잘 나올 겁니다..
배경그림이 어떠한 방식으로 페이지를 채우는가요?
</P>
여기에는 배경이 나오지 않겠지요.
<BODY>
</HTML>
|
| |  |
예제에서 볼 수 있듯이, 배경으로 쓰이는 그림은 그림이 나타나야 하는 영역보다 크기가 작을 경우에, 바둑판식으로 영역을 꽉 채우게 된다.
background-repeat : 모든 요소에 적용할 수 있고, 상속되지 않는다.
초기값은 repeat이다.
배경으로 사용하는 그림은 기본적으로 바둑판식, 즉, X, Y 방향 모두 연속되게 출력된다.
Background-repeat 속성을 사용하면 사용자가 원하는 방향으로 연속시키거나 연속되지 않도록 할 수 있다.
- repeat : 가로, 세로 모두 연속된다.
- repeat-x : 가로 방향으로만 연속된다.
- repeat-y : 세로 방향으로만 연속된다.
- no-repeat : 그림 한 개만 나온다.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { background-image : url(back2.gif); background-repeat: repeat-y; }
</STYLE>
<BODY>
본문 전체가 물고기배경으로 덮이겠지요. 세로 방향으로만 연속될 겁니다.
<BODY>
</HTML>
|
| |  |
위의 예를 보면, 배경 그림을 한 방향으로만 연속시키거나 연속시키지 않을 때(none으로 줄
때)는 시작 위치가 브라우저의 왼쪽 위라는 것을 알 수 있다.
background-attachment : 배경 그림으로 사용한 그림의 위치가, 적용된 요소와 함께
움직이는지, 브라우저의 화면에 고정되는지를 정한다.
모든 요소에 적용할 수 있고, 상속되지 않는다.
초기값은 scroll이다. 다음에 나오는 background-position과 함께 보자.
background-position : 배경 그림이 들어갔을 때, 그 시작점을 어디로 할 것인지를
정한다.
Block-level 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 0%, 0%이다.
퍼센트 값을 썼을 때, background-attachment의 값이 scroll이면, 이 속성이 사용된
요소의 content box(Box dimensions 참고)를 기준으로 한다(padding, border,
margin을 포함한 상자가 아니다). Background-attachment의 값이 fixed이면, 전체 화
면의 크기를 기준으로 한다.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
BODY { background-color : #fcf ; background-image : url(back.gif);
background-repeat: repeat-y; background-attachment : fixed;
background-position : 50% 50% }
</STYLE>
<BODY>
화면의 정 중앙에서 시작해 아래쪽으로만 배경그림이 연속되어야 정상이다.
<BODY>
</HTML>
|
| |  |
background : 모든 요소에 적용할 수 있고, 상속되지 않는다.
대표속성에는 초기값이 없다.
7. 글꼴(Font)과 관련된 속성들
7.1. Font 속성
글자 모양과 크기에 관계된 여러 가지 속성을 지정할 수 있다. 주로 사용되는 속성들에 대한
정리를 다음의 표를 이용하여 해보았다.
| 속성 |
속성값 |
설명 |
| font-family |
[[글꼴이름 | 기본글꼴이름] |
글꼴을 정하는 속성이다. 두 개 이상의 글꼴 이름을 쓸 때는 쉼표(,)로 구분하고, 글꼴 이름이 두 단어 이상이면 큰따옴표(" ")로 묶는다. 브라우저는 앞에 있는 글꼴을 먼저 찾고 사용자의 시스템에 설치되어 있지 않은 글꼴인 경우에는 기본 글꼴을 보여준다. 제일 마지막에 쓰는 글꼴은 기본 글꼴을 써 주도록 하는 것이 현명할 것이다. 영문 기본 글꼴은 serif, sans-serif, cursive, fantasy, monospace 등 5개를 말한다. |
| font-style |
normal | italic | oblique |
글자의 모양이다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다. Italic과 oblique는 모두 기울임꼴이다. |
| font-variant |
normal | small-caps |
초기값은 normal이다. Small-caps는 크기가 작은 대문자로 나온다. |
| font-weight |
normal | bold | bolder | lighter | 100∼900 |
글자의 굵기를 조정한다. 초기값은 normal이다. Normal은 400과 같고, bold는 700과 같다. 실제로 어떤 굵기로 화면에 출력되느냐는 글꼴에 따라 다르다. 어떤 글꼴은 normal과 bold로만 표현될 수도 있고, 어떤 글꼴은 8단계로 나타날 수도 있다. |
| font-size |
절대값 | 상대값 | 길이 | 퍼센트 |
글자의 크기를 정한다. 초기값은 medium이다. 절대값 : xx-small | x-small | small | medium | large | x-large | xx-large 상대값 : larger | smaller 퍼센트 값을 썼을 때는 부모 요소의 글자 크기를 기준으로 한다. |
| font |
[['font-style'||'font-variant'||'font-weight'||'font-size'||'line-height'||'font-family'] |
글꼴, 글자굵기, 글자크기 등을 한꺼번에 지정해 줄 수 있으며 표속성이나 초기값은 없다. |
| text-decoration |
none|[ underline||overline||line-through||blink] |
글자에 밑줄이나 윗줄을 그을 수 있으며 초기값은 none이다. |
| color |
색이름 | RGB값 |
글자색을 나타낸다. 초기값은 브라우저마다 다르다. |
| text-transform |
capitalize | uppercase | lowercase | none |
영문자열의 대소문자를 변경하는데 사용한다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 none이다. |
|
여기서 살펴본 여러 속성들을 브라우저에서 테스트해보도록 하자.
| |
<HEAD>
<STYLE type="text/css">
SPAN {font-size: xx-large; font-family: Arial, Serif}
SPAN.italic {color: red; font-style: italic; weight: 800}
SPAN.underline {line-height: 2; text-decoration: underline}
SPAN.line-through {text-decoration: line-through}
SPAN.cap {font-weight: 800; text-transform : capitalize}
A:link, A:visited, A:active { font-size: large; text-decoration: none }
</STYLE>
<BODY>
<SPAN>This is a simple text for test!</SPAN><BR>
<SPAN class=italic>This is another text for test!!</SPAN>
<HR>
<A href="http://education.jinbo.net">진보네트워크 교육센터</A>
<BR>
<SPAN class=underline>링크는 아니지만 밑줄을 쳐보죠.</SPAN><BR>
<SPAN class=line-through>line-through</SPAN><BR>
<SPAN class=cap>capitalize & weight effect</SPAN>
<BODY>
</HTML>
|
| |  |
8. 텍스트 레이아웃 제어와 관련된 속성들
CSS에서는 워드프로세서나 일반 데스크탑용 출판 어플리케이션 프로그램들이 제공하던 세밀한 인쇄상의 타입제어를 위한 많은 속성들이 존재한다.
먼저 문단모양을 위한 속성들을 살펴보자.
| 속성 |
속성값 |
설명 |
| text-indent |
길이 | 퍼센트 |
문단의 들여쓰기를 뜻한다.
Block 요소 - DIV, P, BLOCKQUOTE 등 - 에 적용할 수 있고, 상속된다.
초기값은 0이다. 퍼센트값은 부모 요소의 길이를 기준으로 한다. |
| text-align |
left | right | center | justify |
텍스트 정렬 방식을 결정하는 속성이다. Block요소에 적용할 수 있고, 상속된다. 초기값은 브라우저마다 다르다. Justify는 보통 left와 같다. |
| line-height |
normal | 숫자 | 길이 | 퍼센트 |
줄간격을 의미한다. 모든 요소에 적용되며, 상속된다. 초기값은 normal이다. 숫자를 쓰면, 해당 요소의 "글자 크기×숫자"만큼을 뜻한다. 퍼센트 값은 해당 요소의 글자 크기를 기준으로 한다.
DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
위의 세 가지 예는 모두 같은 뜻이다.
|
| vertical-align |
top | bottom | middle |
한 줄 안에서의 단락간의 수직 정렬 방식을 정한다. Table에서의 vertical-align 속성을 참조한다. |
|
다음은 이러한 속성들을 사용하여 작성한 코드이다.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
DIV { font-family: 굴림체; font-size: large; text-indent : 2em }
.center {text-decoration: underline; text-align : center }
.height {line-height: 2}
</STYLE>
<BODY><br>
<DIV>DIV로 새 문단을 시작할 때마다 두 글자 크기만큼 들여쓰기를 하게 됩니
다.</DIV>
<DIV class=center>여기서부터는 가운데 정렬이 적용되겠군요.</DIV>
<DIV class=height>한번 테스트해보도록 하죠. 어떤 글들이 될까요.. 지금 우리가 시
험해 보고 있는 것은 줄간격의 변화입니다. 어떻습니까. 줄간격이 조금 차이가 나는
것 같지요?</DIV>
<BODY>
</HTML>
|
| |  |
다음으로는 텍스트 내의 줄 간격과 단어 간격, 문자 간격 등을 제어하는 속성들을 살펴본
다. 워드프로세서의 글자모양 정도를 생각해 보면 이해하기 쉬울 것이다.
| 속성 |
속성값 |
설명 |
| letter-spacing |
normal | auto |
문자사이의 간격을 제어하는 속성이다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다. |
| word-spacing |
normal | 숫자 |
단어 사이의 간격을 조정한다. 모든 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다. |
| white-space |
normal | pre | nowrap |
문장 안에 있는 빈칸을 어떻게 처리할 것인지 결정한다. Block-level 요소에 적용할 수 있고, 상속된다. 초기값은 normal이다.
- normal : 일반 HTML에서와 마찬가지로 두 칸 이상의 빈칸은 한 칸으로 취급된다.
- pre : PRE 요소에서처럼 사용자가 입력한 모습 그대로 빈칸도 화면에 출력된다.
- nowrap : BR 요소처럼 강제로 줄을 바꾸기 전에는 계속 같은 줄에 나타난다.
|
|
다음의 코드를 보면서 결과를 예상해 보도록 하자.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
H3.letter { letter-spacing:0.5em}
H3.space {word-spacing: 2em}
H3.white {white-space: pre}
</STYLE>
<BODY>
<H3 class=letter>글자간 간격이 0.5em이다. Letter-spacing</H3>
<H3>보통 글자 without letter-spacing</H3>
<HR>
<H3 class=space>단어간격이 어떤가요?</H3>
<H3>여기와 비교해 보도록 하죠</H3>
<HR>
<H3 class=white>빈칸의 처리가 아무래도 안되는 것 같군요</H3>
<BODY>
</HTML>
|
| |  |
9. 리스트(List)
HTML 태그 중의 LI 태그와 비교하면서 알아보자.
| 속성 |
속성값 |
설명 |
| list-style-type |
disc | circle | square | decimal | loer-roman | upper-roman | lower-alpha | upper-alpha | none |
Display 속성값이 list-item인 태그(UL, LI)에 적용할 수 있고, 상속된다. 초기값은 disc이다. |
| list-style-position |
inside | outside |
Display 속성값이 list-item인 요소에 적용할 수 있고, 상속된다. 초기값은 outside이다. |
| list-style-image |
URL | none |
Display 속성값이 list-item인 요소에 적용할 수 있고, 상속된다. 초기값은 none이다. |
| list-style |
'list-style-type' | 'list-style-position' | 'list-style-image' |
Display 속성값이 list-item인 요소에 적용할 수 있고, 상속된다. 대표속성은 초기값이 없다. |
|
다음의 코드를 실행시켜 보고 결과를 예측해 보자.
| |
<HTML>
<HEAD>
<STYLE type="text/css">
OL { list-style-position: outside; list-style-type: lower-roman; }
UL { list-style-position: inside; list-style-image: url(ball.gif); }
DIV {font-size: middle; font-family: Arial; }
</STYLE>
<BODY>
<OL><LI><DIV>outside 1</DIV><BR>next line
<LI><DIV>outside 2</DIV><BR>next line</OL>
<UL><LI><DIV>inside 1</DIV><BR>next line
<LI><DIV>inside 2</DIV><BR>next line</UL>
<BODY>
</HTML>
|
| |  |
|
기술국 관련 문의 :