WEB/CSS

[CSS] ch04-08. div

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

08_div.html

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

<body>
    <h2>이용 안내</h2>
    <div id="cont1">
        <p>입실은 오후 3시, 퇴실은 오전 11시입니다.</p>
        <p>이곳은 관광지가 아닌, 귤농사를 짓는 중산간 마을입니다.</p>
    </div>
    <div id="cont2">
        <p>바베큐, 야외식사 등 바깥채, 외부 앞뜰에서의 활동은 밤 11시 이전까지 마쳐 주셔야 합니다. 바깥채 내부의
            소등은 자유롭게 하시되, 자정 이후로 음주나 소란스러운 대화를 자제해 주시면 고맙겠습니다.</p>
    </div>
    <div id="cont3">
        <p>우도, 성산일출봉, 섭지코지, 김영갑 갤러리, 용눈이 오름 등 주변 관광지와 한라산 동쪽 등산로로 오가실 경우
            요안도라에서 콜택시를 이용하실 수 있습니다.</p>
    </div>
    
    <div id="cont11"  class="horizontal">
        <p>입실은 오후 3시, 퇴실은 오전 11시입니다.</p>
        <p>이곳은 관광지가 아닌, 귤농사를 짓는 중산간 마을입니다.</p>
    </div>
    <div id="cont12"  class="horizontal">
        <p>바베큐, 야외식사 등 바깥채, 외부 앞뜰에서의 활동은 밤 11시 이전까지 마쳐 주셔야 합니다. 바깥채 내부의
            소등은 자유롭게 하시되, 자정 이후로 음주나 소란스러운 대화를 자제해 주시면 고맙겠습니다.</p>
    </div>
    <div id="cont13"  class="horizontal">
        <p>우도, 성산일출봉, 섭지코지, 김영갑 갤러리, 용눈이 오름 등 주변 관광지와 한라산 동쪽 등산로로 오가실 경우
            요안도라에서 콜택시를 이용하실 수 있습니다.</p>
    </div>
</body>
</html>

 

 

 

08_div.css

@CHARSET "UTF-8";
div{
    width:200px;
    height:auto;
    margin:10px 5px;
    padding:5px;
    border:1px solid black;
}
div.horizontal{
    float:left;
}
#cont1, #contl1{
    background: lightyellow;
}
#cont2, #contl2{
    background: lightgreen;
}
#cont3, #contl3{
    background: lightblue;
}
 
 

728x90

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

[CSS] ch04-10. static  (0) 2017.08.28
[CSS] ch04-09. inline  (0) 2017.08.28
[CSS] ch04-07. block  (0) 2017.08.24
[CSS] ch04-06. boxshadow  (0) 2017.08.24
[CSS] ch04-05. radius  (0) 2017.08.24

댓글