제6강_HTML 필수 태그

Front-End-Web/html+css

제6강_HTML 필수 태그_List

jsBae 2022. 10. 8. 00:13

HTML Lists

웹 페이지에서 항목이나 데이터를 순차적으로 나열하는 것을 List(리스트)라고 한다. List(리스트)는 크게 3가지의 종류가 있다.

HTML 목록을 사용하면 웹 개발자가 목록의 관련 항목 집합을 그룹화할 수 있습니다.

리스트의 종류

순서가 없는 리스트(unordered list) - ul
순서가 있는 리스트(ordered list) - ol
정의 리스트(definition list) - dl
항목 - <li>

순서가 없는 리스트(unordered list)

순서가 지정되지 않은 목록은 <ul>태그로 시작합니다. 각 목록 항목은 <li>태그로 시작합니다.

목록 항목은 기본적으로 글머리 기호(작은 검은색 원)로 표시됩니다.

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul>
  <li>Coffee
	<ul>
		<li>ice</li>
		<li>hot
			<ul>
		<li>ice</li>
		<li>hot</li>
	</ul></li>
	</ul>
  </li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul>
    <li>서울 특별시</li>
    <li>인천 광역시</li>
    <li>대구 광역시</li>
    <ul>
        <li>댤서구</li>
        <li>수성구</li>
  </ul>
</ul>

style 변경 : type ="circle, square, disc"

disc : 디폴트 값으로 검은색 점이다.
circle: 원
square: 사각형
none: 아무것도 표시되지 않는다.

<ul type="square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

순서가 있는 리스트(ordered list)

목들을 나열할 때 순서가 있으며 기본적으로 아라비아 숫자로 항목들을 표시한다.
순서가 지정된 목록은 <ol>태그로 시작합니다. 각 목록 항목은 <li>태그로 시작합니다.
목록 항목은 기본적으로 숫자로 표시됩니다.

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol>: ordered list의 약자이며, 순서가 있는 리스트를 정의한다.
<li>: <ol> </ol>싸여진 각 항목은 <li> </li>tag를 사용하여 항목을 표시한다.

type속성을 이용하면 아라비아 숫자뿐만 아니라 을 다음과 같은 모양으로 바꿀 수 있다.

1 : 디폴트 값으로 아라비아 숫자이다.
A: 대문자 알파벳
a: 소문자 알파벳
I: 대문자 로마숫자.
i: 소문자 로마숫자.

<ol type="i" >
   <li>항목 1</li>
   <li>항목 2</li>
   <li>항목 3</li>
</ol>
<ol type="A" >
       <li>항목 1</li>
       <li>항목 2</li>
       <li>항목 3</li>
 </ol>

start속성을 이용하면 시작숫자를 사용자가 원하는대로 바꿀수 있다.

<ol start="5">
    <li>항목 1</li>
    <li>항목 2</li>
    <li>항목 3</li>
</ol>

<!-- 중첩 List(리스트) -->
<ol>
    <li>서울 특별시</li>
    <li>인천 광역시</li>
    <li>대구 광역시</li>
    <ol>
        <li>댤서구</li>
        <li>수성구</li>
    </ol>
</ol>

정의 리스트(definition list)

HTML은 설명 목록도 지원합니다.
설명 목록은 각 용어에 대한 설명과 함께 용어 목록입니다.
<dl> :definition list의 약어이며, 정의리스트를 정의합니다.
<dt> : 용어를 입력해줍니다.
<dd> :용어에 대한 정의를 해줍니다

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

<dl>
    <dt>HTML5</dt>
        <dd>Hyper Text Markup Language</dd>
    <dt>CSS3</dt>
        <dd>Cascading Style Sheets</dd>
</dl>

연습

<ul>
  <li>1일차
    <ol type="a">
      <li>해녀박물관</li>
      <li>낚시체험</li>
    </ol>
  </li>
  <li>2일차
    <ol type="a" start ="3">
      <li>용눈이오름</li>
      <li>만장굴</li>
      <li>카약체험</li>
    </ol start>
  </li>
</ul>

HTML 목록 태그

TagDescription

<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list

연습

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>연습문제 : 리스트를 이용한 자기 소개</title>
</head>
<body>
<h1>자기소개서</h1>
<h2>who am I</h2>
<p><mark>프런트엔드 웹 기술</mark>에 관심이 많습니다. <br>
현재 제주의 한 시골 마을에서 코딩 중입니다. </p>
<hr>
<h2>경험</h2>
<ul>
	<li>프런트엔드개발
		<ol>
			<li>html 코딩</li>
			<li>php 코딩</li>
		</ol>
	</li>
	<li>웹디자인
		<ul>
			<li>포털사이트 기획</li>
			<li>쇼핑물 상품페이지</li>
		</ul>	
	</li>
</ul>
<hr>
<h2>기술</h2>
<dl>
	<dt>adobe xd</dt>
	<dd>웹 기획 툴 사용</dd>
	<dt>드림위버</dt>
	<dd>웹코딩 툴 사용</dd>
	<dt>워드프레스</dt>
	<dd>워드프레스 프레임워크 제작</dd>
</dl>
<hr>
<h2>취미</h2>
<hr>
</body>
</html>

728x90

저작자표시 비영리 동일조건 (새창열림)