HTML 독학을 위한 HTML순서 목록만들기 <ol> + <li> / <ul> +<li>

이번에는 HTML에서 순서 목록을 구분해주는 태그에 대해서 한번 공부해보도록 하겠습니다. 

 

순서가 있는 목록! <ol>태그 

<ol>태그의 속성
type : 항목 앞에 붙는 번호의 형식을 지정할 수 있다. 
        type="A"  (대문자)
        type="a"  (소문자)
        type="I"   (로마 숫자 대문자)
        type="i"   (로마 숫자 소문자)
type을 지정하지 않을 경우 기본 숫자로 표시됨.

start : 항목 앞 번호의 시작을 지정할 수 있다. 
        start ="2" 2번째 부터 시작 예) type="A" start="2" 속성설정시 B 부터 시작 

<ol>
	<li> 당근 </li>
    <li> 수박 </li>
    <li> 사과 </li>
</ol>

순서가 있는 목록 <ol>태그를 아무것도 설정하지 않고 <ol>태그의 리스트를 보여주는 <li>태그를 활용하여 당근, 수박, 사과 소스를 한번 확인해 보겠습니다. 

1. 당근
2. 수박
3. 사과

<ol>태그만을 사용하여 <li>태그로 리스트를 작성했을 뿐인데 리스트 앞에 1, 2, 3의 숫자를 표시하는 것을 볼 수 있습니다. 그러면 이제 속성을 대문자 A로 표시하는 소스로 속성을 지정하여 한번 확인해 보겠습니다. 

 

<ol type="A">
	<li> 당근 </li>
    <li> 수박 </li>
    <li> 사과 </li>
</ol>

<ol> 태그 속에 type="A" 속성을 추가해줍니다! 

1. 당근
2. 수박
3. 사과

결과는 리스트 앞에 A, B, C의 대문자 순서를 지정해 줍니다.! 그러면 이제 start속성으로 시작지점을 한번 변경해 보겠습니다. 

<ol type="A" start="2">
	<li> 당근 </li>
    <li> 수박 </li>
    <li> 사과 </li>
</ol>

<ol>태그 속에 속성으로 start="2"를 지정하면 결과는 어떻게 표시될가요?? 

2. 당근
3. 수박
4. 사과

start="2"로 지정하면 두번째부터 시작 한다는 뜻으로 B부터 시작해 B -> C -> D 순서로 시작합니다. 만약 3으로 지정했다면 C -> D -> E 순서로 리스트를 보여줄 것입니다. 

 

순서가 없는 목록 <ul>태그

<ul>태그의 속성
type : 항목앞에 붙는 ●, ○, ■ 순서없는 목록
       type="circle" (○)
       type="square" (■)
       type="disc" (●)
type을 지정하지 않은 경우 disc(●)가 기본으로 적용 됨

<ul>
	<li> 당근 </li>
    <li> 수박 </li>
    <li> 사과 </li>
</ul>

이번에는 <ul>태그를 활용해서 당근, 수박, 사과 목록을 한번 표시해 보겠습니다. 

• 당근
• 수박
• 사과

리스트 당근, 수박, 사과 앞의 기호는 type을 지정하지 않았기 때문에 ● 기호로 표시가 되는 것을 확인할 수 있습니다.

<ul type="square">
	<li> 당근 </li>
    <li> 수박 </li>
    <li> 사과 </li>
</ul>

이번에는 <ul>태그에 속성을 지정하여 ■ 기호로 표시하는 목록을 한번 만들어 보겠습니다. 

• 당근
• 수박
• 사과

 

순서가 있는 목록<ol>과  순서가 없는 목록<ul>에 대해서 살펴봤습니다. 순서가 없는 목록<ul>태그는 생각보다 사용빈도가 높은 태그로 사용법을 익혀두시는 것이 좋습니다. 

 

html에 대해서 궁금한 점이 있으시면 아래 댓글로 남겨주시면 가능한 먼저 기능을 다룰 수 있도록 해보겠습니다. HTML, CSS, JAVASCRIPT에 대한 기능이 궁금하시면 아래 댓글에 남겨주세요.