기록

*52일차 실습 본문

학원/실습

*52일차 실습

pringspring 2022. 4. 11. 20:21 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS실습문제-box-shadow</title>
<style>
#img-wrapper{
    margin : auto;
    width: 80%;
    padding:50px;
    text-align: center;
    background : lightgray;
}
img{
    height:200px;
    margin:0 0 0 10px;
}
img:nth-of-type(1){
    margin:0;
}
img:hover{
    box-shadow:5px 5px 15px 5px gray;
}
</style>
</head>
<body>
<h2>이미지에 마우스 hover 그림자효과 만들기</h2>
<hr/>
<div id="img-wrapper">
    <img src="test/sun/sun1.jpg" alt="태양이미지1" >
    <img src="test/sun/sun2.jpg" alt="태양이미지2" >
    <img src="test/sun/sun3.jpg" alt="태양이미지3" >
</div>
</body>
</html>

<!doctype html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>배경 스타일1</title>

</head>

<body>
	<h1>Background</h1>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	
	<div id="only-bg"></div>
	<style>
		/* background 속성에 관련 값 모두 작성. size작성시, position꼭 작성! */
		#only-bg {
			width: 100%;
			height: 800px;
			border: 1px solid black;
			/* background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment */
			background: coral url('../sample/image/bgsample.PNG') center center/cover no-repeat fixed;
		}
	</style>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	<br>
	

</body>

</html>

 

 

'학원 > 실습' 카테고리의 다른 글

*54일차 실습  (0) 2022.04.13
*53일차 실습  (0) 2022.04.13
*51일차 실습  (0) 2022.04.07
*50일차 실습  (0) 2022.04.06
*49일차 실습  (0) 2022.04.06
'학원/실습' Related Articles more