CSS.EduHTML.com - Cascading Style Sheet

Chapter 12

HTML의 리스트 목록을 자유롭게~! list-style

꺄하하하... (미쳤나봐...ㆀ)

드뎌 주말이군엽..

다쉬~~ 재기 했음다.. 후훗..

그럼 시작할까요? ^^

이번에 님들이 배우실건 음..

잼있기두 하지만.. 재미 없을수도 있는..

사용도에 따라서 필요/불필요가 달라지는.. 그런 것입니다.

예? 뭐냐구요?

바로 list-style인데요..

여러분들~~ 솔직히 말씀하세요.

태그.. 따 시키고 계시죠?

솔직히..

아마 대다수의 님들께선 이 태그를 "따"시키고 계시는게 사실일 것입니다.

그냥 숫자 집어 넣어서 쓰지, 그걸 왜써?

...라는 님들이 종종 계시더군요.

그 러 나 ! !

오늘내로 여러분들은 이걸 잼있게 쓸 수 있게 될겁니다.

왜냐구요?

그게 이번 강좌의 목표거든요 ^^a

자~ 어디..

list-style은 어떻게 구성된 것인가요?

정답 아시는님~~

네~~ 글쳐.

list라는 속성과 style이라는 부가 속성이 추가된 형태 입니다..

근데.. 이상하게도..

W3C에서는 list-style, 이 자체를 하나의 속성으로 보는것 같더군요..

그래서.. 이 속성에 또 부가속성이 붙습니다..

우습지 않나요?

그러니까.. 님들은 이전에 배우신 지식을 여기서만 예외로 돌리시구요..

list-style을 하나의 속성으로 봐 주세요. 아셨져?

안그러면.. 이것에 대한 물음표들이(?) 자꾸 머릿속에서 떠나가질 않을테니 말입니다.

훗.. 서론이 너무 길었군요.

본론으로 넘어가지요.

그럼 아래는 list-style의 부가 속성 도표 입니다.

아시져? 중요한건 빨강으로 표시 되었다는걸.. *^^*

▶list-style의 부가 속성 도표

list-style

image잼있습니다~!

리스트 목록을 그림으로 바꿔 넣습니다.url(이미지 경로)

position리스트의 들여쓰기를 적용/해제 합니다.outside(기본값), inside

type리스트 목록에 대한 설정을 합니다.disk(기본값), circle, square, decimal,

upper-alpha, lower-alpha, upper-roman, lower-roman

훗.. 무슨 말인지 잘 모르시겠죠? ^^

본래 이건 맛배기 정도로 보여드리는 것이니.. 흠.. 일종의 예습이라 생각 하시구요..

아래를 보세요.

우선은 가장 재미있는 list-style-image에 대해서 알아 보도록 하죠.

▶list-style-image

<html>
 <head>
  <title>list-style-image</title>
  <style type="text/css">
   li {list-style-image:url(
  </style>
 </head>
 <body>
  <ul>list-style-image 예제 입니다. ^^
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
 </body>
</html>

예제보기 1st ← Click !

어떠신지?

잼있죠? *^^*

태그를 안쓰고도 리스트에 그림이 들어가다니.. 후훗..

저두 처음엔 신기해서 마구 따라 했던 기억이 아직도 생생하네요 *^^*

넵. 사용 방법은 background-image와 다를바가 없습니다.

단지, 그 용도가 다를 뿐이지만요..

만약 괜찮은 미니 클립아트를 가지고 계신다면.. 이걸 써서 멋지게 나타내는것도 괜찮은 방법중 하나겠지요?

▶list-style-position

<html>
 <head>
  <title>list-style-position</title>
  <style type="text/css">
   ul.position1 {list-style-position:outside}
   ul.position2 {list-style-position:inside}
  </style>
 </head>
 <body>
  <ul class="position1">바깥이죠. 원래 이래요. ^^
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
  <ul class="position2">안으로 들어 가나요?
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
 </body>
</html>

예제보기 2nd ← Click !

list-style-position은 보시다 시피 리스트의 위치를 약간이나마 변경 시킬 수 있습니다.

그런데.. 리스트들의 기본값은 원래부터가 outside이기 때문에..

위의 예제처럼 list-style-position의 값을 outside로 하실거라면 차라리 아예 쓰지 말것을 권장합니다.

▶list-style-type

<html>
 <head>
  <title>list-style-position</title>
  <style type="text/css">
   ul.type1 {list-style-type:disk}
   ul.type2 {list-style-type:circle}
   ul.type3 {list-style-type:square}
   ul.type4 {list-style-type:decimal}
   ul.type5 {list-style-type:upper-alpha}
   ul.type6 {list-style-type:lower-alpha}
   ul.type7 {list-style-type:upper-roman}
   ul.type8 {list-style-type:lower-roman}
  </style>
 </head>
 <body>
  <ul class="type1">기본값이죠? 아마..
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
  <ul class="type2">둥근 것일 겁니다.
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
  <ul class="type3">사각형?!
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
  <ul class="type4">머지? 숫자 아닌가요?
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
  <ul class="type5">영문, 대문자 입니다.
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
  <ul class="type6">영문, 소문자 입니다.
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
  <ul class="type7">로마 숫자, 대문자 입니다.
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
  <ul class="type8">로마 숫자, 소문자 입니다.
   <li>멀할까여?
   <li>뭐하긴여.. 자야져.. ㅡ.ㅡa
   <li>엑?! 맞아.. 자면 안돼~!!
  </ul>
 </body>
</html>

예제보기 3rd ← Click !

이건 자세한건 필요 없을듯..

그래서.. 속성의 값들에 대해서 자세히 설명하겠습니다.

네? 예제 보시구 다 아셨다구요?

그래두 봐 주세요 *^^* (앗.. 기필코 돌이..ㆀ)

disk기본값 입니다. 아시져? 둥근 원에 까맣게 칠해진것..

circle원으로 바뀝니다.

square사각형.(영어 다 아실텐데.. 쩝..ㆀ)

decimal저두 뭔 단어인지 몰랐는데, 확인 결과 숫자 입니다.

upper-alpha대문자 알파벳

lower-alpha소문자 알파벳

upper-roman대문자 로마 숫자

lower-roman소문자 로마 숫자

후훗..

드뎌 12회 막 내립니다.

이젠 리스트를 따 시키지 마세요. 아셨져? *^^*

그럼.. 즐거운 하루 되시구요..

다음 강좌 에서 뵙죠.

빠빠~~~ ^.^

- End -