<title>동물병원</title>
<style type="text/css">
*{margin: 0; padding: 0}
body {
font: "굴림체",돋움;
margin: 20px;
}
div{
background-color: #FFE4E1;
width: 400px; height: 200px;
padding: 10px;
left:50px;
color: black;
border-style: double;
}
p{
width: 80px; height: 10px;
color: blue;
}
.더보기 {position: absolute;
left: 350px;
top: 50px;
}
a{text-decoration:none;}
a:hover{background-color:#F8F8FF;
color:#DB7093;}
li:hover{background-color:#F8F8FF;
color:#DB7093;
text-decoration:underline;}
#title:hover{color:none;
text-decoration: none;}
a:active{font-size:20px;}
</style>
</head>
<body>
<div id="box">
<h2>동물병원 24시</h2></li>
<ul type="none"><br>
<li><a href="#">밥 먹이는 시간 지킬 것</a></li>
<li><a href="#">길고양이 주사 맞히기</a></li>
<li><a href="#">눈 아픈 동물 목에 깔때기 씌우기</a></li>
<li><a href="#">매일 목욕 시킬 것</a></li>
<li><a href="#">이름없는 애들 이름 짓지 말기</a></li>
</ul>
</div>
<p class="더보기"><a href="#">더보기</a></p>
</body>
<style type="text/css">
초기화
*{margin: 0; padding: 0}
공통스타일
body {
font: 12px Helvetica, sans-serif;
margin: 20px;
background-image: url("img/모눈.gif")
}
p{
width: 130px; height: 80px;
padding: 10px;
color: #fff; font-weight: bolder;
}
#box{
width: 550px; height: 300px;
background-image: url("img/사선.gif");
position: relative;
}
배치
1. 정적배치
.red{background: red; opacity: 0.5;}
2. 고정배치
.blue{
background: blue;
position: fixed;
right: 0; top: 30px;
z-index: 5
}
3. 상대배치
.green{
background: green;
position: relative;
left: 30px; top:20px;
z-index: 3
}
.orange{
background: orange;
}
</style>
</head>
<body>
<div id="box">
<p class="red">정적배치</p>
<p class="blue">고정배치</p>
<p class="green">상대배치</p>
<p class="orange">박스</p>
</div>
</body>
floating box
. 마치 공중에 떠있는 것처럼 배치시키는 것
. 주요속성
float: left : 플로팅박스를 왼쪽으로 배치
right : 플로팅박스를 오른쪽으로 배치
none (기본값) : 지정안함
clear: left : left로 지정된 플로팅박스를 해제
right : right로 지정된 플로팅박스 해제
both : 둘다 한번에 지정 해제
<style type="text/css">
#header{background: gray;}
#content1{
background: skyblue;
border: 2px solid black;
width: 150px; height: 150px;
margin: 10px;
float: left;
}
#content2{
background: skyblue;
border: 2px solid black;
width: 150px; height: 250px;
margin: 10px;
float: left;
}
#content3{
background: skyblue;
border: 2px solid black;
width: 150px; height: 250px;
margin: 10px;
float: right;
}
#footer{background: orange; clear: both;}
</style>
</head>
<body>
<div id="container">
<div id="header">헤더</div>
<div id="content1">content1</div>
<div id="content2">content2</div>
<div id="content3">content3</div>
<div id="footer">푸터</div>
</div>
</body>
<style type="text/css">
#container{background: #FFE4E1;
text-align: center;}
#header{background: #FFE4E1;
text-align: center;}
#nav{
background: #FFC0CB;
width: 200px; height: 250px;
margin: 10px;
color:#696969;
float: left;
}
#article{
background: #FFC0CB;
width: 300px; height: 250px;
margin: 10px;
color:#696969;
float: left;
}
#aside{
background: #48D1CC;
width: 200px; height: 250px;
margin: 10px;
color:#696969;
float: right;
}
#footer{background: #FFE4E1;
text-align: center;
clear: both;}
</style>
</head>
<body>
<div id="header">My Home Page</div>
<div id="container">
<div id="nav">Nav</div>
<div id="article">Article</div>
<div id="aside">Aside</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
<style type="text/css">
.a{
background:#FA8072;
height:50px; width:50px;
position: fixed;
left: 10px; top: 10px;
z-index: 5
}
.b{
background: #FFF5EE;
height:300px; width:300px;
position: fixed;
left: 20px; top: 20px;
z-index: 2
}
.c{
background: #8B0000;
height:50px; width:50px;
position: fixed;
left: 300px; top: 70px;
z-index: 5
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
<title>상대배치, relative</title>
<style type="text/css">
.T{
background:#B22222;
height:50px; width:50px;
position: fixed;
left: 10px; top: 80px;
color:white;
text-align:center;
z-index: 5
}
.h{
background:#B22222;
height:50px; width:50px;
position: fixed;
left: 70px; top: 80px;
color:white;
text-align:center;
z-index: 5
}
.a{
background:#B22222;
height:50px; width:50px;
position: fixed;
left: 130px; top: 80px;
color:white;
text-align:center;
z-index: 5
}
.n{
background:#B22222;
height:50px; width:50px;
position: fixed;
left: 190px; top: 80px;
color:white;
text-align:center;
z-index: 5
}
.k{
background:#B22222;
height:50px; width:50px;
position: fixed;
left: 250px; top: 80px;
color:white;
text-align:center;
z-index: 5
}
.s{
background:#B22222;
height:50px; width:50px;
position: fixed;
left: 310px; top: 80px;
color:white;
text-align:center;
z-index: 5
}
div:active{ height:80px; width:80px;}
</style>
</head>
<body>
<h3>상대배치, relative</h3>
<hr>
<div class="T">T</div>
<div class="h">h</div>
<div class="a">a</div>
<div class="n">n</div>
<div class="k">k</div>
<div class="s">s</div>
</body>
<title>학기말 공지</title>
<style type="text/css">
.article{
height:170px; width:580px;
position: fixed;
left: 10px; top: 80px}
.box {
height:130px; width:130px;
position: fixed;
left: 600px; top: 80px;
border-style:dotted;
}
</style>
</head>
<body>
<h3>학기말 공지</h3>
<br>
<div class="article">이제 벌써 한달이 되어 갑니다. 처음 오셨을 때 보다 많이 배우고 성장하고 계시겠지요? 과정이 끝났을 때 자신이 많이 성장해있음을 느낄 수 있도록 초심 잃지 마시고 열심히 해주시길 부탁드립니다.</p>
<div class="box">29일은 화면구현 정기 평가일 입니다. 필히 참석하여야 능력단위를 이수할 수 있습니다.</p>
</body>
<title>금연일지</title>
<style type="text/css">
*{margin: 0; padding: 0}
body{
font: 12px "굴림", Gulim;
width: 300px;
margin: 10px;
}
h1{
float: left;
font-size: 200%;
background-color: #c00;
padding: 5px;
color: #fff;
}
p span{
float: right;
border: 3px dotted orange;
}
</style>
</head>
<body>
<h1>금연일지</h1>
<p>첫날은 담배냄새가 나지 않아서 좋았고, 다음날은 눈이 맑아진 것 같아 좋았고, 그 다음날은 아들에게 당당하게 담배 피우지 말라고 말할 수 있어서 좋았다.
개인적인 기호를 법적으로 관리할 수 도 없는 것이고, 금연을 일사분란하게 실행한다는 것은 말도<span><img src="img/담배.jpg"></span> 안되는 일이지만 예언가들 덕분에 그들과 더불어 원치않게 죽어가는
많은 사람들의 넋은 누가 달래야 할 것인가.</p>
</body>
<title>나의 아름다운 정원</title>
<style type="text/css">
초기화
*{margin:0; padding:0}
li{list-style: none;}
공통스타일
body {
font-size: 12px "굴림", Gulim; color: #333;
}
h1{font: bold 42px "굴림", Gulim; background-color: #ccc;
padding: 10px 100px; letter-spacing: 3px;}
.intro{padding: 10px; font-size: 120%}
개별스타일
.gallery li{float: left; width: 160px; text-align: center;}
h2{font-weight: bold 40px "굴림",Gulim;
width: 120px; height: 100px;
margin-left: 20px; padding-top: 10px;
color: #fff;
}
.tulip h2{background: #c00;}
.jebi h2{background: #248;}
.hobak h2{background: #f90;}
.sunflower h2{background: #880;}
.gallery li p{padding: 10px; text-align: justify;}
/* li{display: inline-block;}
h1 {background-color:#DCDCDC;
text-align: center; }
span{font-weight:bold; }
#a{background-color:#B22222;
width: 100px; height:100px;
color:white;
font-size:35px;
text-align: center;}
#b{background-color:#191970;
width: 100px; height:100px;
color:white;
font-size:35px;
text-align: center;}
#c{background-color:#FFA500 ;
width: 100px; height:100px;
color:white;
font-size:35px;
text-align: center;}
#d{background-color:#FFA07A;
width: 100px; height:100px;
color:white;
font-size:35px;
text-align: center;}
#a1{width:200px;}
#b1{width:200px;}
#c1{width:200px;}
#d1{width:200px;} */
</style>
</head>
<body>
<h1>나의 아름다운 정원</h1>
<div id="container">
<p class="intro">사람들이 선호하는 꽃들은 어떤 것들일까.. 아마 스스로에게 <strong>자신감을 북돋워 주는</strong> 표정있는
꽃들일 것이다.</p>
<ul class="gallery">
<li class="tulip"><h2>튜울립</h2>
<p>너무 화려하지 않으며 고귀한 느낌을 가지고 있다. 붉은 색이 단연
으뜸이며, 한 송이만 있어도 빼어나다</p>
</li>
<li class="jebi"><h2>제비꽃</h2>
<p>드물게 푸른색을 띄고 있으며, 작지만 시원해보이는 어린 꽃이라고
할 수 있다. 여럿이 함께 있을 때더욱 아름답다.</p>
</li>
<li class="hobak"><h2>호박꽃</h2>
<p>색도 모양도 화려하며, 이름과 걸맞지 않게 아름다운 꽃으로 매우
완숙한 이미지를 주는 꽃이다.</p>
</li>
<li class="sunflower"><h2>해바라기</h2>
<p>태양만 바라보는 일편단심의 꽃으로 얼굴이 큰 편에 속하며,
송이가 적어야 제격이다.</p>
</li>
</ul>
</div>
<!-- <p>사람들이 선호하는 꽃들은 어떤 것들일까.. 아마 스스로에게 <span>자신감을 북돋워 주는</span> 표정있는
꽃들일 것이다.</p>
<div id="a">튜울립</div>
<p id="a1">너무 화려하지 않으며 고귀한 느낌을 가지고 있다. 붉은 색이 단연 으뜸이며, 한 송이만 있어도 빼어나다.</p>
<div id="b">제비꽃</div>
<p id="b1">드물게 푸른색을 띠고 있으며, 작지마 닛원해보이는 어린 꽃이라고 할 수 있다. 여럿이 함께 있을 때 더욱 아름답다.</p>
<div id="c">호박꽃</div>
<p id="c1">색도 모양도 화려하며, 이름과 걸맞지 않게 아름다운 꽃으로 매우 완숙한 이미지를 출기는 꽃이다.</p>
<div id="d">해바라기</div>
<p id="d1">태양만 바라보는 일편단심의 꽃으로 얼굴이 큰 편에 속하며, 송이가 적어야 제격이다.</p> -->
</body>
<style type="text/css">
초기화
*{margin: 0; padding: 0}
li{list-style: none;}
공통
#container{
/*
1) float: left;
2) overflow:auto;
3) height:600px;
4) 가상의 요소를 활용하는 방법
등 여러 방법 중 선택
*/
width: 560px; border: 1px solid blue;
background-color: yellow;
}
개별스타일
.menu{
float: left; width: 130px; padding: 10px;
}
.content{
float: right; width: 350px; padding: 10px; border-left: 1px solid #ccc;
}
#footer{
clear: both;
}
address{font-size: small; padding: 10px}
</style>
</head>
<body>
<div id="container">
<div class="menu">
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">제품안내</a></li>
<li><a href="#">커뮤니티</a></li>
</ul>
</div>
<div class="content">
<p>
이 제품은 어댑터와 본체가 분리되어 있는 대부분의 제품들이 갖는 불편함을 해소하는데 큰 기여를
하고 있다. 가장 많은 불편함은 어댑터 분실인데, 이 제품은 usb크기의 잭만 꽂으면 센서로 자동
충전되어 휴대도 간편한 복덩어리 노트북으로 불리고 있다. 이런 노트북은 이미 시중에 판매되고 있다.
</p>
</div>
</div>
<div id="footer">
<address>&Copy; 2022 Copyright All right reserved</address>
</div>
</body>
<title>녹차와 커피</title>
<style type="text/css">
*{margin:0; padding:0}
li{list-style: none;}
body{
font: 12px "굴림", Gulim; background: #ffd;
}
#container{
width: 600px; padding:10px; background-color: #ffd;
border: 5px solid #caa;
}
h1{text-align: center; padding: 10px;}
.green {float: left; width: 250px; padding: 15px; background: #dda;}
.coffee{float: right; width: 250px; padding: 15px; background: #ba7;}
#container:after{
content:"";
display: block;
clear:both;
}
</style>
</head>
<body>
<div id="container">
<h1>녹차와 커피</h1>
<div class="green">
<p>녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는
사람은 모두 뜯어 주전자에 넣고 끓이기도 하는데 강한 차의 향기도 견디기 힘들겠지만
보관도 힘들고, 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며, 진한 카페인 덕에
밤에 잠들기도 힘들 것이다.</p>
</div>
<div class="coffee">
<p>녹차는 은은한 향을 좋아하는 사람들이 애용하는 차이다. 녹차를 마실 줄 모르는
사람은 모두 뜯어 주전자에 넣고 끓이기도 하는데 강한 차의 향기도 견디기 힘들겠지만
보관도 힘들고, 그때그때 방금 끓인 듯한 맛을 느끼지 못하게 되며, 진한 카페인 덕에
밤에 잠들기도 힘들 것이다.</p>
</div>
</div>
</body>