|
 표시와 배치 |
 position
position 속성은 박스의 표시 위치를 결정하기 위한 배치 방법을 설정하는 속성입니다. 실제로 표시할 위치에 대해서는 top 속성, bottom 속성, left 속성, right 속성, 으로 지정합니다.
| static | 특별하게 배치 방법을 지정하지 않은 일반적인 상태로 지정합니다. 이 값이 지정되어 있는 경우에는 top 속성, bottom 속성, left 속성, right 속성은 적용되지 않습니다. |
| relative | 일반적인 상태에서 배치되는 위치에서부터 상대 위치로 배치하도록 합니다. 이 다음에 계속되는 박스는 이 박스가 일반적으로 배치되고 있는 경우의 위치에 배치됩니다. |
| absolute | 이 박스를 포함하는 상위 박스를 기본으로 그 곳에서 거리를 지정하여 배치하도록 합니다. 이 값을 지정하면 일반 배치 방법에서는 독립적이기 때문에 다른 요소의 배치에는 일절 영향을 주지 않습니다. |
| fixed | 값으로써 absolute 를 지정한 경우와 같이 배치됩니다. 이 지정으로 표시된 박스는 원도우에서 그 위치에 고정되고, 스크롤하여도 위치가 변하지 않게 됩니다. 출력할 대상에 따라서는 윈도우가 아닌 페이지에 고정됩니다. |
top, bottom, left, right
이 속성은 브라우저에 위치시킨 박스모델의 거리를 나타냅니다. top 는 위에서부터의 거리이고 bottom 는 아래서 부터의 거리이고, left 는 왼쪽에서의 거리, right 는 오른쪽으로 부터의 거리를 나타냅니다.
z-index
이 속성은 지정된 박스의 겹쳐지는 순서를 계층으로 나타냅니다. 값은 정수값으로 써주시면 되고요.
이해가 가실런지 모르겠네요? 포토샵이나 플래시를 보면 레이어가 나오지요. 바로 그 역활을 하는 겁니다. 그럼위에것을 가지고 예제를 한번 보시지요.
[예] 박스 모델의 위치지정
이 방법은 상당히 요긴하게 쓰이는 것인데 홈페이지에 자기가 원하는 위치에 맘대로 배치할 수 있는 방법입니다. 우선 예제를 가지고 설명을 드리도록 하겠습니다.
| h3 { position : absolute ; left : 100px ; top : 100px ; width : 30px ; height : 60px ; z-index : 1 } |
제일 앞에 나오는 position 는 절대위치(absolute)와 상대위치(relative)로 나눌 수 있습니다. 스타일시트를 공부할 정도면 이 정도는 아시겠지요. ^^; 절대위치는 해상도에 관계없이 항상 같은 위치에 있고 상대위치는 해상도에 따라 변합니다. left 는 좌측으로 부터 100px 되는 위치에 있다는 소리고, top 는 위에서 부터 100px 되는 위치에 있다는 뜻입니다. width 는 박스모델에 있는 요소의 넓이를, height 는 높이를 설정하는 것입니다. 단위로는 "실수값+단위", "%", "auto" 가 있습니다. z-index 는 레이어의 계층구조를 나타내는 것입니다.
|
float
float 속성은 지정된 요소의 박스를 왼쪽, 또는 오른쪽으로 배치하고 그 반대편에 계속되는 요소의 내용을 어울림으로 배치하는 속성입니다.
| left | 지정한 요소를 왼쪽으로 배치하고 계속되는 내용을 그 오른쪽에 어울림으로 배치합니다. |
| right | 지정한 요소를 오른쪽으로 배치하고 계속되는 내용을 그 왼쪽에 어울림으로 배치합니다. |
| none | 좌우배치와 어울림 배치를 하지 않도록 합니다. |
[예제]
 어때요 그림이 왼쪽에 나오지요?
