반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 2일차</title>
<link href="css/ex08.css" rel="stylesheet">
</head>
<body>
<h1>가시 속성</h1>
<h2>콘텐츠를 숨기는 원리</h2>
<h3>버튼만들기</h3>
<div id="btn">
<a href="#dsp">버튼</a>
</div>
<p id="dsp">
welcome to my world 무공화꽃이 피엇습니다 다람쥐 가오리 안녕하세요 감사합니다.
</p>
<a href="#">돌아가기</a>
<div id="box1" class="box">
box1 100+(10+10+10)*2
</div>
<div id="box2" class="box">
box2 100+10*2
</div>
<div id="box3" class="box">
box3
</div>
<div id="box4" class="box">
box4
</div>
<div id="bd"></div>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
#btn{
width:100px;
height:80px;
background:gold;
margin:30px;
text-align:center;
line-height:80px;
border-radius:20px;
}
#btn a{
background:pink;
display:block;
border-radius:20px;
text-indent:-9999px;
}
#btn:hover{
box-shadow:5px 5px 1px black;
}
#dsp{
width:200px;
height:100px;
background:orange;
position:relative;
left:-300px;
transition:1s;
}
#dsp:target{
left:0;
}
div.box{
width:100px;
height:100px;
background:pink;
border:5px solid red;
margin:10px;
padding:10px;
box-sizing:content-box;
}
#box2{
box-sizing:border-box;
}
#box1{
/* 상우하좌 */
margin:50px;
/* 상하30 좌우40 */
margin:30px 40px;
/* 상하 0 좌우 자동 박스 가운데 정렬 */
margin:0 auto;
/* 상10 좌우20 하30 */
margin:10px 20px 30px;
/* 상 우 하 좌 */
margin:10px 20px 30px 40px;
}
#box3{
width:300px;
border-width:10px;
border-color:blue;
border-style:dashed;
border-left-width:20px;
border-right-color:red;
border-bottom-style:double;
}
#box4:hover{
border:20px dotted black;
}
#bd{
width:15px;
height:15px;
border:100px solid red;
border-left-color:blue;
margin:50px;
/* 테두리 둥글게 50%로 */
border-radius:50%;/* 원 */
}
#bd:hover{
border-right-color:pink;
outline-style:dotted;
outline-color:navy;
outline-offset:5px;
outline-width:20px;
}
#bd{
outline:10px solid orange;
}
#bd:hover{
border-radius:20px 30px 40px 50px;
}
3. HTML / CSS 파일
ex08.html
0.00MB
ex08.css
0.00MB
4. HTML 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190615 Basic Study 33(Sitemap 제작 - 3) (0) | 2019.06.15 |
|---|---|
| HTML5 - 190609 Basic Study 32(Note) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 30(Sitemap 제작 - 2) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 29(Sitemap 제작 - 1) (0) | 2019.06.09 |
| HTML5 - 190609 Basic Study 28(positon과 float를 이용한 레이아웃 설계) (0) | 2019.06.09 |
