코딩독학 HTML 리스트 feat. tcpschool

[1일 1코딩]  코딩독학 HTML 리스트  feat. tcpschool

오늘은 HTML 리스트!

실습해본거 옮겨적기...

tcpschool 사이트에서 보면서

창 두개 띄워 놓고 

바로 바로 베끼면서 코딩실습하는중

---

HTML 리스트 (List)

리스트 : 여러 요소들을 일렬로 나열한 목록이나 명단

1. 순서가 없는 리스트 : unordered list

요소는 <li>태그

CSS의 list-style-type 으로 마커를 다른 모양으로 변경할 수 있음.

- disc : 기본 bullet

- circle : 흰색 작은 원 모양

-square : 사각형 모양

[실습]

<h4 style="color:salmon">list-style-type</h4>

  

<ul>

                <li style="list-style-type: square"> <h3 style="color:gold"> square </h3></li>

<li style="list-style-type: disc"> <h3 style="color:pink"> disc </h3> </li>

<li style="list-style-type: circle"> <h3 style="color:magenta"> circle </h3> </li>

</ul>

[결과]

컬러 되나하고 해봤는데 다 되넼ㅋㅋ

yellow가 gold보다 더 쨍하다

2. 순서가 있는 리스트 : ordered list

CSS의 list-style-type 으로 마커를 다른 모양으로 변경할 수 있음.

- decimal : 숫자 (기본)

- upper-alpha : 영문 대문자

- lower-alpha : 영문 소문자

- upper-roman : 로마 숫자 대문자

- lower-roman : 로마 숫자 대문자

[실습]

       <h4 style="color:salmon">list-style-type</h4>

  

<ol style="color:violet">

<li style="list-style-type: decimal">decimal</li>

<li style="list-style-type: upper-alpha">upper-alpha</li>

<li style="list-style-type: lower-alpha">lower-alpha</li>

                        <li style="list-style-type: upper-roman">upper-roman</li>

                        <li style="list-style-type: lower-roman">lower-roman</li>          

               </ol>

[결과]

3. 정의 리스트 (definition)

용어의 이름은 <dt> 태그

용어의 정의는 <dd> 태그

[실습]

<h1>정의 리스트</h1>

<dl>

<dt>호박</dt>

<dd>- 박과의 한해살이 덩굴성 채소</dd>

<dt>상추</dt>

<dd>- 국화과의 한해살이 또는 두해살이풀</dd>

</dl>

[결과]

출처 : TCP스쿨