[CSS]박스모델

코텐츠를 먼저 작성하기 전 작성 공간을 할당해 주는 것이 인지상정!

오늘은 콘텐츠의 고유한 영역인 박스에 대해서 공부해보자

HTML문성의 레이아웃

모든 콘텐츠는 각자의 영역이 있고 이 영역은 (박스)라 불리게 된다.

박스에는 높이(Height), 넓이 width)를 가지게 되며 이 값은 임의로 변경이 가능하다.

(아래 사이트를 참조해서 한번 시도해 보세요)

https://webclub.tistory.com/356

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch

 

다음으로 박스를 이루는 구성요소에 대해서 알아보자

• content(내용물) : 박스의 내용을 담당하는 부분
• border(테두리) : 박스의 테두리를 표시하는 영역
  • border속성에 적용된 여러가지 요소를 사용해  테두리 두께(border-width), 테두리 스타일(border-style),              테두리 색상(border-color)을 변경할 수 있다.

p {
  border: 1px solid red;
}

• padding(안쪽 여백) : 박스 내부에 여백을 지정
• margin(바깥 여백) : 박스의 바깥 여백을 지정

padding과 margin의 값은 top, right, bottom, left로 시계방향으로 지정할 수 있다.

p {
  padding: 10px 20px 30px 40px;
  margin: 10px 20px 30px 40px;
}


p {		
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;	
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}
<!-- 다음과 같은 방법으로도 적용가능-->


<!-- 음수값 적용(바깥 여백에는 음수값 지정가능 다른 엘리 먼트와 겹치게 할때 사용)
p {
  margin-top: -2rem;
}-->

직접 css파일을 만들어 실험해보자

p {
    background-color: aqua;
    width: 300px;
    height: 100px;
    padding: 10px 20px 30px 40px;
    margin: 10px 20px 30px 40px;
    border: 3px solid rgb(52, 33, 201);
  }

출력

박스의 크기를 설정할때 콘텐츠만 생각하고 여백을 고려하지 않아 크기가 맞지 않는 경우가 더러 있다. 

• box-sizing: content-box;  콘텐츠 박스 만의 크기
• box-sizing: border-box; 콘텐츠에 여백 테두리를 보함 한 크기 

콘텐츠를 만들고 따로 테두리를 설정했을 때 전자의 방법으로 콘텐츠 박스를 만들었다면 레이아웃과 정렬이 맞지 않지만 후자의 방법을 택하면 깔끔하게  만들 수 있다.