[CSS] ch02-09. list 2

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);/*점을 이미지로 표시*/
}