이 처럼 스타일시트를 이용하면 간단하게 그림을 배치할 수 있습니다.
[소스]
<img src=images/img29.gif border=0 style="width:100;height:100;float:right;"> |
|
clear
clear 속성은 float 속성에서 왼쪽, 또는 오른쪽에 배치된 박스의 어울림을 해제하는 속성입니다.
| left | 왼쪽에 배치된 요소에 대한 어울림을 해제합니다. |
| right | 오른쪽에 배치된 요소에 대한 어울림을 해제합니다. |
| both | 오른쪽 또는 왼쪽에 배치된 모든 요소에 대한 어울림을 해제합니다. |
| none | 어울림 배치를 하지 않도록 설정합니다. |
overflow
이 속성은 박스안에 있는 내용이 박스의 범위를 넘어서면 어떻게 처리할 것인가를 설정하는 속성입니다.
| visible | 박스의 범위를 넘어 표시합니다. |
| hidden | 박스의 범위를 넘는 부분을 표시하지 않도록 합니다. |
| scroll | 스크롤바가 생기도록하여 내용을 보도록 설정합니다. |
| auto | 브라우저에 따라 다릅니다(일반적으로 스크롤 할 수 있게 됩니다). |
clip
이 속성은 박스의 보이는 범위를 설정하는 속성입니다.
| clip:rect(상단, 오른쪽, 하단, 왼쪽) |
박스의 주변에서 안쪽으로 거리를 지정하여 보이는 범위를 설정하며 각 값은 수치에 단위를 붙여 지정합니다. 음수값을 지정하여 보이는 범위를 박스 바깥쪽으로 확장할 수도 있으며 또 거리는 [auto] 도 포함할 수 있고, 그 경우는 박스의 주변과 같은 위치 즉, 0과 같은 의미가 됩니다.
|
direction
이 속성은 글자의 표기 방향을 설정하는 속성입니다.
| ltr | 왼쪽에서 오른쪽으로 글자방향을 설정합니다. |
| rtl | 오른쪽에서 왼쪽으로 글자방향을 설정합니다. |
|
|
| 리스트 |
list-style-type
이 속성은 리스트 항목의 글머리표 종류를 설정하는 속성입니다. list-style-type 속성으로 이미지가 지정되어 있는 경우는 그 이미지가 우선적으로 표시됩니다. list-style-image 속성으로 지정한 이미지를 표시할 수 없고 값이 none 으로 지정되어 있는 경우는 그 속성값이 유효하게 됩니다.
| none | 글머리표 없음 | disc | 검은색 원 |
| circle | 선으로 그려진 원 | square | 선으로 그려진 사각형 |
| lower-roman | 로마숫자(소문자) | upper-roman | 로마숫자(대문자) |
| lower-greek | 그리이스문자(소문자) | decimal | 일반숫자 |
| decimal-leading-zero | 첫 자라에 0을 붙인 숫자 | lower-latin, lower-alpha | 알파벳 소문자 |
| upper-latin, upper-alpha | 알파벳 대문자 | hebrew | 히브리 숫자 |
| armenian | 아르메니아 숫자 | georgian | 그로지아 숫자 |
|
| 예제 | 결과 |
<html>
<head>
<style type="text/css"><!--
ul { list-style-type : square; }
--></style>
</head>
<body>
<ul>
<li>현대자동차</li>
<li>기아자동차</li>
<li>대우자동차</li>
<li>쌍용자동차</li>
</ul>
</body>
</html> | |
|
list-style-image
list-style-image 속성은 리스트 항목의 글머리표로 사용할 이미지를 설정하는 속성입니다. list-style-type 속성이 동시에 설정되어 있는 경우에도 이 속성으로 지정되어 있는 이미지가 우선적으로 적용됩니다. 하지만, 이 속성으로 지정한 이미지를 표시할 수 없는 경우에는 list-style-type 속성으로 설정한 종류의 글머리표가 표시됩니다.
| none | 글머리표에 이미지를 표시하지 않습니다. |
| url | 리스트 항목의 글머리표로 사용할 이미지의 url 를 지정합니다. |
|
| 예제 | 결과 |
<html>
<head>
<style type="text/css"><!--
ul { list-style-image : url(images/bitimg24.gif); }
--></style>
</head>
<body>
<ul>
<li>현대자동차</li>
<li>기아자동차</li>
<li>대우자동차</li>
<li>쌍용자동차</li>
</ul>
</body>
</html> | |
|
list-style-position 이 속성은 리스트 항목의 박스에 대한 글머리표의 위치를 설정하는 속성입니다.
| outside | 글머리표를 리스트 항목의 박스 바깥쪽에 배치합니다. |
| inside | 글머리표를 리스트 항목의 박스 안쪽에 배치합니다. |
|
list-style
list-style 속성은 리스트에 관한 속성을 한꺼번에 설정할 수 있는 속성으로 필요한 값을 순서대로 공백으로 구별하여 지정할 수 있습니다.
| 예) body { list-style : url("이미지의 경로와 이름") disc inside |
설명을 드리자면 url 에 지정된 이미지를 리스트의 글머리표로 사용한다는 뜻으로 박스의 안쪽에 배치시키겠다는 소리입니다. 만약 이미지가 연결이 안될 경우에는 리스트 타입으로 지정된 disc(검은색 원) 으로 표시됩니다.
| 예제 | 결과 |
<html>
<head>
<style type="text/css"><!--
ul { list-style : url(../image/face/bitimg57.gif) disc outside; }
--></style>
</head>
<body>
<ul>
<li>3가지 속성을 한꺼번에 지정할 수 있습니다.</li>
<li>list-style-type 값은 이미지를 표현할 수 없을때 씁니다.</li>
<li>list-style-position 값도 지정할 수 있습니다.</li>
<li>한꺼번에 지정하니 편하지요.</li>
</ul>
</body>
</html> | - 3가지 속성을 한꺼번에 지정할 수 있습니다.
- list-style-type 값은 이미지를 표현할 수 없을때 씁니다.
- list-style-position 값도 지정할 수 있습니다.
- 한꺼번에 지정하니 편하지요.
|
maker-offset maker-offset 속성은 글머리표와 리스트 항목과의 간격을 설정하는 속성입니다. |
|
|
댓글 없음:
댓글 쓰기