[FE기초] CSS - Box Model & Display

[FE기초] CSS - Box Model & Display

이전 글에서는 CSS 폰트를 다루었다.

이번에는 HTML에서 정의된 요소의 공간을 다루는 Box Model 과 Display에 대해서 한번 알아보자

2024.04.25 - [FrontEnd] - [FE기초]CSS폰트

[FE기초]CSS폰트

 

 

1. Box Model

모든 HTML 요소는 웹에서 일정 공간 영역을 차지하고 있다.

이러한 공간을 CSS에서는 Box Model 이라고 정의한다.

HTML요소의 박스 모델은 Content, Padding, Border, Margin 으로 구성되어 있다.

Content는 HTML에 요소 내부의 실절적인 내용

Padding 은 Content와 Border 사이의 여백을 말한다.(안쪽 여백)

Border는 Content를 감싸는 테두리이다.

Margin은 테두리를 감싸는 영역 즉 이웃 공간과의 간격을 의미한다.

모든 HTML 요소의 박스 모델은 이렇게 구성되어 있다.

개발자 도구의 Computed 탭에서 박스 모델 확인 가능

 

실제로 한번 만들어 보자

div {
    background-color: beige;
    width: 200px;
    height: 200px;
    padding: 20px;
    border: 5px solid gray;
    margin: 40px;b
}

이렇게 정의된 스타일을 적용해서 compute를 확인하면 다음과 같다.

CSS에서 정의한 것처럼 콘텐츠 크기, 패딩, 마진 등이 설정된 사실을 볼수 있다.

그럼 이제 상세하게 각 박스 모델의 속성을 다루는 법을 알아보자

 

2. Box Model 속성

◼ Content

width : Content 영역은 Width 값을 이용하기로 가로 너비를 지정할 수 있다.

height : Content 영역은 height 값을 이용하여 세로 너비를 지정할 수 있다.

✅ 인라인 레빌의 요소는 width, height 가 적용되지 않는다.
인라인 요소는 
콘텐츠 만큼의 영역을 갖기 때문
이다.
만약 인라인 요소에 가로 세로를 변경하고 싶다면 display : inline-block으로 변경
span과 같은 인라인 요소는 아래와 같이 디스플레이를 변경해야함

span {
    border: 1px solid red;
    width: 100px;
    height: 100px;
    display: inline-block;
}​

◼ Padding

안쪽 여백을 의미하며 padding 속성으로 지정한다.

그냥 padding을 하면 상하좌우 동일하게 지정되며, 각 방향별로 지정도 가능하다.

방향별로 지정하는 방법으로 padding-right 등의 방향 지정자를 추가하는 방법도 있지만

padding : 20px , 10px 과 같이 1개, 2개, 3개, 4개 각 방향별로 지정해서 사용 가능하다.

이때 2개를 하면 상하, 좌우를 각 각 지정하는 것
4개이면 모든 방향을 지정하는 것
현업에서는 주로 1개, 2개 등을 많이 사용 3개는 잘 안씀

 

◼ Margin

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

패딩과 매커니즘은 거의 동일하게 유지된다.

하지만 패딩과 다른 점은 다른 요소들과 겹칠수 있는 상황이 존재한다.

세로로 배치할 경우 마진간의 겹침이 발생시 마진이 큰 값 쪽으로 겹쳐진다.

 

◼ Border

컨텐츠의 테두리를 지정하는 영역을 의미한다.

border-style을 통해서 테두리 모양, 두께 등을 고를 수 있다.

마진, 패팅 처럼 4개를 선택해서 각 상하좌우에 맞게 서로 다른 선모양을 지정도 가능

.border {
    width: 200px;
    height: 200px;
    border-left: 1px solid yellow;
    border-right: 3px dotted red;
    border-bottom: 5px dashed blue;
    border-top: 7px solid black;
 }
  .border-radius {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    border-radius: 50%;
 }

 

◼ Box Sizing

박스 사이징 속성은 HTML 요소의 너비와 높이를 계산하는 방법을 지정

CSS 박스 모델에서 지정한 너비나 높이는 HTML요소의 컨텐츠 크기에 적용된다.

보더, 패딩이 있는 경우 너비와 높이에 더해서 화면에 그린다.

즉 크기를 설정시 패딩이나 보더를 고려해서 전체 크기를 산정해야한다.

이때 박스 사이징을 통해서 이 방식을 변경 가능하다.

 

• content-box
  • 콘텐츠 박스는 콘텐츠의 크기를 기준으로 하는 것이다.
  • width, height를 설정하면 여기에 콘텐츠 크기가 설정되고 전체 크기는 padding, margin을 포함한 크기가 된다
• border-box
  • content-box와 다르게 width, height가 전체 크기가 된다.
  • 즉 100이라고 가로를 설정하면 padding, margin을 다 합친 크기가 100이 되게 해준다.

3. Display

display 속성은 HTML 요소를 어떻게 표시할지 결정

HTML 요소마다 기본적으로 갖고 있는 display 속성이 상이하다.

 

이 기본값이 block 이면 블록 레벨 요소이고 반대로 Inline이면 인라인 레벨 요소이다.

한번 4가지의 기본 값을 알아보자

 

• none : 요소롤 보이지 않게 설정, visibility hidden 과 달리 영역 자체를 차지 X
• block : 가로 영역을 모두 채우면 블록 요소 다음에 등장하는 태그는 줄바꿈 처럼 보임(word 문단 역할)
• inline : 컨텐츠만큼 영역을 차지, 줄바꿈이 없고, 가로 세로 지정 불가(word에서 문장효과 등 역할)
• inline-block : block 과 inline 의 중간 형태로 요소는 inline인데 내부는 block 처럼 표시, 컨텐츠 영역만큼 차지하여 가로 배치 되지만 가로 세로 설정 가능

inline-block 은 상단의 네비게이션 블록을 만들때 주로 사용