<CSS 기초> 04. Box 모델과 크기

 

 웹페이지의 구성요소들은 전부 박스모델을 갖고 있다. 박스모델을 통해 크기와 여백 모양 뿐아니라 위치까지 조정할 수 있다.

 

1. Box model

 먼저 content를 살펴보자. 우리가 내용을 넣는 부분에 해당하며 width와 height 속성으로 가로와 세로의 크기를 조정할 수 있다.

 

 다음은 padding이다. 내부의 여백을 의미한다. padding-left : 10px 나 padding-top : 10px 와 같은 방식으로 top right bottom left 등의 여백을 줄 수 있다.

 

 border은 테두리를 의미한다. border : 1px solid #fff 와 같이 굵기와 스타일 색을 지정할 수 있다. 이 때 스타일같은경우 주로 solid를 이용하여 일반적인 실선을 사용하지만 dashed와 dotted와 같은 점선도 사용가능하다. border또한 border-left : 10px 와 같이 사이즈를 조정할 수 있다. 특히 여기서 중요한 속성이 있다. border-radius 값이다. 여기에 3px와 같은 값을 주면 모서리가 살짝 둥근 테두리를 만들 수 있다. 만약 50% 라는 값을 주면 원형이 된다. 그리고 border-top-left-radius와 같은 방법으로 특정 모서리만 깎을 수 있다.

 

 margin 은 바깥의 여백이다. 박스자체를 다른 요소들과 띄울 때 사용한다. margin-bottom : 10px 와 같은 방식으로 위의 요소들과 같이 크기를 조정할 수 있다.

 

 위의 요소들에 사이즈를 지정할 경우 불편한 점이 있다. 만약 위쪽 아래쪽 왼쪽 오른쪽에 전부 사이즈를 주려면 각각을 모두 입력해야한다는 것이다. 그래서 속기형 방식이 존재한다. 이는 다음과 같이 사용한다.

 

div.name {
    padding: 10px 20px 30px 40px;
    margin : 30px 50px;
}

 

 위는 padding 의 사이즈를 위쪽 오른쪽 아래쪽 왼쪽 순서로 지정한 것이다. 이 때 기억해야 할 것은 위쪽부터 시계방향으로 사이즈를 지정한다는 것이다. 만약 margin에서 사용한 것처럼 2개만 입력하면 이는 위아래는 30px 오른쪽왼쪽은 50px 라는 의미이다. 만약 3개를 쓰면 위 양옆 아래 순이 될 것이다.

 

2. Box sizing

 어떤 내용의 사이즈를 높이를 100px로 만들고 싶다고 가정해보자. 테두리는 10px로 주고싶다고 할 때, 우리는 계산을 해야한다. content의 높이 = 100px - (10*2)px 라는 식으로.. 즉 우리는 생각을 테두리를 포함하여 하는데 css는 기본적으로 사이즈를 content-box 기준으로 한다. 이는 매우 귀찮다. 따라서 편한 작업을 위해 우리는 box-sizing:border-box; 라는 선언을 통해 자동으로 border까지 인식하도록 바꿀 수 있다. 이를 다음과 같이 활용해보자.

 

* {
    box-sizing: border-box;
    margin: 0;
  }

 

 위와 같은 구문을 css의 가장 위에 선언하는 것이다. 즉 모든요소는 box를 border사이즈까지 인식하도록 하는 것이다.

 

 

---

 

 

참고

 

이 글은 구름에듀에서 관련 강의를 구매하여 수강 후 공부하며 작성한 글입니다.

모든 내용과 코드 및 이미지는 직접 재구성하였습니다.

 

김버그의 HTML&CSS는 재밌다 - 구름EDU