CSS 기본 (5)_박스(padding, margin, box-sizing, box-shadow, test-shadow)

박스모델의 구조

사이즈 : width, height

간격 : margin(border 밖), padding(content와 border사이)

 

---

margin, padding 속성 크기 지정

1. 한 개의 숫자 : 상 우 하 좌 모두 동일

2. 두 개의 숫자 : 상-하 / 좌-우

3. 네 개의 숫자 : 상 우 하 좌 (순서대로)

 

---

box-sizing

 

1. box-sizing 설정X

<div class="box1"></div>
<div class="box2"></div>

.box1 {
    width: 100px;
    height: 100px;
    border: 10px solid red;
    margin: 20px;
}
.box2 {
    width: 100px;
    height: 100px;
    border: 10px solid red;
    padding: 10px;
    margin: 20px;
}

위 : A  / 아래 : B

위의 그림처럼 padding값을 주면 그만큼 박스의 크기가 늘어난다.

A의 너비는 120px이다.(width 100px + border 20px(10px+10px))

B의 너비는 170px이다.(width 100px + border 20px(10px+10px) + padding 10px)

 

2. box-sizing 설정O

.box1 {
    width: 100px;
    height: 100px;
    border: 10px solid red;
    margin: 20px;
    
}
.box2 {
    width: 100px;
    height: 100px;
    border: 10px solid red;
    padding: 10px;
    margin: 20px;
    box-sizing: border-box;
}

위 : A  / 아래 : B

box-sizing 을 border-box 로 설정을 한 결과이다!

 

box-sizing: border-box

= 초기 설정한 너비, 높이 값을 그대로 유지하도록 해준다.

   (padding, border값을 넣어도!)

---

shadow

box-shadow

box-shadow: inset offset-x offset-y blur color

offset-x , y : 수평/수직 그림자의 offset 값 (바깥쪽 그림자)

blur : 그림자 가장자리 부드럽게 처리 정도 (default 0)

color : 색상

inset : 안쪽 그림자 (그대로 적어주면 됨) (필수X)

 

값을 넣을 때 여러개를 중첩해서 넣어줄 수 있다.

 

ex)

.box {
    border: 1px solid rgb(216, 216, 216);
    width: 250px;
    height: 200px;
    border-radius: 5%;
    box-shadow: 10px 10px 0 dodgerblue,
    20px 20px 0 rgb(90, 169, 248),
    30px 30px 0 rgb(170, 213, 255);
}

---

text-shadow

text-shadow: offset-x offset-y blur-radius color

blur-radius : 흐림 정도 (선택사항, default: 0)

color (선택사항, default: 텍스트 색상)

 

ex)

.heading {
    color:gold;
    text-shadow: 3px 3px 0 dodgerblue,
    5px 5px 0 rgb(115, 184, 253);
}