[HTML] 기본목록태그를 사용해보자 <ui> <ol> <li> 태그

목록태그

이번시간에는 목록태그에 대해 알아보도록 하겠다~

목록태그는 웹에서 굉장히 많이 사용되는 태그로 메뉴를 만들때도 사용된다.

목록을 만들고 그 목록의 글자만 남겨서 모양을 내면 그것이 메뉴가 된다.

예를들어보면

위 사진과 같이 어떠한 대분류 안에 소분류로 메뉴가 들어가게 만든것도 목록태그의 예라고 볼수있다.

ol tag

ol 태그는 order list 의 약자로 순서가 있는 태그이다.

즉 ol태그로 감싼 내용은 번호가 생긴다.  사용법은 아래와 같다.

	
	
ol tag
	

		
Naver
		
Daum
		
Tistory
	

위 코드를 보면 <ol> 태그안에 <li> 태그가 들어가는데 li 는 해당목록 list 를 나타낸다 

결과를 확인해보자.

위와같이 1,2,3, 순서있는 목록이 생겻다.

ul tag

ul 태그는 unorder list 의 약자로 순서가 없는 태그이다.

사용법은 ol과 마찬가지로 <ol> 코드안에 <li> 태그로 목록을 나타낸다.

	
	
ul tag
	

		
Naver
		
Daum
		
Tistory
	

결과를 확인해보면

위와 같이 <ol> 태그와달리 <ul> 태그로 만든 목록은 숫자대신 도트가 생겼다.

중첩 목록

목록 태그는 중첩으로 나타낼수도 있다. 코드를 직접 보면 

	
	

		
 분식
			

				
떡볶이
				
순대
				
튀김
			
		
		
 한식
			

				
비빔밥
				
된장찌게
				
호박죽
			
		
	

위 처럼 사용하게되면 순서목록이 없는 대분류 밑에 순서가있는 소목록이 나타난다.

결과를 보면 확실하게 이해할수 있을것이다.

매우 쉬운 예로 직접따라해보면 금방 어떤건지 이해할수있다.

주의할 내용은 위코드와 같이 들여쓰기를 사용하지않고 중첩목록을 쓰다보면 알아보기 힘들기때문에

항상 들여쓰는것을 생활화 하도록 하자~!