반응형

안녕하세요. HTML강사 코딩하는 고양이입니다.

오늘은 목록 태그와 설명 태그를 배워볼 거예요.

시작하기 전에 초기 설정을 해주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

이것을 복사하세요.

 

 

1. 목록태그

목록태그의 종류는 <ul>과 <ol>이 있는데요.

그 안에 <li>(내용)</li>가 들어가죠.

<ul>은 아래형태로 만들어지고

  • 코
  • 딩
  • 하
  • 는
  • 고
  • 양
  • 이

<ol>은 아래형태로 만들어집니다.

  1. 코
  2. 딩
  3. 하
  4. 는
  5. 고
  6. 양
  7. 이

 

예)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>코딩하는 고양이</li>
        <li>C언어</li>
        <li>JAVA</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>한다</li>
    </ul>
    <ol>
        <li>코딩하는 고양이</li>
        <li>C언어</li>
        <li>JAVA</li>
        <li>HTML</li>
        <li>CSS</li>
        <li>한다</li>
    </ol>
</body>
</html>

실행 결과

 

 

2. 설명 태그

설명태그는 <dl>, <dt>, <dd>가 있습니다.

구조는 아래처럼 생겼습니다.

<dl>
    <dt>(제목)</dt>
    <dd>
    	(본문)
    </dd>
</dl>

 

예)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>하이하이</dt>
        <dd>
            하ㅏ이하이하이하이하ㅣ아히아히아힌아히ㅏ이힝하ㅣ앟
        </dd>
    </dl>
</body>
</html>

실행 결과

 

 

오늘의 문제!

 

1번 문제

아래 본문과 똑같이 HTML로 만드세요

더보기
  1. 우리는
  2. 트롤나라의
  3. 트롤
  4. 파크

 

2번 문제 (심화)

아래 본문과 같이 HTML로 만드세요 (이용 태그 : <dl>, <dt>, <dd>)

더보기

HTML

  1. 하이하세요
  2. 티스토리 입니다
  3. 모장에서
  4. 라지사이즈 가져옴

 

 

1번 답

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>우리는</li>
        <li>트롤나라의</li>
        <li>트롤</li>
        <li>파크</li>
    </ol>
</body>
</html>

 

2번 답

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>HTML</dt>
        <dd>
            <ol>
                <li>하이하세요</li>
                <li>티스토리 입니다</li>
                <li>모장에서</li>
                <li>라지사이즈 가져옴</li>
            </ol>
        </dd>
    </dl>
</body>
</html>

 

오늘은 여기까지 ㅂㅂ

반응형

'HTML, CSS > 이론' 카테고리의 다른 글

[HTML/CSS] 5. 표 태그  (0) 2023.03.23
[HTML/CSS] 4. CSS의 기초  (1) 2023.03.22
[HTML] 3. 이미지 태그와 링크 태그  (2) 2023.03.21
[HTML] 1. 텍스트 태그  (0) 2023.03.19
[HTML] 0. 초기 셋팅  (0) 2023.03.18

+ Recent posts

티스토리툴바