728x90
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>커피샤</title>
<style>
#header{
background-color: yellow;
width: 100%; height: 50px;
}
#nav{
background-color: red;
width: 30%;height: 100px;
float: left;
}
#content{
background-color: blue;
width: 70%;
height: 150px;
float: left;
}
#footer{
background-color: aqua;
clear: both;
width: 100%; height: 50px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sementic 레이아웃</title>
<style>
header{
background-color: aqua;
text-align: center;
}
header h1{margin: 0px;}
nav{
display: table-cell;
padding: 15px;
background-color: yellow;
}
section{
display: table-cell;
background-color: bisque;
padding: 15px;
}
footer{
background-color: black;
color: wheat;
padding: 10px
}
body{margin: 0px;}
</style>
</head>
<!-- 기본적으로 body는 마진을 갖고있다. -->
<body>
<div id="wrapper">
<header>
<!-- h1에는 마진이 있으므로 없애보자 -->
<h1>내 블로그</h1>
</header>
<nav>
<ul>
<li><a href="">aa</a></li>
<li><a href="">bb</a></li>
<li><a href="">cc</a></li>
</ul>
<figure>
<img src="./image/img001_big.jpg" alt="img001_big">
<figure>샤브샤브</figure>
</figure>
</nav>
<section>
<article>
<h1>안녕</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure ea consectetur optio aspernatur nihil, eligendi obcaecati quod voluptatem ducimus! Quas nobis magnam nemo eum atque inventore perferendis ipsam dolorem reprehenderit!</p>
</article>
<article>
<h1>잘가</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iure ea consectetur optio aspernatur nihil, eligendi obcaecati quod voluptatem ducimus! Quas nobis magnam nemo eum atque inventore perferendis ipsam dolorem reprehenderit!</p>
</article>
</section>
<footer>copylight © 2023 0503 </footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<style>
img{opacity: 0.4;}
img:hover{opacity: 1.0;}
</style>
<h1>Opacity</h1>
<img src="./image/pome.png" alt="pome" width="150" height="120">
<img src="./image/audio.png" alt="audio" width="150" height="120">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>가시</title>
<style>
#a{
visibility: hidden;
border: 1px dotted red;
}
#b{
visibility: visible;
border: 1px dotted red;
}
</style>
</head>
<body>
<h1>visibillity</h1>
<img id="a" src="./image/pome.png" alt="pome" width="150" height="120">
<img id="b" src="./image/audio.png" alt="audio" width="150" height="120">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
width: 50px; height: 50px;
background-color: pink;
border: 1px solid black;
text-align: center;
}
#b2{
background-color: blue;
transform: translate(100px, 0px);
}
#b3{
background-color: red;
transform: scale(1.2,1.2);
}
#b4{
background-color: green;
transform: rotate(30deg);
}
</style>
</head>
<body>
<div id="b1">BOX 1</div>
<div id="b2">BOX 2</div>
<div id="b3">BOX 3</div>
<div id="b4">BOX 4</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px; height: 50px;
border: 1px solid black;
background-color: yellow;
transition: width 1s;
}
div:hover{width: 200px;}
</style>
</head>
<body>
<div>마우스를 올리세요</div>
</body>
</html>728x90
반응형
'HTML,CSS,JavaScript' 카테고리의 다른 글
| CSS3 부트스트랩 (0) | 2023.05.04 |
|---|---|
| CSS 회원가입 창 만들기 (0) | 2023.05.03 |
| CSS 레이아웃 (0) | 2023.05.03 |
| CSS3 (0) | 2023.05.02 |
| HTML 멀티미디어 (0) | 2023.05.02 |
