|
스타일 시트 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>
|
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>
|
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>
|
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' 카테고리의 다른 글
| 스타일 시트 CSS 값을 표현하는 절대단위 와 상대단위 알아보기 (0) | 2019.02.02 |
|---|---|
| 스타일 시트 CSS 글꼴 font 꾸밈 관련 속성 알아보기 (0) | 2019.01.06 |
| 인터넷 사이트를 통해 CSS 소스코드 한번에 정렬하는 방법 (2) | 2018.11.21 |
| 스타일 시트 CSS 모서리 기능 이용해서 버튼 만들기 (0) | 2018.10.21 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 타원으로 표시하기 (0) | 2018.09.17 |
| 스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기 (0) | 2018.08.25 |
| 스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기 (0) | 2018.08.09 |
| 스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기 (1) | 2018.07.27 |
