본문 바로가기
html

[html/css]목록을 만드는 <ul> <ol> <li>태그

by 지구별에 2014. 7. 9.
반응형

 

 

[html/css]목록을 만드는 <ul> <ol> <li>태그

 

 

목록을 만드려면 <ul> <ol> <dl>태그를 사용하는데요

 

오늘은  <ul> <ol>에 대해 다루고 다음 시간에 <dl>태그를 다룰게요.

 

 

목록을 만드는 방법은 아래 세 가지가 있습니다

 

<ul>내용</ul>

<ol>내용</ol>

<dl>내용</dl>

 

 

 

<ol>태그는 ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용합니다

 

<ul>태그는 unordered list의 약자로, 순서가 필요 없는 목록을 만듭니다

 

<dl>태그는 definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만듭니다.

 

 

<ol>과 <ul>의 각 항목들을 나열할 때는 <li> 태그를 사용하는데 list item의 약자입니다.

 

 

▶사용 예

 

<ul>

<li>영어</li>

<li>수학</li>

<li>과학</li>

</ul>

 

 

 

 

▶같이 사용할 수 있는 속성

 

type  :  1 / a / A / i / I  기본값은 1 

* <ol>일 경우 속성값임

* <ol>에서 type은 퇴화 속성이었으나, 지금은 그렇지 않음.

 

type  : disc / circle / square 기본값은 disc  

*<ul>일 경우  속성값

HTML5에서 지원하지 않음.

 

start   <ol>의 시작 값  (예. start="5"라고 하면 5, 6, 7 순으로 순서가 매겨짐)

 
reversed      reversed가 있으면, 항목 순서가 거꾸로임 (3,2,1)
                  없으면 순차적임(1,2,3)

HTML5에서 새로운 속성

 

compact 는 퇴화 속성,  대신 css의 line-height 속성 사용

  


 

▶html 작성 예입니다~ ol ul li.htm

 

 

 html

 

<html>
<head>

<style>
body{background: #FAED7D;}
h2{color:#997000;}
</style>
</head>

<body>
 

<h4>Ordered List</h4>
<ol type="I">
 <li>영어</li>
 <li>음악</li>
 <li>수학</li>
 <li>과학</li>
</ol>


<ol start="5">
 <li>영어</li>
 <li>음악</li>
 <li>수학</li>
 <li>과학</li>
</ol>

 

<h4>Unordered List</h4>
<ul>
 <li>명사</li>
 <li>형용사</li>
 <li>동사</li>
 <li>부사</li>
</ul>

</body>
</html> 

  

 

▶ 실행 화면입니다.

 

 

 

 

css로 목록 스타일 지정하는 list-style 속성 배우기

 

정의 목록 dl, dt, dd 태그

 

글자색 color 속성, 배경색 background-color 속성 배우기

 

글꼴을 지정하는 font 속성 배우기

 

반응형

댓글3

  • 민딩 2015.02.05 11:55

    잘배우고있어요~ 처음 1번부터 쭉보고있는데 정리도 잘되있고 예제도 좋네요 넘 감사해요^^)//
    답글

  • 람이 2016.09.21 09:08

    좋은 정보 감사합니다^^ 헷갈리는 부분이 있었는데 정확히 알고가요!! 감사합니다~~~
    답글