HTML에서 리스트 사용방법(ol, ul, li)

신규 블로그를 만들었습니다!

2020년 이후부터는 아래 블로그에서 활동합니다.

댓글로 질문 주셔도 확인하기 어려울 수 있습니다.

>> https://bluemiv.tistory.com/

HTML에는 리스트를 표현할 수 있는 방법이 크게 2가지가 있다.

하나는 ol, ul을 사용하는 방법, 두번째는 dl, dt를 사용하는 방법이다.

무엇을 사용할지는 개발자 마음이다. 다만 추천하는 방법은 ol이나 ul이다.

ol, ul

이 방법은 흔히 아는 방법이라 다들 많이 사용한다. ol은 순서를 표시해주고, ul은 순서를 표시해주지 않는다.

예를들어,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>리스트</title>
</head>
<body>
    <h3>메뉴 리스트</h3>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
    </ul>

    <h3>지역 리스트</h3>
    <ol>
        <li>서울</li>
        <li>경기</li>
        <li>충청</li>
        <li>전라</li>
        <li>경상</li>
        <li>강원</li>
    </ol>
    
    <h3>사이트 리스트</h3>
    <ol>
        <li><a href="https://hongku.tistory.com" target="_blank">블로그</a> blank를 이용하면 새로운 탭에서 창이 열린다.</li>
        <li><a href="https://www.google.com" target="_self">Google</a> self를 이용하면 바로 그 화면에서 창이 열린다.</li>
        <li><a href="https://www.naver.com">Naver</a></li>
    </ol>
</body>
</html>

위와 같이 ul을 사용하면, 동그란 모양의 기호로 리스트가 나열된다. 반면, ol를 사용하면 1번부터 차례대로 숫자형태로 리스트가 나열된다.

그리고 꽤 유용한 속성이 있는데, target 속성이다.

target이라는 속성에 _blank를 넣으면 새로운 탭으로 사이트가 열리고, _self라는 값을 넣으면 현재 화면에서 사이트가 열린다.(기본값은 _self)

예제 확인
https://taehongdev.github.io/html_css_study/exam03/exam03_01.html

3장 예제1

taehongdev.github.io

dl, dt

dl과 dt를 이용하여 표현하는 방법이 있다. 이 방법은 잘 사용하지 않는 방법이다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8" />
    <title>3장 예제2</title>
</head>
<body>
    <dl>
        <dt>메뉴 리스트</dt>
        <dd>메뉴1</dd>
        <dd>메뉴2</dd>
        <dd>메뉴3</dd>
        <dd>메뉴4</dd>
        <dd>메뉴5</dd>

        <dt>지역 리스트</dt>
        <dd>경기</dd>
        <dd>서울</dd>
        <dd>충청</dd>
        <dd>경상</dd>
        <dd>제주</dd>
    </dl>
</body>
</html>

dl안에 dt와 dd를 사용한다. dt는 타이틀(Title)의 역할을 하고 dd는 그 안의 항목 역할을 한다.

위와 같이 표현이 가능하다.

예제 확인
https://taehongdev.github.io/html_css_study/exam03/exam03_02.html

3장 예제2

taehongdev.github.io

다른 글

2018/10/19 - [WEB/HTML&CSS] - CSS :: 버튼(Button) 예쁘게 꾸미기, 여러개의 버튼 그룹화 하기

CSS :: 버튼(Button) 예쁘게 꾸미기, 여러개의 버튼 그룹화 하기

CSS 버튼 예쁘게 만들기 WEB 개발을 하다보면 버튼은 자주 사용하게 됩니다. 이건 제가 자주 사용하는 방법인데, 버튼을 좀 더 예쁘게(?) 표현할때 많이 사용합니다. 결과물부터 확인해보면 아래 사진과 같습니다...

hongku.tistory.com

2018/07/11 - [WEB/JS&jQuery] - jQuery :: 제이쿼리를 이용하여 비밀번호 값 비교하기 (키보드 눌렀을때 비교)

jQuery :: 제이쿼리를 이용하여 비밀번호 값 비교하기 (키보드 눌렀을때 비교)

비밀번호 값 비교하기 회원가입을 할때, 비밀번호를 잘못치는경우가 있을 수 있다. 그래서 보통 비밀번호를 2번 입력하여 그 값이 일치하는지 확인한다. jQuery(제이쿼리)를 이용해서

태그의 비밀번호 값 2..

hongku.tistory.com

저작자표시 비영리 동일조건

'WEB > HTML&CSS' 카테고리의 다른 글

CSS의 기본정리. 반드시 알아야하는 CSS 내용 (0)	2019.03.19
HTML 오디오 태그 (Audio, iframe) 음악 자동재생 (3)	2019.03.18
HTML에서 이미지 가져오기 (img 태그) (1)	2019.03.17
HTML 테이블 사용방법 (table) (0)	2019.03.16
CSS :: 버튼(Button) 예쁘게 꾸미기, 여러개의 버튼 그룹화 하기 (28)	2018.10.19