[CSS] 박스 속성

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

 

HTML에서 생성한 블럭 요소들은 각자 고유한 사각형 영역을 가진다.

이 사각형 요소들에게 적절한 스타일을 적용하면

원하는 형태로 웹페이지를 구성할 수 있다.

 

이 때 개인적인 Tip을 하나 주면,

CSS로 화면을 구성할 때 각 요소에 red, blue등 눈에 잘 띄는 색으로

테두리 선을 그어주고 작업을 하면 화면을 구성하기 쉬워진다.

 

그러면 박스를 이용해 화면에 구성하기 위해서 필요한

다양한 속성을 알아보자.

 

 

1. 크기

width와 height

width 속성은 Content의 가로 길이를 의미하고, height 속성은 Content의 세로 길이를 의미한다.

속성 값은 px, cm, %등의 단위나 auto, initial, inherit등이 가능하다.

❗오직 Content의 크기이며 padding과 border는 포함되지 않아 실제 width와 차이가 있을 수 있다.

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

 

 

max-width

크기와 관련하여 max-width속성도 있는데 이 속성 또한 자주 쓰여진다.

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

max-width속성은 box의 최대 크기를 지정하고, 브라우저의 크기에 맞게 자동으로 설정된다.

즉, 창 크기를 줄였을 때 박스가 창의 크기에 맞게 자동으로 줄어든다.

 

 

2. Border 속성

위에서 박스의 테두리 선을 그린채로 작업을 하면 편하다고 했다.

그렇다면 테두리는 어떻게 그리는 것일까?

 

우선 board속성 안에서도 다양한 세부 속성이 있다.

border-style	solid dotted dashed double groove ridge inset outset none hidden dotted
border-width	px pt cm em thin medium thick
border-color	색상 값
border-radius	px

 

이렇게 많은 세부 속성이 있지만, 우리는 다음과 같이 세부속성 하나하나 지정하는 것이 아니라

한꺼번에 속성을 지정하는 형태를 더 많이 사용한다.

 

아래 코드는 5px 두께의 직선 빨간줄로 테두리를 그리는 것이다.

p {
  border: 5px solid red;
}

 

2. Margin과 Padding

margin 속성

margin은 요소의 바깥쪽 여백을 의미한다.

속성 값의 단위는 px, em, %, rem 등이 가능하다.

p {
  margin: 25px 50px 75px 100px;
}

 

또한 Margin은 auto라는 값도 가질 수 있는데 이렇게 하면 가로 방향으로 가운데 정렬이 가능하다.

 

또 알아야 할 것은 두 요소의 margin이 충돌하면 하나의 margin만 표현된다.

예를 들어, 한 요소의 margin이 10px이고, 다른 요소의 margin이 20px이라고 가정하자.

두 요소가 나란히 배치되면 10px+20px=30px의 공간을 가지는 것이 아니라,

둘 중 더 큰 수인 20px의 여백을 가진다.

 

padding 속성

padding은 요소의 안쪽 여백을 의미한다.

속성 값의 단위는 margin과 동일하게 px, em, %, rem 등이 있다.

div {
  padding: 70px;
  border: 1px solid #4CAF50;
}

 

❗여기서 주의할 점❗

width를 300px로 설정한 상태에서 25px만큼의 padding을 주면 박스의 크기는 350px가 된다.

이 현상은 border의 두께를 25px를 해도 발생한다.

이 때, box-sizing 속성을 사용하면 padding이나 border를 모두 포함하여 width를 설정한다.

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}