728x90
반응형
09_list.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/09_list.css";
</style>
</head>
<body>
<div class="container">
<header> </header>
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법 및 요금</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
<section class="content">
<h2>예약 방법 및 요금</h2>
<article>
<h3>¤ 요금</h3>
<ul>
<li class="out">1인: 40,000원</li>
<li class="out">2인: 60,000원</li>
<li class="out">3인: 80,000원</li>
<li class="in">4인: 100,000원</li>
<li class="in">5인: 120,000원</li>
<li class="in">6인: 140,000원</li>
</ul>
<p>
6인 이상이 머무르게 되면 2층 침대가 이닌 방바닥에 주무시거나<br> 앞뜰에 텐트를 치고 주무실 수 있습니다.<br>
침낭이나 텐트는 직접 가져오셔야 합니다.<br> 이 경우 숙박 요금은 저희와 별도로 상의해 주세요.
</p>
</article>
</section>
</div>
</body>
</html>
09_list.css
@CHARSET "UTF-8";
.out{
list-style-type: upper-alpha;/*알파벳 대문자의 반대 소문자=lower*/
list-style-position: outside; /*기본값 포지션값을 안줬을 경우 outside*/
}
.in{
list-style-position: inside;
list-style-image: url(../img/bullet.png);/*점을 이미지로 표시*/
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch03-02. opacity (0) | 2017.08.23 |
|---|---|
| [CSS] ch03.01. rgba (0) | 2017.08.23 |
| [CSS] ch02-08. list (0) | 2017.08.23 |
| [CSS] ch02-07. spacing (0) | 2017.08.23 |
| [CSS] ch02-06. indent (0) | 2017.08.23 |