동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
순서없는 HTML 목록
순서가 지정되지 않은 목록은 <ul>태그로 시작합니다. 각 목록 항목은 <li>태그로 시작합니다.
목록 항목은 기본적으로 볼릿 기호(작은 검은색 원)로 표시됩니다.
<ul>
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ul>순서없는 HTML 목록 - 목록 항목 마커 선택
CSS list-style-type속성은 목록 항목 마커의 스타일을 정의하는데 사용됩니다.
값 |
설명 |
disc |
볼릿 마커(기본값) |
circle |
원형태 마커 |
square |
네모형태 마커 |
none |
마커 없음 |
disc인 경우
<ul style="list-style-type:disc">
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ul>circle인 경우
<ul style="list-style-type:circle">
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ul>square인 경우
<ul style="list-style-type:square">
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ul>none인 경우
<ul style="list-style-type:none">
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ul>순서 있는 HTML목록
순서가 지정된 목록은 <ol>태그로 시작합니다. 각 목록 항목은 <li>태그로 시작합니다.
목록 항목에는 기본적으로 숫자가 표시됩니다.
<ol>
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ol>순서 있는 HTML 목록 - type 속성
<ol>태그의 type속성은 목록 항목 마커의 유형을 정의합니다.
Type |
설명 |
type="1" |
목록 항목에 번호가 매겨집니다.(기본값) |
type="A" |
목록 항목에 대문자 알파벳이 매겨집니다. |
type="a" |
목록 항목에 소문자 알파벳이 매겨집니다. |
type="I" |
목록 항목에 대문자 로마숫자로 번호가 매겨집니다. |
type="i" |
목록 항목에 소문자 로마숫자로 번호가 매겨집니다. |
숫자:
<ol type="1">
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ol>대문자 알파벳:
<ol type="A">
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ol>소문자 알파벳:
<ol type="a">
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ol>대문자 로마 숫자:
<ol type="I">
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ol>소문자 로마 숫자:
<ol type="i">
<li>사과</li>
<li>배</li>
<li>딸기</li>
</ol>HTML 설명 목록
HTML은 설명 목록도 지원합니다.
설명 목록은 각 용어에 대한 설명을 갖고 있는 용어 목록입니다.
<dl>태그로 시작하고 <dt>태그는 용어를 정의하고 <dd>태그는 각 용어에 대한 설명을 정의합니다.
<dl>
<dt>사과</dt>
<dd>비타민을 함유하고 있는 과일입니다.</dd>
<dt>배</dt>
<dd>수분을 많이 함유하고 있는 과일입니다.</dd>
</dl>중첩된 HTML 목록
목록은 중첩될 수 있습니다. (목록 내부에 또 다른 목록)
<ul>
<li>배</li>
<li>사과
<ul>
<li>부사</li>
<li>홍옥</li>
</ul>
</li>
<li>복숭아</li>
</ul>** 목록 항목에는 또 다른 항목, 이미지, 링크와 같은 다른 HTML요소가 포함될 수 있습니다.
수평 목록
HTML목록은 CSS를 사용하여 다양한 방식으로 스타일을 지정할 수 있습니다.
한가지 인기있는 방법은 목록을 가로로 스타일을 지정하여 웹사이트의 메뉴를 만드는 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">회사소개</a></li>
<li><a href="#product">제품소개</a></li>
<li><a href="#notice">공지사항</a></li>
</ul>
</body>
</html>등록된 댓글이 없습니다.