개발 공부 기록하기

DAY 2. 목록 형성 관련 tag: <ol>, <ul>, <li> 본문

프밍/HTML

DAY 2. 목록 형성 관련 tag: <ol>, <ul>, <li>

태영(泰伶) 2022. 8. 20. 22:46

1. <ol> & <li>

     ol = ordered list

     즉, 순서가 있는 목록!

     

     <ol>과 </ol> 사이에 <li>와 </li>를 넣어 순서 표시!

<!DOCTYPE html>
   <html lang="ko">
      <head>
         <meta charset="UTF-8">
         <title>상품 소개 페이지</title>
      </head>
      <body>
         <h2>레드향 샐러드 레시피</h2>
         <p><b>재료 : </b>레드향 1개, 아보카도 1개, 토마토 1개, 샐러드 채소 30g</p>
         <p><b>드레싱 : </b>올리브유 1큰술, 레몬즙 2큰술, 꿀 1큰술, 소금 약간</p>
         <ol>
            <li>샐러드 채소를 씻고 물기를 제거한 후 준비합니다.</li>
            <li>레드향과 아보카도, 토마토를 먹기 좋은 크기로 썰어둡니다.</li>
            <li>드레싱 재료를 믹서에 갈아줍니다.</li>
            <li>볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!</li>
         </ol>
      </body>
   </html>

 

  • type

         순서 있는 목록은 번호 붙일 때 주로 1, 2, 3, ....인데,

         type 속성 쓰면 번호 형태 바꿀 수 있음!

       

<ol type="1"> 숫자(default)
<ol type="a"> 영어 소문자
<ol type="A"> 영어 대문자
<ol type="i"> 로마 숫자 소문자
<ol type="I"> 로마 숫자 대문자

 

 

 

  • start

원하는 번호부터 시작하고 싶을 때 쓰는 속성.

 

 

 

 

 

 

 

 

 

 

2. <ul> & <li>

     ul = unordered list

     즉, 순서가 없는 목록!

     

     보통 bullet이 붙어 나타난다.

 

     <li>와 </li>는 ol에서처럼 ul tag 안에서 사용한다.

 

 

 

 

 

3. <dl> & <dt> & <dd>

     dl = description list = 설명 목록

     dt = 설명 목록의 이름(제목)을 지정.

     dd = 설명 목록의 값(설명)을 지정.

▲ <dl> tag 안에 <dt>와 <dd>가 꼭 나온다. <dd>는 여러 개 가능!

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

'프밍 > HTML' 카테고리의 다른 글

DAY 3. 이미지 삽입 tag인 <img>와 관련된 속성  (0) 2022.08.21
DAY 2. 표 만들기와 관련된 tag  (0) 2022.08.20
DAY 2. 텍스트(text) 삽입과 관련된 tag  (0) 2022.08.20
DAY 2 - 웹 문서 구조를 만드는 시맨틱(Semantic) tag  (0) 2022.08.20
DAY 2. HTML 파일 만들기 실습  (0) 2022.08.20
'프밍/HTML' Related Articles more
Comments