안녕하세요! 오늘은 요소의 테두리에 그림자 스타일을 설정하는 box-shadow 속성에 대해
알아 보려고 합니다.
자주 사용하는 속성인데 내부 속성 인자 값이 많고 정확한 의미를 모르고 사용하는 경우가 많아서
정리해보려고 합니다!
속성 내부 설정 값
<offset-x> <offset-y>
그림자의 위치를 설정하는 첫번째, 두번째 길이설정 값입니다.
offset-x 값이 양수일 경우 오른쪽으로 그림자나 나타나고 음수일 경우 왼쪽으로 그림자가 표시됩니다.
offset-y 값이 양수일 경우 아래쪽으로 그림자나 나타나고 음수일 경우 위쪽으로 그림자가 표시됩니다.
<blur-radius>
그림자 테두리의 흐린 정도를 나타내는 세번째 길이설정 값입니다.
이 값이 클 수록 그림자 크기는 더 커지고 색은 더 밝아 집니다. 음수 값은 사용할 수 없고,
기본값은 0으로 설정하지 않을 경우 선명한 테두리가 나타납니다.
<spread-radius>
그림자의 퍼지는 범위를 나타내는 네번째 길이설정 값입니다.
양수일 경우 그림자가 더 넓게 확산되고, 음수일 경우 그림자가 줄어듭니다. 기본값은 0입니다.
<color>
그림자의 색상을 선택하는 속성입니다.
<inset>
값을 지정하지 않으면 그림자를 적용할 요소가 떠있고, 뒤에 그림자가 나타나는 효과가 나타납니다.
값을 지정할 경우 그림자가 요소의 내부에 그려집니다. 움푹 들어간 것 처럼 보이는 효과를 보입니다.
지정하지 않는 상태가 기본 값 입니다.
사용 예시
박스 하나를 화면 가운데 생성하고 직접 box-shadow 속성을 변경하여 효과를 줘보겠습니다.
우선 box 하나를 생성해 줍니다.
<style>
.box {
margin: 50px auto;
width: 100px;
height: 100px;
border: 2px solid black;
}
</style>
<body>
<div class="box">
</div>
</body>
<offset-x> <offset-y>
양수값 설정
.box {
box-shadow : 5px 5px;
}

음수값 설정
.box {
box-shadow : -5px -5px;
}

<blur-radius>
.box {
box-shadow : 5px 5px 10px;
}

<spread-radius>
양수값 설정
.box {
box-shadow : 5px 5px 10px 3px;
}

음수값 설정
.box {
box-shadow : 5px 5px 10px -3px;
}

<color>
.box {
box-shadow : 5px 5px 10px 3px red;
}

<inset>
.box {
box-shadow : 5px 5px 10px -3px inset;
}

오늘은 box-shadow 속성의 값이 무엇을 의미하는지를 알아보고 관련 예시를 함께 확인해 봤습니다.
다음에 또다른 내용으로 찾아 오겠습니다.
그럼 이만~
'css' 카테고리의 다른 글
CSS calc() 활용방법 정리 (0) | 2023.01.10 |
---|---|
CSS 세로 가운데 정렬 방법 정리 (0) | 2022.12.29 |
CSS margin 속성 사용법 정리 (0) | 2022.12.27 |
CSS box-sizing 속성 (영역, 기준 정리) (0) | 2022.12.21 |
CSS 초기화 (Reset CSS) (0) | 2022.12.14 |
댓글