HTML 목록 형식 태그 구성 방법

 안녕하세요, 이번 포스팅은 HTML 목록 형식 태그 구성 방법 대해서 작성하도록 하겠습니다. 

 HTML에서 리스트나 목록을 표현할 때는 <ol>과 <ul> 두 가지 태그를 사용합니다.

 이 리스트 목록 태그 사용하는 방법에 대해서 자세히 설명 드리도록 하겠습니다. 

 

HTML 목록 형식 태그 구성 필요성

: 먼저 HTML 목록 형식 태그 구성 필요성 대해서 설명 드리도록 하겠습니다. 

 HTML은 H1, H2 태그처럼 제목이나 타이틀을 표현하는 태그부터 본문에 세부 내용에 대해서 표현하는 P 태그 등이 있습니다. 

 이런 태그들은 웹상 문서를 독자 친화적으로 표현하기 위해서 적절하게 사용을 하게 됩니다. 

 만약 웹상 문서에 리스트나 목록을 표현하고 싶을 때는 HTML 본문 목록 형식 태그로 구성하시는 걸 추천 드립니다.

 사실 사람이 읽는 것도 중요하지만 해당 문서가 다른 사람들에게 잘 공유가 되기 위해서는 해당 문서를 수집하는 웹 페이지 수집 로봇 (구글, 네이버 포털사이트에서 운용하는 웹 페이지 수집 로봇)이 잘 이해하는 문서를 작성하셔야 합니다. 

 만약 HTML 문서의 내용중에 순서대로 설명할 때 목록 태그를 활용을 한다면 웹 페이지 수집 로봇이 이해하기 쉽게 구성이 되는 것입니다.

HTML 문서 내에서 목록이나 리스트로 구성하는 표현 태그로는 <ol>과 <ul> 두 가지 있으며 각 태그별로 사용방법에 대해서 자세히 알려 드리도록 하겠습니다.

▶ 인스타 비공개 계정 보는 법

 

<ol> 목록 태그 사용 방법

: 먼저 <ol> 목록 태그 사용 방법에 대해서 설명 드리도록 하겠습니다.

 <ol> 목록 태그는 “1,2,3”  또는 “A,B,C” 과 같이 문자가 앞에 나오는 리스트나 목록을 표현하고 싶을 때 사용을 합니다.

 

–  <ol> 목록 태그 예제 HTML 코드 

<ol type="1" start="1" reversed>

  <li>리스트 1 </li>

  <li> 리스트 2 </li>

</ol>

 

–  <ol> 목록 태그 예제 HTML 코드 결과 값

1. 리스트 1
2. 리스트 2

 

–  <ol> 목록 태그 예제 HTML 코드 세부사항

• type : 리스트나 목록 앞에 붙는 타입을 지정 코드로 Default 항목은 “1”입니다. (1, A, a, I, i)
• start : 리스트나 목록 앞에 붙는 첫 시작을 문구 지정
• reversed : 리스트나 목록 거꾸로 나열하고자 할 때 사용 (숫자 리스트에 사용, HTML5에서 추가된 속성)

▶ 구글 블로그 만들기 blogger 가입 설정 방법

<ol> 목록 태그 스타일

: 티스토리나 워드프레스에서는 기본적으로 목록 태그를 구현할 수 있는 기능을 제공하고 있습니다. 

 이런 기본적으로 제공하는 목록 태그 스타일 말고 추가적으로 자신이 원하는 형태로 표현하고 싶을 때 아래 스타일 항목들을 참조하시면 도움이 되실 겁니다. 

– <ol> 목록 태그 스타일 항목 정리

• cjk-ideographic : 한자(漢字)의 숫자로 항목 지정 (一, 二, 三…)
• decimal : 숫자로 항목 지정. <ol> 태그의 기본값 (1,2,3,4…)
• decimal-leading-zero : 숫자 ‘0’으로 시작하는 숫자로 항목 지정 (01,02,03…)
• inherit : 주변의 항목 구분자 속성과 동일하게 적용.
• lower-alpha : 알파벳 소문자로 항목 지정 (a, b, c…)
• lower-roman : 로마자 소문자로 항목 지정 (i, ii, iii…)
• upper-alpha : 알파벳 대문자로 항목 지정 (A, B, C…)
• upper-roman : 로마자 대분자로 항목 지정 (I, II, III…)
• none : 항목의 구분자로 아무 값도 지정하지 않음

<ol> 목록 태그 스타일 항목 사용 방법으로는 “<ol style=”원하시는 스타일 항목”>” 이렇게 적용을 하시면 됩니다. 

예를 들어 한자의 숫자로 항목을 지정하고 싶을 경우에는 “<ol style=”cjk-ideographic”>”이라고 지정을 해주시면 됩니다. 

▶ 티스토리 상단 애드센스 광고 2개 삽입 방법

<ul> 목록 태그 사용 방법

: 다음으로는 <ul> 목록 태그 사용 방법 대해서 설명드리도록 하겠습니다.

<ul> 목록 태그의 경우에는 별도 순서 없이 ‘·’으로 표시되는 목록 리스트를 구현할 때 활용을 하시면 됩니다.

<ol> 목록 태그 사용 방법과 비슷하게 적용을 해주시면 됩니다.

–  <ul> 목록 태그 예제 HTML 코드 

<ul>

  <li> 리스트 1 </li>

  <li> 리스트 2 </li>

</ul>

 

–  <ul> 목록 태그 예제 HTML 코드 결과 값

• 리스트 1
• 리스트 2

–  <ul> 목록 태그 예제 HTML 코드 세부사항

• type : 리스트나 목록 앞에 붙는 부여되는 모양, default 값은 ‘·’입니다.

 

▶ 염증에 좋은 음식 TOP 6

<ul> 목록 태그 스타일

<ol> 목록 태그 스타일처럼 <ul> 목록 태그도 스타일 항목을 가지고 있습니다.

<ul> 목록 태그 스타일은 <ol> 목록 태그 스타일과 다르게 도형이나 그림을 사용자가 원하는 형태로 표현하고 싶을 때 사용하신다라고 이해하시면 됩니다.

– <ul> 태그 스타일 항목 정리

• circle : 안이 채워지지 않은 작은 원형 
• disc : 안이 채워진 작은 원형 (Default 항목) 
• none : 아무것도 지정하지 않음 
• square : 안이 채워진 작은 사각형 
• inherit : 주변의 항목 구분자 속성과 동일하게 적용 

<ul > 목록 태그 스타일 항목 사용 방법으로는 “<ul  style=”원하시는 스타일 항목”>” 이렇게 적용을 하시면 됩니다. 

예를 들어 사각형으로 항목 구분자 지정을 원하실 경우에는 “<ul style=”list-style-type: square”>”이라고 지정을 해주시면 됩니다. 

▶ 남자 골격근량 측정 방법