[HTML] 리스트 만들기 <ul>, <ol>, <li>
프로그래밍 언어/html

[HTML] 리스트 만들기 <ul>, <ol>, <li>

반응형

<ul> : unordered list (순서 없는 목록)

속성

<ul style="list-style-type: 속성 값"> 

  • disc : 검정원, default
  • circle : 하얀원
  • square : 네모
  • none : 글자만 나타내기

<ol> : ordered list (순서 있는 목록)

속성

  • type : 순서를 어떤 식으로 표시할지 타입을 정할 수 있다.
    • 1
    • a
    • A
    • i
    • I
  • start : 시작하고 싶은 번호를 정할 수 있다. default로 1부터 시작하지만, 100번 혹은 30번부터 시작하고 싶을 때 사용

list안에 list 또한 사용이 가능하다.

<oi> 안에 <ui> 사용 가능, 반대로도 사용이 가능하다.


예제1 : <ul>

<ul>
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>
  • coffee
  • tea
  • milk

예제2 : attribute <ul>

<ul style="list-style-type: square">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ul>


예제3 : type <ol>

<ol type="a">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ol>


예제3 : type, start <ol>

<ol start="100">
	<li>coffee</li>
	<li>tea</li>
	<li>milk</li>
</ol>
  1. coffee
  2. tea
  3. milk

예제4 : 리스트 안에 리스트

<ul style="list-style-type: circle">
	<li>coffee
		<ol type="i">
			<li>black coffee</li>
			<li>milk coffee</li>
		</ol>
	</li>
	<li>tea</li>
	<li>milk</li>
</ul>

반응형