[HTML] 목록(리스트) 태그 [3/13 Study]

[HTML] 목록(리스트) 태그 [3/13 Study]Frontend/HTML2024. 3. 13. 23:54@동혁이

Table of Contents

HTML 목록(리스트) 태그

<ul>

: 순서가 없는 리스트 (Unordered List)

순서가 없기 때문에 앞에 ●과 같은 불릿이 붙는다

CSS에서 list-style: none; 으로 순서 표시 없앨수 있음

<ol>

: 순서가 있는 리스트 (Ordered List)

<ul> 태그와 달리 <ol> 태그는 기호가 아닌 숫자나 영문 순서가 들어감

사용할 수 있는 속성들이 있다

속성!!

1) type=" "

1	숫자(기본값)
a	영어 소문자
A	영어 대문자
i	로마숫자 소문자
I	로마숫자 대문자

2) start=" "(중간 부터 시작하고 싶을때)

<li>

: list item

<ul> 태그와 <ol> 태그 안에서 각 항목을 나열할 때 사용한다

마지막으로 <ul>, <ol>, <li> 모두 쓰이는 예제

<html>
	<body>
		<ol>
			<li>목록1</li>
			<li>목록2</li>
		</ol>

		<ul>
			<li>목록1</li>
			<li>목록2</li>
			<li>목록3</li>
			<ol>
				<li>목록3-1</li>
				<li>목록3-2</li>
			</ol>
		</ul>
	</body>
</html>

결과값

1. 목록1
2. 목록2
● 목록1
● 목록2
● 목록3
	1. 목록3-1
	2. 목록3-2

https://inpa.tistory.com/entry/HTML-%F0%9F%8F%B7%EF%B8%8F-%ED%83%9C%EA%B7%B8-%EC%9A%94%EC%95%BD%ED%91%9C

🏷️ HTML 태그</> 종류 총모음

태그 모음 요약표 html 태그들을 표로 정리한 요약표 이다. 표의 태그 링크를 누르면 예시 코드 페이지로 이동된다. 태그 설명 주석(comment)을 정의함. 해당 문서(document)의 타입을 정의함. 다른 콘

inpa.tistory.com

위 블로그에서 참조하면서 다시 한번 공부했다

🔥마무리

리스트 태그도 자주 쓰이는 태그들 이기 때문에 능숙하게 다뤄야 할 것 같고

보통 CSS에서 list-style: none; 으로 순서 표시 없앨수 있기에 리스트 태그를 사용하게 된다면 이 기능과 함께 같이 쓴다고 한다

화이팅😊

@동혁이 :: Eun_Frontend

프론트엔드 공부일지 입니다.

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!