Samla's Study

 

1. "ol" - 순서가 있는 리스트 태그 (Ordered List)

• type 속성:
  • "a" 소문자 알파벳순으로 진행되는 리스트
  • "A" 대문자 알파벳순으로 진행되는 리스트
  • "1" 숫자순으로 진행되는 리스트 (default 값임)

2. "ul" - 순서가 없는 리스트 태그 (Unordered List)

• list-style-type 속성
  • default 값 : 동그라미
  • "square" : 네모
• 하위 "li" 태그에 list-style 속성을 "none"으로 설정 시 리스트 서식 제거

 

 

 

 

3. "li" - 리스트요소 태그 (ol, ul의 하위 태그 -  List Item)

 

<style>
#capital li{
	/* 리스트 순서가 영문대문자로 진행*/
    type:"A"
}

#small li{
	/* 리스트 순서가 영문소문자로 진행*/
    type:"a"
}

#number li{
	/* 리스트 순서가 숫자로 진행 - 기본값이므로 생략해도 같은 값*/
    type:"1"
}


#square li{
	/* 리스트 표기 "네모"로 바꾸기 */
    list-style-type: square;
}

#styling li{
	/* 리스트 표기 없애기 + 이래저래 꾸며보기*/
    list-style: none;
    margin-bottom: 10px;
    background-color: skyblue;
    color: white;
    padding 10px 20px;
    
}

#styling {
	padding-left: 0;
    width: 200px;
}

</style>

<ol id="capital">
	<li>대한민국</li>
	<li>남아프리카공화국</li>
	<li>오스트레일리아</li>
</ol>


<ol id="small">
	<li>소나무</li>
	<li>전나무</li>
	<li>벚나무</li>
</ol>


<ol id="number">
	<li>양궁</li>
	<li>유도</li>
	<li>수영</li>
</ol>



<ul id="square">
	<li>수학</li>
	<li>과학</li>
	<li>영어</li>
</ul>

<ul id="styling">
	<li>미술</li>
	<li>음악</li>
	<li>체육</li>
</ul>