HTML : 리스트 (목록) 만들기 <ul, ol, dl>

ㅇ_ㅇ_ㅂ·2023년 10월 18일

HTML

목록 보기
6/13
post-thumbnail

HTML 에서 목록을 생성할 때 사용할 수 있는 태그는 <ul> , <ol> , <dl> 3가지가 있음

🟣 ul 태그

순서가 없는 비순서형 목록 생성
번호가 없는 리스트
<ul> 태그로 시작
리스트 항목은 <li> 로 시작

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>    
    <h2> 커피 메뉴 </h2>
    <ul> <!-- 리스트 시작 -->
        <li> 아이스 아메리카노 </li>    <!-- 리스트 항목 -->
        <li> 말차 크림 프라푸치노 </li> <!-- 리스트 항목 -->
        <li> 아이스 히비스커스 </li>    <!-- 리스트 항목 -->
        <li> 초코라떼 </li>
    </ul> <!-- 리스트 종료 -->
</body>
</html>

🔽 <ul> 태그 사용해서 출력 🔽


🟣 ol 태그

순서형 목록을 생성
번호가 있는 리스트
<ol> 태그로 시작
리스트 항목은 <li> 로 시작

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>    
    <h2> 커피 메뉴 </h2>
    <ol> <!-- 리스트 시작 -->
        <li> 아이스 아메리카노 </li>    <!-- 리스트 항목 -->
        <li> 말차 크림 프라푸치노 </li> <!-- 리스트 항목 -->
        <li> 아이스 히비스커스 </li>    <!-- 리스트 항목 -->
        <li> 초코라떼 </li>
    </ol> <!-- 리스트 종료 -->
</body>
</html>

🔽 <ol> 태그 사용해서 출력 🔽


🟣 dl 태그

정의형 목록
용어와 용어 설명을 나열한 형태의 목록을 만들 때
<dl> 태그로 시작
<dt> 태그는 항목
<dd> 태그는 항목에 대한 설명

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 웹 브라우저 제목 </title>
</head>
<body>    
    <h2> 커피 메뉴 </h2>
    <dl> <!-- 정의 리스트 시작 -->
        <dt> 아이스 아메리카노 </dt> <!-- 단어 -->
        <dd> 에스프레소에 뜨거운 물을 희석시켜 만든 음료 </dd> <!-- 단어의 설명 -->
        <dt> 말차 크림 프라푸치노 </dt> 
        <dd> 제주 유기농 말차로 만든 크림 프라푸치노 </dd>
        <dt> 아이스 히비스커스 </dt> 
        <dd> 무궁화속 두해살이풀인 로젤 열매를 말린 후 끓여 우려낸 대용차 </dd>
        <dt> 초코라떼 </dt>
        <dd> 핫초코가루로 시원하게 먹기 좋지만 살이 디룩 디룩 </dd>
    </dl> <!-- 정의 리스트 종료 -->
</body>
</html>

🔽 <dl> 태그 사용해서 출력 🔽

profile
공부 중. !!! !

0개의 댓글