티스토리 뷰

Web/HTML

[Web/HTML] HTML - 목록 만들기

poopooreum 2024. 4. 14. 19:26
반응형

✏️ 순서 있는 목록을 만드는 <ol>, <li> 태그

// ol은 ordered list의 줄임말로 순서가 있는 목록을 뜻하고, li는 list를 뜻함, 말 그대로 순서 있는 목록을 만들어주는 태그
// 예를 들면 1.~~~ / 2.~~~ / 3.~~~ 이런 식으로 만들어줌, 추가로 <ol> 태그는 type와 start속성을 가지고 있음

<ol>
  <li>항목1</li>
  <li>항목2</li>
</ol>

// type의 종류
// type="1" : 숫자(1,2,3,4) / type="a" : 알파벳 소문자(a,b,c,d) / type="A" : 알파벳 대문자(A,B,C,D)
// type="i" : 로마 숫자 소문자 / type="I" : 로마 숫자 대문자
// start속성은 <ol type="a" start=number> 식으로 사용하고 숫자에 맞는 알파벳이나 로마 숫자 등부터 시작하게 됨

✏️ 순서 없는 목록을 만드는 <ul>, <li> 태그

<ul>
  <li>항목1</li>
  <li>항목2</li>
</ul>

// ul은 unordered list의 줄임말로써 순서가 없는 목록을 뜻함
// 굳이 항목의 순서가 중요하지 않을 때 사용하는 태그로서 사용하게 되면 앞에 "●"이 붙는다

✏️ 설명 목록을 만드는 <dl>, <dt>, <dd> 태그

<dl>
  <dt>제품명</dt>
  <dd>설명1</dd>
  <dd>설명2</dd>
  <dd>설명3</dd>
</dl>

// dl(description list)는 이름(name)과 값(value)형태로 된 목록을 칭함
// 따라서, 설명 목록은 <dl> 태그로 큰 틀을 잡고 이름은 <dt> 태그로 설명 부분은 <dd> 태그로 사용
// <dt> 태그에는 여러 개의 <dd> 태그 사용 가능

 

 

반응형
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/07   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함