CSS 박스모델

1. border

 

border-style : 테두리 스타일 지정

value : solid dashed dotted double groove inset ouset

border-style : 테두리 스타일 지정

 

boder-width : 테두리 두께 지정

px % 등

 

border-color : 테두리 색상 지정

color 값

 

한 방에 여러 속성 지정 

.box {
    width: 400px;
    height: 400px;
    border-color: blue;
    border-width: 5px;
    border-style: solid;
}

border라는 속성을 한번에 묶어서 쓸 수 있다

.box {
    width: 400px;
    height: 400px;
    border : 1px solid blue;
}

border-bottom처럼 방향이 없으면 상하좌우 네면 모두 적용이되고, 만약 bottom만 없애고 싶다면 border-bottom:none; 처럼 개별속성을 줄 수 있다

 

2. border-radius

 

 

border-radius : 코너를 둥글게  ex) px, %

 

 

예시 코드)

  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
  <div class="box4">box4</div>
  <div class="box5">box5</div>
  <div class="box6">box6</div>
  <div class="box7">box7</div>
  <div class="box8">box8</div>

div {
    width: 200px;
    height: 200px;
    background-color: dodgerblue;
    border: 10px solid orange;
    margin: 10px;
    float: left;
}

.box1 {
    border-radius: 20px;
}

.box2 {
    border-radius: 50px;
}
.box3 {
    border-radius: 50%;
}
.box4 {
    border-radius: 50px 0 50px 0;
}
.box5 {
    border-radius: 200px 0 0 0;
}
.box6 {
    border-radius: 200px 200px 200px 0;
}
.box7 {
    border-radius: 200px 0 200px 0;
}
.box8 {
    border-radius: 200px 200px 0 0;
}

 

 

 

3. CSS 박스모델(width, height, padding, margin)

 

margin, padding 속성 크기 지정 

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

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

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

 

 

4. 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;
}

위의 그림처럼 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;
}

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

box-sizing: border-box = 초기 설정한 너비, 높이 값을 그대로 유지하도록 해준다. (padding, border값을 넣어도!)