HTML_02_목록 태그 관련

html 코드 깔끔하게 정리하는 tip
html 태그 아래 head태그부터 body태그까지 tab으로 들여쓰기

ul(Unordered List) 태그

순서가 없는 목록 (단순 기호)

ol(Ordered List) 태그

순서가 있는 목록 (123,abc 순서가 있는 태그)

ol 태그의 type 속성

type="a" -> 소문자 알파벳
type="A" -> 대문자 알파벳
type="i" -> 소문자 로마 숫자
type="I" -> 대문자 로마 숫자
type="1" -> 숫자(기본값)
start 속성 : 시작 번호 지정
reversed 속성 : 순서 반대로

li(List item) 태그

ul, ol 태그 내부에 들어가 목록의 요소를 나타내는 태그 (자식 태그)

ul 태그 사용 예)

<ul>
  <li>김밥</li>
  <li>서브웨이</li>
  <li>백반</li>
</ul>

하위 속성

<ul>
	<li>대분류 1</li>
 	<li>대분류 2
		<ol>
			<li>소분류 1</li>
			<ul>
				<li>리스트</li>
			</ul>
			<li>소분류 2</li>
			<li>소분류 3</li>
		</ol>
	</li>
	<li>대분류 3</li>
</ul>

잘못된 예)

<ul>
  여기다가 <br>
  이렇게 <br>
  써봤자 목록으로 인식이 안됩니다.
</ul>

ol 태그 사용 예)

type 속성 입력 X (기본값으로 표시)

<ol>
	<li>김밥</li>
	<li>서브웨이</li>
	<li>백반</li>
</ol>

type="a" 속성

<ol type="a">
	<li>김밥</li>
	<li>서브웨이</li>
	<li>백반</li>
</ol>

type="i" 속성

<ol type="i">
	<li>김밥</li>
	<li>서브웨이</li>
	<li>백반</li>
</ol>

type="I" 속성

<ol type="I">
	<li>김밥</li>
	<li>서브웨이</li>
	<li>백반</li>
</ol>

start 속성

<ol type="1" start="5">
	<li>김밥</li>
	<li>서브웨이</li>
	<li>백반</li> 
</ol>

reversed 속성

<ol type="1" reversed>
	<li>김밥</li>
	<li>서브웨이</li>
	<li>백반</li> 
</ol>