스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법

스타일시트 CSS

스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법

 

환경: Eclipse Mars

 

CSS3부터는 박스에 그림자 효과를 줄 수가 있습니다. 이전에는 포토샵같은 프로그램으로 그림자 작업을 한 이미지를 올릴 수 밖에 없었습니다. 이제는 box-shadow 속성을 이용해서 간단하게 작업이 가능합니다. 이전에 다루었던 모서리 기능과 함께 샘플을 구현해 보도록 하겠습니다.

 

문법은 아래와 같습니다. hoff 는 그림자의 가로값이고 voff 는 세로값입니다. bg 는 흐림거리, sd 는 확산거리, color 은 그림자의 색을 나타냅니다. 이제 하나하나씩 예제를 통해서 알아 보겠습니다.

 

<style type="text/css">

   box-shadow: Œhoff voff Žbd sd color ‘inset;

</style>

 

1. horizontal offset

 

1번과 2번값은 필수 입니다. 이 길이 값은 그림자의 가로 길이를 나타내며 양수는 오른쪽으로 가고 음수는 왼쪽으로 확장됩니다.

 

2. vertical offset

 

이 값은 그림자의 세로 길이 값을 나타납니다. 1번과 마찬가지로 필수입니다. 샘플에서 첫 번째 20px 은 가로 길이 값인 horizontal offset 을 나타내며 세로 길이는 vertical offset 입니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>정렬</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	.radius1{
		width: 300px; height: 150px;
		margin: 10px; border: solid;
		background-color: #4e539a;
		border-radius : 10px;
	}
	.boxshadow1{
		box-shadow: 20px 20px black;
	}
</style>
</head>
<body>
	<div class="radius1 boxshadow1"></div>
</body>
</html>

 

스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법

 

3. blur distance

 

이 값은 그림자의 흐려짐을 나타내는 것으로 값이 흐려지기 시작하는 곳과 끝 사이의 길이 값을 설정합니다. 그러니까 값이 크면 클수록 흐려지게 됩니다. 예제에서 box-shadow 에 입력한 값 중 3번째에 있는 20px 을 가리킵니다.

<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	.radius1{
		width: 300px; height: 150px;
		margin: 10px; border: solid;
		background-color: #4e539a;
		border-radius : 10px;
	}
	.boxshadow1{
		box-shadow: 20px 20px 20px black;
	}
</style>

스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법

 

4. spread distance

 

이 값은 원본 그림자 사각형의 경계선에서 얼마나 더 확장할 것인지 정하는 값입니다. 중앙에 있는 원본 그림자의 희미한 빨간색 사각형 보다 더 확장되어서 나갔죠? 이것이 4번째 값인 20px 입니다.

<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	.radius1{
		width: 300px; height: 150px;
		margin: 10px; border: solid;
		background-color: #4e539a;
		border-radius : 10px;
	}
	.boxshadow1{
		box-shadow: 20px 20px 20px 20px black;
	}
</style>

스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법

 

5. color

 

이 값은 16진수 값이나 컬러 상수 값으로 세팅할 수 있습니다. 샘플에서는 black 라는 상수 값을 넣었습니다. 16진수로 표현하면 #000000 이 됩니다.

 

6. inset

 

이 값을 설정하게 되면 바깥쪽 그림자에서 안쪽 그림자로 변경이 됩니다. inset 을 넣게 되면 1,2,3번 값이 안쪽 그림자로 바뀝니다. box-shadow 의 제일 마지막에 입력된 inset 문자를 입력하게 되면 외부의 그림자가 내부로 들어오게 됩니다.

<style type="text/css">
	body {
		background-color: #e7e7e7;
	}
	.radius1{
		width: 300px; height: 150px;
		margin: 10px; border: solid;
		background-color: #4e539a;
		border-radius : 10px;
	}
	.boxshadow1{
		box-shadow: 20px 20px 20px 20px black inset;
	}
</style>

스타일 시트 CSS box-shadow 속성, 그림자 추가하는 방법

 

저작자 표시 비영리 변경 금지
신고
Posted by 녹두장군