웹사이트에 좀 더 입체감을 주기 위해서 어떤 요소는 볼록 튀어나오게 해준 경우가 있고, 어떤 요소는 오목하게 들어가게 해준 경우들이 있습니다. css의 box-shadow 속성을 활용하면 가능합니다.
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container1">
bskyvision
</div>
<br><br>
<div id="container2">
환영합니다
</div>
</body>
</html>
|
cs |
style.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
#container1 {
margin: auto;
width: 300px;
height: 300px;
text-align: center;
box-shadow: 1px 1px 3px 1px #dadce0;
}
#container2 {
margin: auto;
width: 300px;
height: 300px;
text-align: center;
box-shadow: 1px 1px 3px 1px #dadce0 inset;
}
|
cs |
위 코드를 실행하면 다음과 같이 그림자 효과로 인해 첫번째 요소는 볼록 튀어나온 것처럼 보이고, 두번째 요소는 오목 들어간 것처럼 보이게 됩니다.
box-shadow 속성에서 1px 1px 3px 1px #dadce0 inset 값들은 차례로 각각 다음을 의미합니다.
- h-offset: 필수, 그림자가 수평방향으로 얼마나 떨어진 위치에서 시작할 지를 결정합니다. 양수면 오른쪽으로 떨어진 위치에서 시작하고, 음수면 왼쪽으로 떨어진 위치에서 시작합니다.
- v-offset: 필수, 그림자가 수직방향으로 얼마나 떨어진 위치에서 시작할 지를 결정합니다. 양수면 아래쪽으로 떨어진 위치에서 시작하고, 음수면 위쪽으로 떨어진 위치에서 시작합니다.
- blur: 선택, 그림자를 흐리게 할 정도를 결정합니다. 클수록 흐려집니다.
- spread: 선택, 그림자의 크기를 결정합니다. 양수면 커지고, 음수면 작아집니다.
- color: 선택, 그림자의 색상을 결정합니다.
- inset: 선택, 그림자가 요소 안쪽에 위치하게 합니다.
볼록 효과, 오목 효과를 주는 CSS에서 가장 큰 차이는 inset의 유무입니다. inset을 포함해주면, 오목해지고, 포함하지 않으면 볼록해집니다.
참고자료
[1] www.w3schools.com/cssref/css3_pr_box-shadow.asp, w3schools.com, "CSS box-shadow Property"
'Dev > HTML, CSS' 카테고리의 다른 글
| 카카오 책 검색 API 이용해서 무한 스크롤 기능 가진 도서 검색 웹 페이지 만들기 (15) | 2021.03.18 |
|---|---|
| [css] 링크 밑줄 없애기 (4) | 2021.03.13 |
| [css] css 선택자에서 꺽쇠 > 의 의미는? 자식 선택자와 하위 선택자 (1) | 2021.02.16 |
| [css] calc 함수 사용법 (0) | 2021.01.15 |
| [css] 스크롤바 예쁘게 꾸미기 (0) | 2021.01.06 |
| [css] 손가락 모양의 커서, cursor:pointer (0) | 2020.12.30 |
| [html] a 태그에서 title 속성의 역할은? (0) | 2020.12.29 |
| [css] 리스트 앞 기호 내가 원하는 이미지로 바꾸려면? list-style-image 속성 (0) | 2020.12.18 |