|
 |
 HTML 기본강좌
3. 목록만들기(3)
|
 |
[1][2][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> |
- 사랑
- 사랑이란....
- 사랑의 성질
- 사랑의 근거
- 사랑의 형태
- 남녀간의 사랑
- 부부간의 사랑
- 부모와 자식간의 사랑
- 친구간의 사랑
- 짝사랑
- 사랑의 효력
- 두근거림
- 뜨거움
- 애착
- 눈물
- 사랑의 결과
| 이번의 경우는 하나의
목록태그 안에 또 다시 목록태그를
넣어준 예입니다. 즉, 목록이 중첩된
것이죠. 문서작성할때 유용하게 사용할
수 있을 것 같네요...^^ |
|
[응용 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
속성을 이용해서 목록을 이미지로
나타내어 주는 것이죠.
|
|
|
이전 페이지로 || 태그연습장 || 메인 페이지로
|
|
|
|
