HTML 목록 표시하기

개미Coder
|2024. 4. 5. 10:38
반응형

한 줄 정리

<ol>(Ordered List) : 번호가 달리는 순서 목록 작성

<ul>(Unordered List) : 번호가 없는 순서 목록 작성

<li> : 목록에 표기할 글자를 넣는 태그

 


##목록 표시하기



-목록이란 연관있는 항목(item)들을 나열하는것을 의미한다.

-HTML은 '순서있는 목록'과  '순서없는 목록'으로 구분한다.

 



# 순서있는 목록 (Ordered List)

<body>
        <h1>프로그래밍 공부 순서</h1>
        <ol>
            <li>변수</li>
            <li>연산자</li>
            <li>조건문</li>
            <li>클래스</li>
            <li>상속</li>
            <li>인터페이스</li>
        </ol>
</body>

순서있는 목록(Ordered List)는 블럭 항목이다.

 


 


# 순서없는 목록 (Unordered List)

-ol과 ul의 차이는 앞에 붙는 기호 차이이다.

-이 기호 또한 변경이 가능하다.

<body>

    <ul>
        <li>요크쇼테리어</li>
        <li>말티즈</li>
        <li>시츄</li>
        <li>도베르만</li>
        <li>골든리트리버</li>
        <li>슈나우저</li>
        <li>퍼그</li>
    </ul>

</body>

 

 


 

 

# ol과 ul을 동시에 적용해서 활용하기

 

<body>
    <h1>예제1</h1>
    <ol>
        <li>이탈리아 쇼핑 리스트</li>
        <li>이탈리아 커피 리스트</li>
        <li>이탈리아 빵맛집 리스트</li>
        <ul>
            <li>빵 맛집 리스트</li>
            <li>피자 맛집 리스트</li>
        </ul>
        <li>이탈리아 관광 리스트</li>
    </ol>
</body>

</html>
반응형

'HTML↗' 카테고리의 다른 글

HTML select / textarea  (0) 2024.04.05
HTML input(인풋) 태그 (가장 많이 사용하게 될..)  (0) 2024.04.05
HTML 링크(link) <a>태그  (0) 2024.04.05
HTML 컨테이너 태그 / 전역 속성  (0) 2024.04.04
HTML 이미지 표시하기  (0) 2024.04.04