목록을 만드는 태그

윤재열·2022년 1월 23일
0

HTML5

목록 보기
2/11

<ul>,<li>태그-순서 없는 목록 만들기

순서가 필요하지 않은 목록을 만들 때는<ul>태그를 사용하고 <ul> 태그 안에 <li>태그를 사용해 각 항목을 표시합니다.

<h1>관광 안내 전화 </h1>
<p>한국관광공사에서는 전국의....실시하고 있습니다.</p>
<p>1330에는 해당 지역의 지도와 관광 가이드북...이용 가능합니다.</p>
<ul>
  <li>일반전화 : (국번없이)1330</li>
  <li>휴대전화 : 064-1330</li>
</ul>

<ol>,<li>태그-순서 목록만들기

<ul>과 반대로 항목을 나열하되 순서가 필요한 목록을 만들 때 <ol>을 사용한다.

-<ol>태그는 여러 속성이 함께 사용되어 목록의 숫자 표기 방법이나 시작하는 숫자등을 바꿀 수 있습니다.

  • 1.type속성-<ol>태그는 순서 목록이기 때문에 각 항목 앞에 1,2,....같은 숫자가 기본으로 붙는데
    <ol>태그의 type속성을 이용해 숫자의 종류를 다양하게 조절할 수 있습니다.
속성 값설명
1숫자(기본값)
a영문 소문자
A영문 대문자
i로마숫자 소문자
I로마숫자 대문자
  • 2.start속성-순서 목록은 기본적으로 1부터 시작하는데 start 속성을 이용하면 중간 번호부터 시작할 수 있습니다.
  • 3.reversed속성-항목을 역순으로 표시합니다.
<h1>1박 2일 가족 여행 코스</h1>
<ul>
  <li>1일차
    <ol type="a">//소문자의 알파벳a부터 시작하는 순서목록
      <li>해녀박물관
      <li>낚시체험</li>
    </ol>
  </li>
  <li>2일차
    <ol type="a" start="3">//소문자 알파벳의 3번째부터 시작하는 순서목록
      <li>용눈이오름
        <li>만장굴
      <li>카약체험</li>
    </ol>
  </li>
</ul>
    
  

<li> 태그를 사용하는 데 여러 항목이 나열될 때 <li>태그를 생략해도 <li>태그가 다음에 오는 <li>태그를 만나면 자동으로 그전에</li>태그가 있는 것처럼 인식합니다.

<ol>
  <li>한라수목원
    <li>화순 금모래 해수욕장
      <li>산방산
        <li>용머리해안
          <li>송악산
</ol>

<dl>,<dt>,<dd>태그-설명 목록 만들기

<dl>태그는 사전 구성처럼 '제목'과 '설명'이 한 쌍인 설명 목록을 만듭니다.
<dt>태그는 제목을,<dd>태그는 설명을 표시합니다.

-하나의<dt>태그에 여러개의 <dd>태그 값을 가질 수 있고 여러개의 <dt>를 가질 수도 있습니다.

<h1>제주 올레</h1>
<dl>
  <dt>올레 1코스</dt>
  <dd>코스 : 시흥 초등학교 옆 -광치기해변</dd>
  <dd>거리 : 14.6km(4~5시간)</dd>
  <dd>난이도 : 중</dd>
  <dt>올레 2코스</dt>
  <dd>코스 : 광치기 해변 -온평 포구</dd>
  <dd>거리 : 14.5km(4~5시간)</dd>
  <dd>난이도 : 중</dd>
</dl>

profile
블로그 이전합니다! https://jyyoun1022.tistory.com/

0개의 댓글

관련 채용 정보