본문 바로가기

Python_WEB/HTML

HTML5 - 190609 Basic Study 31(가시 속성)

728x90

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 미리보기

< css 2일차 >

반응형