| 1)
display |
|
속성값: block ｜inline｜list-time｜none
이 속성은 요소가 화면에 표현될 것인가, 그렇다면 어떤 방식으로 디스플레이 될
것인가를 기술한다. none으로 설정하면 화면에 요소를 표시하지 않고, block으로 설정하면 인접한 요소의
경계선 사각형을 기준으로 새로운 사각형 영역을 연다. Inline은 이전의 내용과 같은 행에 새로운 인라인
사각형 영역을 넣는다.
<html>
<head>
<style
type="text/css">
<!--
img {display:none}
-->
</style>
</head>
<body>
<img
src="image/photo02.jpg" width="325"
height="264">
</body>
</html>
|
| 2)
white-space(Explore에서는 적용안됨) |
|
속성값: normal｜pre｜nowrap
문장 안에 있는 빈 칸을 어떻게 처리할 것인지 결정한다.
<html>
<head>
<style
type="text/css">
DIV{white-space:pre}
</style>
<body>
<div>
이 곳은 빈 칸이 입력한 대로 나타나야 하는데..
</div>
</body>
</html>
- normal 속성은
일반 HTML에서와 마찬가지로 두 칸 이상의 빈 칸은 한 칸으로 취급된다.
- pre 속성값은
HTML문서에서 <pre> 태그를 사용한 것과 같이그대로 표시된다.
- nowrap 속성은
<br>태그를 명시하지 않으면, 줄 바꿈을 하지 않도록 한다
|
| 3) list-style-type |
|
속성값:
disc｜circle｜square｜decimal｜lower-roman｜upper-roman｜lower-alpha｜upper-alpha
항목에 붙이는 숫자나 뷸렛의 표시형태를 설정한다. 초기값은
disc이다.
<html>
<head>
<style
type="text/css">
<!--
ol { list-style-type:
lower-roman}
-->
</style>
</head>
<body>
<ol>
<li>사과</li>
<li>메론</li>
<li>토마토</li>
</ol>
</body>
</html>
- disc: A disc (exact presentation is
UA-dependent) - > 검은 동그라미
- circle: A circle(exact presentation is
UA-dependent) -> 흰색 동그라미
- square: A square(exact presentation is
UA-dependent) -> 네모
- decimal: Decimal numbers,beginning with
0. -> 일반숫자
- lower-roman: Lower case roman numerals()
-> 로마숫자 소문자
- upper-roman: Upper case roman numerals()
-> 로마숫자 대문자
- lower-alpha: Lower case ascii
letters(a,b,c,....z) -> 알파벳 소문자
- Upper-alpha: Upper xase ascii
letters(A,B,C,...Z) -> 알파벳 대문자
- none: No marker -> 없음
|
| 4)
list-style-image |
|
속성값: URL｜none
뷸렛으로 사용될 그래픽을 지정할 때 사용된다.
<html>
<head>
<style
type="text/css">
<!--
UL{
list-style-image:url(image/dot.gif)}
-->
</style>
</head>
<body>
<ul>
<li>강아지
<li>고양이
</ul>
</body>
</html>
|
| 5)
list-style-position |
|
속성값:
inside｜outside
목록의 항목을 들여쓰기로 할 것인지 내어쓰기로 할 것인지를 설정하는 속성이다.
inside로 설정하면 들여쓰기가 되고 outside로 설정하면 내어쓰기가 된다. 초기값은
outside다.
<html>
<head>
<style
type="text/css">
<!--
ul
{list-style-position:outside}
ul.compact{list-style-position:inside}
-->
</style>
</head>
<body>
<ul>
<li>outside1</li>
<li>outside2</li>
</ul>
<ul
class=compact>
<li>inside1</li>
<li>inside2</li>
</ul>
</body>
</html>
|
| 6)
list-style |
|
속성값:
list-style-type｜list-style-image｜list-style-position
display속성이 있는 요소를 목록 항목으로 설정한다.
<html>
<head>
<style
type="text/css">
<!--
ul {
list-style-positio:outside; list-style-type:circle}
-->
</style>
</head>
</html>
<이전
목록 다음> |
