반응형

📝ol 태그

<!DOCTYPE html>
<html lang="en">
<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>
<h3>라면 끓이는 방법</h3>
<ol type="A">
    <li>물을 끓인다</li>
    <li>라면과 스프를 넣는다</li>
</ol>
</body>
</html>

사진으로 이해하시면 편합니다.

 

📝ul 태그

<!DOCTYPE html>
<html lang="en">
<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>
<h3>먹고 싶은 음식</h3>
<ul>
    <li>감자탕</li>
    <li>피자</li>
</ul>
</body>
</html>

ol태그와 다른 점은 마커 타입을 정할 수 없습니다. 하지만li을 쓴다는 공통점이 있습니다.

 

📝dl, dt, dd 태그

<!DOCTYPE html>
<html lang="en">
<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>
<h3>웹 브라우저 종류</h3>
<dl>
    <dt>Internet Explorer</dt>
    <dd>
        마이크로소프트에서 만든 브라우저로
        현재 시장에서 가장 많이 사용한다.
    </dd>
</dl>

</body>
</html>

사진으로 보시는 거와 같이 용어 설명과 같은 구조에서 자주 쓰입니다. <dl>  로 감싸주고, <dt>  는 용어이름, <dd> 세부내용입니다.

반응형