[HTML]목록태그 <ul> <ol> <dl>

✨ UI/💗 HTML

[HTML]목록태그 <ul> <ol> <dl>

뉴이 NUEY 2024. 12. 21. 23:59

<ul>
: 앞에 ●를 달아줍니다.

지금 티스토리에서 사용하는 리스트가 바로 이것입니다.
<ul>태그 안에 <li>를 사용합니다.

<ol>
: 앞에 숫자를 달아줍니다.

마찬가지로 <ol>태그 안에 <li>를 사용해 적어줍니다.
<ol> 안에 <ol>이 있을 경우 들여쓰기를 해줍니다.

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>목록태그</title>
</head>
<body>

    <ol>
        <li>첫 번째 항목</li>
        <li>두 번째 항목</li>
        <li>세 번째 항목</li>
        <ol>
            <li>네 번째 항목</li>
            <li>다섯 번째 항목</li>
            <li>여섯 번째 항목</li>
        </ol>
    </ol>

    <ul>
        <li>첫 번째 항목</li>
        <li>두 번째 항목</li>
        <li>세 번째 항목</li>
        <p>&lt;p>를 적었을 경우</p>
    </ul>
    
    <a href="../index.html">index로 이동</a>
</body>
</html>

<dl><dt><dd>
: 앞에 뭐가 안 붙는 목록.

<dl> : 목록을 감싸기
- <dt> 제목 </dt>
- <dd> 내용 </dd>
</dl>

전체코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>정의형 목록</title>
</head>
<body>
    <dl>
		<dt>제목</dt>
		<dd>내용</dd>
	</dl>
	
	<dl>
		<dt>공부시간</dt>
		<dd>오전시간</dd>
		<dd>점심시간
			<dl>
				<dt>식사메뉴</dt>
				<dd>샐러드</dd>
				<dd>순두부찌개</dd>
				<dd>중화요리 1인세트</dd>
				<dd>감자탕</dd>
			</dl>
	</dd>
	<dd>오후시간</dd>
    <br/>
    <a href="../index.html">index로 이동</a>
</body>
</html>

저작자표시 비영리 변경금지

'✨ UI > 💗 HTML' 카테고리의 다른 글

[HTML]이미지 img (0)	2024.12.22
[HTML]테이블 만들기 & 셀 병합 (1)	2024.12.22
[HTML]Entities (&nbsp 공백, &quot 큰 따옴표" 등) (0)	2024.12.21
[HTML]경로 종류와 사용법 (0)	2024.12.21
[HTML]태그 종류. 블록 & 인라인 요소 (1)	2024.12.21

현재글[HTML]목록태그 <ul> <ol> <dl>

분류 전체보기 (470)

🍃 Spring (29)

☕ JAVA (114)

🐍 Python (41)

✨ UI (33)

😼 Git (3)

☁ Network (10)

💬 프로그래밍 표현식 (2)

🕸 Algorithm (84)

📜 CleanCode (24)

🛠 도구 (53)

💾 Data Base (1)

[ERROR] (5)

📑 개발 사전 (35)

🏙 취직 & 업무 (5)

♥ Life (20)

❔ (1)

Nuey.log

[HTML]목록태그 <ul> <ol> <dl>

'✨ UI > 💗 HTML' 카테고리의 다른 글

'✨ UI/💗 HTML'의 다른글

티스토리툴바

[HTML]목록태그 <ul> <ol> <dl>

'✨ UI > 💗 HTML' 카테고리의 다른 글

'✨ UI/💗 HTML'의 다른글

관련글

티스토리툴바