본문 바로가기
웹디자인

[홈페이지제작 강좌] HTML 기본강좌 (목록 만들기 3)

새로운나 2010. 1. 19. 20:51
3. 목록만들기(3)
[응용 1] 목록의 여러가지 형태를 같이 사용하는 방법입니다.
 
소 스 예 제
<html><head><title>목록예제</title></head>
<body>
 <ul>
 <li type="disc">이건 동그란 점...
 <li type="circle">이건 속빈 동그라미
 <li type="square">이것은 사각형..
 <li type="circle">이건 다시 속빈 동그라미
 <li type="disc">이건 동그란 점
 </ul>
</body>
</html>
  • 이건 동그란 점...
  • 이건 속빈 동그라미
  • 이것은 사각형..
  • 이건 다시 속빈 동그라미 
  • 이건 동그란 점
 위에 보시다시피 목록의 type을 <li>태그에 지정을 해줌으로써 같은 목록리스트안에 각각의 다른 목록을 보여줄 수 있답니다.^^

 [응용 2] 이번에는 중첩된 목록의 예를 보도록 하죠.^^

소 스 예 제
<html><head><title>목록예제</title></head>
<body>
 <ol type="I">
  <li>사랑
    <ol type="A">
      <li>사랑이란....
      <li>사랑의 성질
      <li>사랑의 근거
    </ol>
  <li>사랑의 형태
    <ol type="A">
      <li>남녀간의 사랑
      <li>부부간의 사랑
      <li>부모와 자식간의 사랑
      <li>친구간의 사랑
      <li>짝사랑
    </ol>
  <li>사랑의 효력
    <ol type="A">
      <li>두근거림
      <li>뜨거움
      <li>애착
      <li>눈물
    </ol>
  <li>사랑의 결과
 </ol>
 </body></html>
  1. 사랑
    1. 사랑이란....
    2. 사랑의 성질
    3. 사랑의 근거
  2. 사랑의 형태
    1. 남녀간의 사랑
    2. 부부간의 사랑
    3. 부모와 자식간의 사랑
    4. 친구간의 사랑
    5. 짝사랑
  3. 사랑의 효력
    1. 두근거림
    2. 뜨거움
    3. 애착
    4. 눈물
  4. 사랑의 결과

 이번의 경우는 하나의 목록태그 안에 또 다시 목록태그를 넣어준 예입니다. 즉, 목록이 중첩된 것이죠. 문서작성할때 유용하게 사용할 수 있을 것 같네요...^^

 [응용 3] 스타일 시트를 이용한 이미지 목록 만들기 입니다.

소 스 예 제
<html><head><title>목록태그 예제</title>
<style>
 ul { list-style : url(http://tagmania.net/img/star.gif) inside}
</style></head>
<body>
 <ul>
  <li>오늘 밤에는 별이
  <li>뜨지 않았다......
  <li>별 볼일 없는 밤이다...-_-;;;
 </ul>
</body>

예제보기

 스타일 시트의 list-style 속성을 이용해서 목록을 이미지로 나타내어 주는 것이죠.

'웹디자인' 카테고리의 다른 글

[홈페이지제작 강좌] HTML 기본강좌 (링크태그 2)  (0) 2010.01.19
[홈페이지제작 강좌] HTML 기본강좌 (링크태그)  (0) 2010.01.19
[홈페이지제작 강좌] HTML 기본강좌 (목록 만들기 2 )  (0) 2010.01.19
[홈페이지제작 강좌] HTML 기본강좌 (목록 만들기)  (0) 2010.01.19
[홈페이지제작 강좌] HTML 기본강좌 (특수문자)  (1) 2010.01.19

'웹디자인' Related Articles

티스토리툴바