development/html javascript CSS

[HTML] ul과 ol

Happyoon ~ 2021. 10. 6. 23:35
728x90
반응형

ul 은 unordered list, ol은 ordered list를 뜻한다. 

 

예제를 통해 ul과 ol에 대해 살펴보자.

예제 1 - ul 

Step05_ul.html

<!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>Step05_ul.html</title>
</head>
<body>
   <h1>순서 없는 목록(unordered list) ul 요소</h1>
   
   <h2>친구 목록입니다.</h2>
   김구라 <br>
   해골 <br>
   원숭이 

   <p>
       어떤 목록을 나타낼때 문자열을 단순히 나열하는게 아니고 
       아래와 같이 구조화를 해서 나열해야 한다.
   </p>

   <h2>친구 목록 입니다.</h2>
   <ul>
       <li>김구라</li>
       <li>해골</li>
       <li>원숭이</li>
    
   </ul>
   <p>ul 은 블럭요소이며 위아래 마진과 왼쪽 페딩을 가지고 있다.</p>
   <p>
       ul 은 block element 이며 margin-top 과 margin-bottom 과 padding-left 를 
       가지고 있다.
   </p>
</body>
</html>

 

실행 결과

ul의 구조

ul 구조

 

위의 사진처럼, ul과 ol은 공통적으로 왼쪽 padding과 위아래 margin을 가진다.

*padding은 border과 content 사이의 빈 공간을 뜻하고, margin은 border 바깥쪽을 뜻한다.

ul과 ol 다음에는 반드시 <li>가 와야 한다.

 

 

예제 2 - ol

Step05_ol.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="vitewport" content="width=device-width, initial-scale=1.0">
    <title>Step06_ol.html</title>
</head>
<body>
    <h1>순서 있는 목록 (ordered list) ol 요소</h1>
    <p>목록 앞에 disc 대신 숫자가 붙는것을 제외하고는 ul 요소와 유사하다</p>
    <h2>할일 목록 입니다.</h2>
    <ol>
        <li>html 공부하기</li>
        <li>css 공부하기</li>
        <li>javascript 공부하기</li>
    </ol>
</body>
</html>

 

실행 결과

반응형