앱 만들기/HTML5

<ol> 태그 사용법

나도 처음이야 2023. 2. 6.

<ol> 태그는 ordered list 의 약자로 순서가 있는 목록 이라는 뜻 입니다.

HTML 에서 하기와 같은 순서가 있는 목차를 만들고 싶다면 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>
  <!-- Ordered list -->
  <ol>
    <li>나이키</li>
    <li>아디다스</li>
    <li>푸마</li>
    <li>프로스펙스</li>
  </ol>  
</body>
</html>

내용 부분인 <body> 안에 <ol>태그를 명시해줍니다.

<ol>태그를 만나는 순간 브라우저는 아~순서있는 리스트가 나오겠구나 하고 알게되는 것 입니다.

<ol>태그 하부에는 각 리스트 별로 <li> 태그 (list 의 약자) 를 배치시킵니다.

순서대로 1 부터 숫자가 붙여지기에 원하는 목차만큼 기재하면 됩니다.

순서가 있는 목록 리스트를 만들기 위해서는 하기 기본 구조를 머리 속에 생각하면 좋겠습니다. 

  <!-- Odered list -->
  <ol>
    <li>나이키</li>
    <li>아디다스</li>
    <li>푸마</li>
    <li>프로스펙스</li>
  </ol>

<ol>태그 사용법 이였습니다. 감사합니다.

 

 

 

<ol> 태그 속성

태그 사용법 태그는 odered list 의 약자로 순서가 있는 목록 이라는 뜻 입니다. HTML 에서 하기와 같은 순서가 있는 목차를 만들고 싶다면 ol 태그를 사용하면 됩니다. 그럼, 실제 예제를 살펴보겠습

soo0100.tistory.com

 

반응형

'앱 만들기 > HTML5' 카테고리의 다른 글

<ul>태그 예제  (2) 2023.02.26
<ol> 태그 속성  (2) 2023.02.19
<hr> 태그 예제  (2) 2023.02.04
<strong>태그 사용법  (1) 2023.01.28
<em> 태그 사용법  (2) 2023.01.26

댓글