그러나 이 사용에 있어 Browser간의 여백 패딩 블릿이미지을 처리하는데 있어 표현의 차이가 들어납니다..
웹 페이지의 레이아웃을 유지하기 위해 table태그나 div span을 사용했다면 더욱 편리한 CSS로 이를 극복할수 있습니다.
우선 list-style:none margin-left: text-indent의 사용상 주의가 필요합니다.
IE7에 경우 text-indent값에 영향을 받지 안고 있으며 Firefox 2.0은 값의 영을 받고 있습니다.
기본적으로 margin과 padding을 설정해주는 것이 두브라우져의 레이아웃 차이를 없엘수 있습니다.
ul {margin : 0px; padding:0px;} /* li 내에 상속됩니다.*/
=> ul {margin : 0px; padding:0px;} ; <=이 부분을 주의 해야하는데 stylesheet를 사용하는데 있어 이 콘론은 올바른 표기법이 아닌것으로 간주하여 fox에선 무시처리를 해버리니 주의하세요..
<li> 및 display속성값이 [list-item]인 경우 다음과 같은 스타일을 적용할 수 있습니다.
* <ol> <ul> 에 다음의 속성을 지정하면, 해당 태그의 서브 <li>요소에는 모두 상속됩니다.
ol 번호가 있는 목록이며 ul은 번호가 없는 목록이지만 list라는 티를 내는 마커를 보여주죠.
=> TYPE 애트리뷰트는 LI에 개별적으로 TYPE이 지정되니 않는 한 전체 목록의 형태을 반환하거나 지정합니다. BODY에 지정된 font 애트리뷰트의 줄 높이가 UL 엘레멘트의 line-height에 상속되고 BODY의 font-size 애트리뷰트가 LI의 font-size보다 크면 LI의 항목들은 BODY의 font-size에 의하여 표현됩니다. LI 엘레멘트가 스타일쉬트(CSS)로 절대 위치를 가지면 목록 항목의 마커(marker)는 표시되지 않습니다. IE6에서 스타일 display 속성의 디폴트값은 list-item입니다.
[ 리스트 속성의 일괄 지정 ]
list-style: type image position;
리스트의 글머리표의 종류를 지정(type), 글머리표의 이미지를 지정(image) 글머리표의 표시위치 지정(position)을 지정합니다. 속성값인 type, image, position은 아래에서 설명할 속성값을 따릅니다.
[ 글머리표의 종류 지정 ]
list-style-type: disc(초기값);
글머리표의 이미지가 있는 경우에는, 이미지가 우선적으로 표시됩니다. 이미지가 없거나(none) 지정한 이미지를 표시할 수 없는 경우, 이 설정값이 유효하게 됩니다. 구버전의 IE에서는 인식되지 않으나, IE7에서는 인식이됩니다.
다음과 같은 속성값을 이용할 수 있습니다.
none : 글머리표를 표시하지 않습니다.
disc : 검은색 원(기본 값)
circls : 선으로 그려진 원
square : 선으로 그려진 사각형
lower-roman : 로마숫자 소문자
upper-roman : 로마숫자 대문자
lower-greek : 그리스 문자 소문자
decimal : 일반 숫자
decimal-leading-zero : 첫 자리에 0을 붙인 숫자
lower-latin, lower-alpha : 알파벳 소문자
upper-latin, upper-alpha : 알파벳 대문자
hebrew : 히브리 숫자
armenian : 아르메니아 숫자
georgian : 그로지아 숫자
<ul style="list-style-type: lower-roman;">
* index
* content
* postscripe
[ 글머리표 이미지 지정 ]
list-style-image: url();
디폴트 값은 none입니다. 아래와 같이 사용할 수 있습니다.
<ul style="list-style-image: url(ico_note.gif);">
- index
- content
- postscripe
글머리표 이미지 표시 위치 지정 ]
list-style-position: outside(초기값);
리스트 항목의 박스에 대한 글머리표의 위치를 설정하는 속성입니다.
사용할 수 있는 속성값으로는 inside 와 outside가 있으며 디폴트 값은 outside입니다.
<ul style="border: 1px solid; list-style-image: url(ico_note.gif);">
- index
- content
- postscripe
<ul style="border: 1px solid; list-style-position: inside; list-style-image: url(ico_note.gif);">
- index
- content
- postscripe
위 예의 경우, margin: 0; padding: 0; width: 200px로 지정되어 있습니다. 테두리를 1px로 설정하였으므로, 박스의 레이아웃은 가로 202px가 됩니다. 글머리표 이미지를 inside로 설정한 경우는 이 202px안에 모두 표기가 됩니다.
outside의 경우는 해당 박스의 여백이나 패딩값에 관계없이 박스의 외곽에 표기됩니다. 심지어 외곽 박스의 영역 을 침범해서라도 표기가 됩니다. 다만, 외곽 박스가 <body>인 경우에는, IE7의 경우에는 패딩영역에만 표기됩니다. 즉, FireFox2경우에는 패딩영역이든 여백(margin)영역이든 표기할 공간이 있으면 표기해 주나, IE7의 경우에는 여백(margin)영역만 존재하고 패딩영역이 없는 경우 글머리표 이미지는 표기가 되지 않습니다.
<ul style="border: 1px solid; list-style-position: inside; list-style-image: url(ico_note.gif);">
<li style="list-style-position: outside;">index</li>
- index
- content
- postscripe
이 상, 리스트 항목의 글머리표에 대한, 속성설정에 대하여 살펴보았습니다. 이 항목들만을 가지고 글머리표 레이아웃을 설정하는 방법에는 한계가 있습니다. 글머리표로 사용한 이미지의 크기에 따라, 상하 높이를 설정하는 부분이 없기 때문입니다.
참고 사항으로 IE7에 경우 이미지와 li 내 약간의 여백이 존재하며. Fox의 경우 그림과 같이 border와 image사이의 여백이 없습니다 IE7로 볼경우와 Fox로 볼경우의 차이를 느낄려면 동일한 페이지를 두 브라우져로 동시에 보면 알수 있을 것입니다.
ul{ list-style: none; margin: 0; padding: 0;}
따라서, 레이아웃을 위한 일반적인 사용에는 위와 같이 사용할 뿐입니다.
모든 Browser를 올바르게 처리하게 위해서 navigater를 사용할수도 있겠지만 W3C 표준을 따른다면
Borwser에 구해 받지 않을 수도 있습니다. 하지만 cursor와 같은 IE전용 태그는 유용하지만 Firefox에선 사용되지 않으며 overflow의 경우도 차이가 많이 나고 있습니다..
유용한 태그를 사용할수 있다면 Browser마다 따로 설정해주는것은 고욕이며 생산성에 문제를 느끼기에표준을 따르면서 script로 이를 대체할수 있는 방법을 개발해야 겠습니다.
'AllAcc?ess' 카테고리의 다른 글
| 동영상 object tag IE 와 Firefox 에서 사용하기. (0) | 2007.02.02 |
|---|---|
| CSS를 이용한 네비게이션 메뉴바 (0) | 2007.02.02 |
| Construction of Prototype Framework Library (0) | 2007.01.31 |
| Javascript libraries 총정리 (0) | 2007.01.29 |
| CSS Design gallery 사이트 (0) | 2007.01.29 |
