box-sizing

컨텐츠 영역에 border까지를 포함시키는 box-sizing속성★
css box model을 계산할 때 보통 width + (padding*2) + (border*2)
이런 공식으로 계산을 하지만 box-sizing속성을 이용하면
padding영역과 border영역을 컨텐츠 영역 (width/height)안에 포함시켜준다.

이렇게 되면 따로 사이즈를 계산할 필요가 없게 된다.

<속성값>
- box-sizing : content-box;
: 기본값으로 padding과 border를 컨텐츠 영역에 포함시키지 않는다. 
        
- box-sizing : border-box;★
: 컨텐츠 영역 안에 padding과 border를 포함시킨다.

(좌) content-box 적용 / (우) border-box 적용

 

border-box 속성 및 여러 속성과 이미지태그를 활용해봤다. 

 

- display: block; 
: block속성으로 바꿔준다.

- margin: 0px auto; 
: 자식박스를 부모영역의 가로 가운데로 보낸다.

- background-color: transparent;
: 투명색
    
- line-height: 1.6;
: 단위 없는 1은 기본값을 따르겠다는 뜻 (기본값 16xp), 기본값 기준으로 소수점 활용도 가능하다.
    
- width: 100%;
: 부모박스의 가로 100%를 채운다.

속성 활용 예제

 

 

배운 것을 활용하여 테스트 한 것과 선생님께서 풀이 해주신 것을 비교해보았다.

비슷하게는 만든 것 같은데 내가 만든 것은 margin과 padding 구분이 잘못되었다.

내 문제 풀이

 

선생님의 풀이

각 컨텐츠를 어떻게 구분했는가가 다른데

컨텐츠 사이 떨어트리기는 margin

컨텐츠 안에서 여백주기는 padding

이 두 가지를 잘 구분해서 사용해야 한다.

 

그리고 이미지를 border-radius 적용을 한 박스에 맞춰서 아래 양끝 모서리를 둥글리고 싶을 때

 

border-radius: 0px 0px 20px 20px;

또는
overflow: hidden;

 

사용하여 만들 수 있다는 것을 알게 되었다.