2023. 11. 6. 21:48ㆍreact
box-shadow 값 요소들
box-shadow는 2개~4개의 length
값과 옵션으로 color
값과 inset
값으로 구성됩니다. 각 값들의 순서는 아무렇게 입력해도 상관없지만 length
값들은 꼭 연속해서 입력되야하며 2개이상의 값이 필요합니다.
// 올바른 입력
box-shadow: red inset 3px 3px 1em .2em;
box-shadow: red 3px 3px 1em .2em;
box-shadow: red 3px 3px 1em .2em inset;
box-shadow: 3px 3px 1em red;
// 틀린 입력
box-shadow: 3px 3px red 1em;
box-shadow: 3px red;
color
는 그림자 색상, inset
은 그림자 반전 여부 그리고, length
값들은 그림자의 위치를 나타냅니다,
length
값들의 역할
그림자 위치
length
값은 입력 순서대로 가장 앞선 2개의 값이 각각 offset-x
, offset-y
가 되며 그뒤 순서대로 blur-radius
, spread-radius
가 됩니다.
기본적으로 입력되어야 하는 offset-x
와 offset-y
는 그림자의 위치를 나타냅니다. 똑같은 크기의 그림자가 요소 뒤에 존재(offset-x=0, offset-y=0
)한다고 보고 이 그림자를 좌우측(offset-x
) 또는 상하(offset-y
)로 이동시킨다고 생각하시면 됩니다.
그림자 번짐
세번째 length
값은 그림자의 번짐 정도를 나타냅니다. 해당 값이 커질수록 그림자의 영역이 번짐효과와 함께 넓어집니다.
그림자 범위
네번째 length
값은 그림자의 크기를 나타냅니다. 기본값으로는 0
으로 그림자의 크기가 요소의 크기와 동일하지만, 해당 값이 커지면 그림자의 크기가 상하좌우로 커지고, 반대로 값이 작아지면 그림자의 크기가 작아집니다.
color
그림자 색상의 경우 CSS의 기본 색상 표현식(rgba
, hex
등)으로 색을 지정할 수 있습니다.
inset
기본적으로 그림자는 요소의 뒤편 그리고 바깥영역을 차지하지만, inset
을 사용하면 그림자를 요소 안의 영역을 차지하도록 할 수 있습니다.
inset
의 사용여부와는 상관없이 length
값들은 동일하게 동작합니다. 다만 번짐효과나 그림자의 범위조절의 경우 inset
의 사용여부에 따라 느낌이 좀 다른데요. 해당 값이 커질수록 inset
을 사용하지 않으면 마치 요소 바깥방향으로 뻗어나가는 형태이고, inset
을 사용하게되면 요소 안쪽방향으로 뻗어나는 형태를 나타내게 됩니다.
두 샘플이미지를 보면 inset
설정이 없으면 번짐효과나 범위는 값이 커질수록 요소 바깥 방향으로 뻗어나가지만, inset
설정이 있는경우 번짐효과나 범위는 값이 커질수록 요소 안쪽 방향으로 뻗어나가는것을 볼 수 있습니다.
Multiple box-shadow
그리고 box-shadow에서는 콤마(,
)를 사용하여 그림자를 여러개 동시에 설정할 수 있습니다.
box-shadow:
inset 0 -3em 3em rgba(0, 0, 200, 0.3),
0 0 0 2px white,
-0.3em -0.3em 1em rgba(0, 200, 0, 0.6),
0.3em 0.3em 2em rgba(200, 0, 0, 0.6);
그림자의 순서는 먼저 생성되는 그림자가 제일 위로 오고 나중에 생성될수록 점점 더 뒤로 갑니다.
box-shadow:
0 0 0 1em rgba(0, 200, 0),
0 0 0 3em rgba(200, 0, 0);
'react' 카테고리의 다른 글
React event의 여러가지 target (0) | 2023.11.19 |
---|---|
box-shadow로 inline border 만들기 (0) | 2023.11.13 |
html input 유효성(validity) 검사 (2) | 2023.10.14 |
input요소 checkValidity와 reportValidity (0) | 2023.10.13 |
CSS Box model (0) | 2020.11.15 |