Untitled Document

속성값

3. 분류속성

1) display

속성값: block |inlinelist-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|prenowrap
문장 안에 있는 빈 칸을 어떻게 처리할 것인지 결정한다.

<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>

<이전   목록   다음>

 

Copyright ⓒ2001∼2003, alza.wo.to All Rights Reserved.