<!DOCTYPE html>
<html>
<head>
<title>::: 14_HTML_태그소개_목록생성하기 :::</title>
<style>
/* ul 태그에 스타일 지정하기 : 표식 정의하기 */
ul{
/* 채워진 원 표시(디폴트값 : 생략가능) */
/* list-style-type: disc; */
/* 채워지지 않은 원 표시 */
/* list-style-type: circle; */
/* 표식 사용하지 않기 */
/* list-style-type: none; */
/* 채워진 사각형 표시 */
/* list-style-type: square; */
/* ul 태그중에 클래스 이름이 menu인 영역 패딩 지정 */}
ul.menu {padding: 0;}
/* ul 태그중에 menu인 클래스의 li 태그 영역을
수평구조로 변경하기(inline) */
/* > : 직계 자식 */
/* 띄어쓰기 한칸 : 자손 */
ul.menu li{display: inline;}
/* 한줄로 만들기 */
/* ul > li 밑에 a태그에 대해서 버튼형태처럼 디자인하기 */
ul.menu li a{
background-color: black;
color: white;
padding: 10px 20px;
/* 첫번째 px : 상하 여백 */
/* 두번째 px : 좌우 여백 */
text-decoration: none;
/* 텍스트 언더라인(_) 없애기 */
border-radius: 4px 4px 4px 4px;
/* 사각형 모서리 라운드 주기 */
/* 상좌, 상우, 하좌, 하우 */
}
</style>
</head>
<body>
<!-- 기호 표식을 이용하는 방식 (ul) -->
<h3>표식을 이용하여 목록 생성하기</h3>
<ul>
<li>커피</li>
<li>차(Tea)</li>
<li>우유</li>
</ul>
<hr/>
<!-- 순서 목록 생성하기 -->
<h3>번호 / 알파벳을 이용하여 목록 표시하기</h3>
<ol type="1">
<li>커피</li>
<li>차(Tea)</li>
<li>우유</li>
</ol>
<ol type="A">
<li>커피</li>
<li>차(Tea)</li>
<li>우유</li>
</ol>
<ol type="a">
<li>커피</li>
<li>차(Tea)</li>
<li>우유</li>
</ol>
<ol type="I">
<li>커피</li>
<li>차(Tea)</li>
<li>우유</li>
</ol>
<ol type="i">
<li>커피</li>
<li>차(Tea)</li>
<li>우유</li>
</ol>
<hr/>
<!--제목 / 설명 목록 형태로 표시하기 -->
<dl>
<dt>커피</dt>
<dd>- 아메리카노, 밀크라떼, 바닐라라떼</dd>
<dt>차(Tea)</dt>
<dd>- 유자차, 대추차, 홍삼차</dd>
</dl>
<hr/>
<!-- 표식기호 목록을 중첩해서 사용해보기(카테고리 형태) -->
<ul>
<li>커피
<ul>
<li>아메리카노</li>
<li>밀크라떼</li>
<li>바닐라라떼</li>
</ul>
</li>
<li>차
<ul>
<li>유자차</li>
<li>대추차</li>
<li>홍삼차</li>
</ul>
</li>
<li>우유</li>
</ul>
<hr/>
<!-- 표식 방법을 이용하여 카테고리 메뉴 만들기 -->
<ul class="menu">
<li>커피</li>
<li>차(Tea)</li>
<li>음료</li>
<li>기타</li>
</ul>
<!-- 메뉴 형태처럼 디자인하기 -->
<ul class="menu">
<li><a href="./01_HTML_소개.html">
커피</a></li>
<li><a href="./06_HTML_태그소개.html">
차(Tea)</a></li>
<li><a href="./07_HTML_태그소개_색상지정방식.html">
음료</a></li>
<li><a href="12_HTML_태그소개_a링크스타일적용.html">
기타</a></li>
</ul>
</body>
</html>
'html' 카테고리의 다른 글
| 16. html 태그_레이아웃 설정하기 (0) | 2023.03.03 |
|---|---|
| 15. html 태그_블록태그 사용하기 (0) | 2023.03.03 |
| 13. html 태그_Table 정의하기 (0) | 2023.03.03 |
| 12. html 태그_a링크 스타일 적용 (0) | 2023.03.03 |
| 11. html 태그_스타일 적용 (id-class) (0) | 2023.03.03 |
