코딩재개발 RSS 태그 관리 글쓰기 방명록
2021-01-14 14:59:27

웹사이트에 좀 더 입체감을 주기 위해서 어떤 요소는 볼록 튀어나오게 해준 경우가 있고, 어떤 요소는 오목하게 들어가게 해준 경우들이 있습니다. 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"

* 글을 읽던 중에 궁금했던 부분은 질문해주세요.
* 칭찬, 지적, 의문, 격려, 감사표현 등을 남겨주세요.
* 최대한 답변 드리도록 노력하겠습니다.
* 욕설과 광고를 담은 댓글은 가차없이 삭제합니다.
* 티스토리 회원인데, 로그인이 풀린 경우에는 우측 상단에 있는 물음표 아이콘을 클릭해주세요.
비밀글
  1. 꼬장스카이비젼@2021.01.15 07:19 ~$ 오목 볼록의 기준이 빛이 10시 방향에서 들어온다고 가정했을때 그런것 같은데요.
    4시 방향에서 빛이 들어온다고 가정하면 위에것이 오목이고 밑에것이 볼록일것 같은데 어떻게 생각하세요?
    항상 좋은글 잘 읽고 갑니다. :) [댓글주소]  [수정/삭제]  [답글작성]