Category
카드 박스의 테두리, 둥글기, 그림자를 바꾸고 싶다
테두리 두께와 모양 값을 조합해 카드 인상을 비교합니다.
<div class="box">
<!-- 카드 박스 -->
Box Design
</div>/* 1. 테두리 두께 */
.box {
border-width: 1px;
/* 2. 테두리 모양 */
border-style: solid;
}테두리 두께
테두리 모양
border-radius 값으로 카드 인상을 바꿉니다.
<div class="box">
Radius Sample
</div>/* 1. 모서리 둥글기 */
.box {
border-radius: 16px;
}모서리 둥글기
방향, blur, 색상을 조합해 그림자를 세밀하게 조절합니다.
<div class="box">
Shadow Sample
</div>/* 1. 그림자: x y blur color */
.box {
box-shadow: 0 8px 18px rgba(255, 255, 255, 0.28);
}그림자 방향
blur
그림자 색상
content-box와 border-box를 같은 조건에서 나란히 비교합니다.
<div class="sample content-box">content-box</div>
<div class="sample border-box">border-box</div>/* 1. 두 박스 공통 조건 */
.sample {
width: 180px;
padding: 20px;
border-width: 6px;
border-style: solid;
border-color: #60a5fa;
}
/* 2. width가 content만 의미 */
.content-box {
box-sizing: content-box;
}
/* 3. width 안에 padding/border 포함 */
.border-box {
box-sizing: border-box;
}기준 width
padding
border-width