WEB/CSS

[CSS] ch01-06. descendant

밍글링글링 2017. 8. 22.
728x90

06_descendant.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
    @import "../css/06_descendant.css";
</style>
</head>

<body>
    <section id="container">
        <header>
            <h1>예약 방법 및 요금</h1 >
        </header>
        <p>요안도라에 예약하려면?
        <ul>
            <li>예약 방법
                <ul>
                    <li>직접 통화</li>
                    <li>문자 남기기</li>
                </ul>
            </li>
            <li>요금
                <ul>
                    <li>1인 : 40,000원</li>
                    <li>2인 : 60,000원</li>
                    <li>3인 : 80,000원</li>
                    <li>4인 : 100,000원</li>
                </ul>
            </li>
        </ul>
    </section>
</body>
</html>

 

06_descendant.css

@CHARSET "UTF-8";

#container ul ul{/*ul 밑 ul*/
    border: 1px dotted black;
    /*id: container인 요소 아래의 자식 ul 요소에 1px 실선을 그린다.*/
}

728x90

'WEB > CSS' 카테고리의 다른 글

[CSS] ch01-08. group  (0) 2017.08.22
[CSS] ch01-07.child  (0) 2017.08.22
[CSS] ch01-05. ID  (0) 2017.08.22
[CSS] ch01-04.Class (클래스)  (0) 2017.08.22
[CSS] ch01-03. 각종 태그 (tag)  (0) 2017.08.22

댓글