[CSS] ch04-08. div

2017. 8. 24. 15:11·WEB/CSS
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
'WEB/CSS' 카테고리의 다른 글
  • [CSS] ch04-10. static
  • [CSS] ch04-09. inline
  • [CSS] ch04-07. block
  • [CSS] ch04-06. boxshadow
밍글링글링
밍글링글링
mingling - 밍글링, 밍글밍글링. 코드와 어우러지다. IT/ 프로그래밍/소스
    반응형
    250x250
  • 밍글링글링
    mingling
    밍글링글링
  • 전체
    오늘
    어제
    • 밍글링글링 (407) N
      • Flutter (2)
      • 일상생활 (8)
        • 리뷰 (1)
        • 생활정보 (4)
        • 맛집 (0)
        • 여행 (0)
        • 모든정보 (3)
      • JAVA (126)
        • 개념 (6)
        • 예제 (115)
        • Exception (2)
      • C (1)
        • C (1)
        • C++ (0)
        • C# (0)
      • JS (29)
        • JavaScript (18)
        • JQuery (5)
        • AJax (0)
        • NODE.JS (6)
        • Angular.JS 2.0 (0)
      • WEB (87)
        • HTML (6)
        • CSS (61)
        • JSP (20)
        • JSTL (0)
      • FrameWork (8)
        • Spring (8)
        • BootStrap (0)
        • MyBATIS (0)
        • JUnit (0)
      • 외부 라이브러리 (5)
      • 공유 소스 관리 (5)
        • Git (5)
        • SVN (0)
      • 빅데이터 프로그래밍 (37)
        • Python (37)
        • R Programming (0)
      • DB (7)
        • ORACLE (0)
        • MySql (6)
      • Development Tools (7)
        • StarUML (0)
        • eXERD (0)
        • Eclipse (4)
      • SKILL (6)
        • Migration (0)
        • Security (6)
      • MicroSoft (0)
        • Excel (0)
        • Word (0)
      • Android (0)
      • Server (21)
        • Ubuntu (5)
        • Linux (15)
      • IOS (0)
      • XML (0)
      • 미디어 (0)
      • 공지사항 (3)
      • NETWORK (1)
      • 게임 (4)
        • 피파 (1)
        • 리니지M (0)
        • 배틀그라운드 (1)
        • 듀랑고 (2)
      • 세상 이슈 (6)
      • 일렉트론 (0)
      • 대회 소식 (4)
      • 업무 (2)
      • Express, Vue (6)
      • docker (11)
      • svelte (3)
      • 블록체인 (1)
      • IT (10) N
      • Rust (0)
  • 블로그 메뉴

    • 홈
    • 태그
    • 미디어로그
    • 위치로그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    자바 객체 지향
    mysql db
    ssl 인증서 발급
    gitlab 설치
    vue 설치
    jsp include
    브라우저 자동화
    rust linux
    spring java
    vscode
    React Compiler
    AI 코딩 에이전트
    API 설계
    css float
    lang rust
    프런트엔드
    Node
    자바 생성자
    자바 for문
    오류
    nginx ssl 설정
    자바 클래스
    Java Array
    css list
    docker
    java casting
    servlet class
    Rust lang
    svelte
    자바 exception
    css tb
    티스토리 자동화
    클론코딩
    nginx
    css block
    css perspective
    vue cli
    css table
    러스트
    VS Code 팁
    proxy pass
    ubuntu
    리눅스 설치
    자바 배열
    Extension Bisect
    SSL 인증서
    에디터 팁
    nginx ssl 적용
    css transition
    jsp parameter
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.6
밍글링글링
[CSS] ch04-08. div
상단으로

티스토리툴바