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

2021. 6. 3. 21:52·프로그래밍 언어/html
반응형

<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>

반응형
저작자표시 (새창열림)

'프로그래밍 언어 > html' 카테고리의 다른 글

[HTML] <form>, 다양한 input type, 식별자(id, class, name), <a> vs <form>  (1) 2021.06.03
[HTML] 테이블 만들기 <table>tag, <tr>, <th>, <td>  (0) 2021.06.03
[HTML]<img> 태그, src 속성, alt 속성, title 속성, image파일 종류  (2) 2021.06.03
[HTML] <a>태그 (anchor tag)  (1) 2021.06.03
[HTML] tag 안에서 사용하는 tag들(b, strong, em, mark, i, del, sub, sup)  (0) 2021.06.02
'프로그래밍 언어/html' 카테고리의 다른 글
  • [HTML] <form>, 다양한 input type, 식별자(id, class, name), <a> vs <form>
  • [HTML] 테이블 만들기 <table>tag, <tr>, <th>, <td>
  • [HTML]<img> 태그, src 속성, alt 속성, title 속성, image파일 종류
  • [HTML] <a>태그 (anchor tag)
:j
:j
ddongjunn@gmail.com
  • :j
    dev.j
    :j
  • 전체
    오늘
    어제
    • :j
      • 프로그래밍 언어
        • Java
        • html
        • JavaScript
        • XML
        • JSON
        • CSS
        • jQuery
        • Web
        • k8s
        • JPA
      • 프레임워크
        • Spring
      • 코딩 테스트
        • Java
      • 네트워크
        • CCNA
      • 데이터베이스
        • Mssql
        • Oracle
      • 회고
      • :j story
      • CS
  • 블로그 메뉴

    • 홈
    • 태그
    • github
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    항해플러스백앤드
    항해백앤드
    항해플러스
    항해솔직후기
    항해99
    오버로딩
    Name
    지역변수
    Queue
    HAVING
    appendChild
    group by
    다형성
    멤버변수
    항해플러스백엔드
    오버라이딩
    class
    <br>
    id
    MSSQL
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
:j
[HTML] 리스트 만들기 <ul>, <ol>, <li>
상단으로

티스토리툴바