웹프로그래밍/HTML

HTML 리스트 - Unordered Lists

유노brain 2023. 9. 4. 19:28
반응형

비순서형 리스트

<ul>의 태그로 시작하여 요소 안에 <li>로 시작이 되어야한다.

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
  <li>SamSung</li>
  <li>HYUNDAI</li>
  <li>SK</li>
</ul>  

</body>
</html>

 

비순서형 리스트 스타일 변경

CSS에서 list-style-type의 구조를 가지며 여러가지 type으로 바꿀 수 있다.

disc: 목록 항목 표시를 글머리로 만든다.
circle: 목록 항목 표시를 원형으로 만든다.
square: 목록 항목 표시를 사각형으로 만든다.
none: 목록 항목 표시를 지정하지 않는다.
<!DOCTYPE html>
<html>

<body>

    <h2>An unordered HTML list</h2>

    <ul style="list-style-type:disc;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    <ul style="list-style-type:square;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    <ul style="list-style-type:circle;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    <ul style="list-style-type:none;">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul>  
      

</body>

</html>

위의 예시를 통해 비순형 리스트의 스타일이 변경되있는것을 알 수 있다.

반응형