2022-08-02 CSS_3 (Box model)

2022-08-02 CSS_3 (Box model)

2022. 8. 2. 23:31ㆍFE/CSS

박스모델 - 생활코딩

CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항

opentutorials.org

이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다.

1. 박스 모델이란?

박스 모델이란 개념이 있다.

직관적으로 이해하기 위해서 구글에 검색해 이미지를 살펴보자.

구글에 박스 모델이라고 검색하면 아래와 같은 결과를 얻을 수 있다.

박스 모델에 대한 사전적 정의를 찾아보면 아래와 같은 대답을 얻을 수 있다.

In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content….

무슨 말인지 그 의미에 대하여 한번 알아보자.

출처 : https://www.w3schools.com/css/css_boxmodel.asp

2. Block vs Inline

2022-02-27 HTML_1

HTML 배우기 시작하기 앞서서... 노마드 코더님이 '개발자의 인생을 바꾸는 언어'라는 내용으로 영상을 올리셨다. 가장 중요한 언어는 다름 아닌 영어라고 한다. 영어를 공부의 목적보단 수단으로

ramen4598.tistory.com

이전에 block level element와 inline element에 대하여 공부한 적이 있다.

이전에는 블록과 인라인의 차이점에 대하여 알아보았다.

HTML 수준에선 그 정도로 충분했다.

하지만 CSS을 이용할 수 있게 된다면 우리는 정해진 모양에서 벗어나 우리가 원하는 대로 바꿀 수 있다.

가. 예시 : 테두리 추가 (border)

<body>
    <h1>block</h1>
    <a>inline</a>
</body>

아주 기본적인 예시다.

블록과 인라인 요소의 실질적인 크기를 눈으로 확인할 겸 테두리(border)를 그려보겠다. (solid는 단선을 의미)

...
<style>
    h1{
        border-width: 5px;
        border-color: red;
        border-style: solid;
    }
    a{
        border-width: 5px;
        border-color: red;
        border-style: solid;
    }
</style>
...

h1 태그는 화면전체를 쓰는 블록 레벨 엘리먼트다.

a 태그는 콘텐츠 크기만큼 쓰는 인라인 엘리먼트다.

이는 일반적인 상황을 가정해서 사용하기 편한 기본값이다.

그리고 기본값은 언제든지 변경 가능하다.

display: inline;

display: block;

display: none;

심지어 태그가 안 보이게 할 수 도 있다.

참고로 중복된 코드를 제거할 수 있다.

...
<style>
    h1, a{
        border: 5px solid red;
    }
</style>
...

이때 5px, solid, red의 순서는 상관없다.

이밖에도 우리가 수정할 수 있는 기본값은 다양하다.

인라인 vs 블록 (콘텐츠의 크기)
컨텐츠의 크기 (가로 width, 세로 height 길이)
테두리의 색상, 굵기와 종류 (border)
콘텐츠와 테두리 사이의 간격 (padding)
테두리와 테두리 사이의 간격 (margin)
etc …

CSS를 이용하면 원하는 대로 변경할 수 있다.

3. width, height

우리는 width, height를 통해서 콘텐츠의 크기를 조절할 수 있다.

그런데 이는 block이냐 inline이냐에 따라서 조금 다르다.

<style>
    h1, a{
        border: 5px solid red;
        width: 400px;
    }
</style>

Block element에 해당되는 h1 태그의 가로 길이가 400px로 바뀌었다.

하지만 inline element에 해당되는 a 태그는 변경되지 않은 것을 알 수 있다.

<style>
    h1, a{
        border: 5px solid red;
      width: 400px;
        height: 400px;
    }
</style>

세로 길이도 height를 사용해서 변경 가능하다.

마찬가지로 block element에 해당하는 h1 태그만 수정된 것을 확인할 수 있다.

가. 실험

<style>
      .noPad {
        border: 5px solid red;
        width: 400px;
        height: 100px;
      }
      .pad {
        border: 5px solid red;
        width: 400px;
        height: 100px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>
      <h1 class="noPad">block</h1>
      <a class="noPad">inline</a>
    </div>
    <div>
      <h1 class="pad">block</h1>
      <a class="pad">inline</a>
    </div>
  </body>

padding: 0;	padding= 20;

웹 페이지를 우클릭해서 ‘검사'를 클릭하면 확인할 수 있는 정보다.

파란색 박스가 400x100인 것을 통해서 우리가 width과 height를 수정함으로써 콘텐츠의 크기를 조절할 수 있음을 알 수 있다.

실제로 Block element는 우리가 width과 height를 수정함으로써 컨텐츠의 크기를 조절할 수 있다.

하지만 inline element는 조절할 수 없었다.

Margin과 padding은 둘 다 사용할 수 있었다.

4. Margin, Padding

가. padding

Padding은 콘텐츠와 테두리 사이의 간격을 의미한다.

<style>
    h1, a{
        border: 5px solid red;
        padding: 20px;
    }
</style>

Block과 inline 모두에 적용된 모습을 볼 수 있다.

~~뚠뚠 해졌다.~~

나. Margin

Magin은 테두리와 테두리 사이의 간격을 의미한다.

<style>
    h1, a{
        border: 5px solid red;
        margin: 100px;
    }
</style>

Block과 inline 모두에 적용된 모습을 볼 수 있다.

~~사회적 거리두기~~

/* 네 면 모두 적용 */
margin: 1em;
margin: -3px;

/* 세로방향 | 가로방향 */
margin: 5% auto;

/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;

/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

/* 전역 값 */
margin: inherit;
margin: initial;
margin: unset;

출처 : https://developer.mozilla.org/ko/docs/Web/CSS/margin

(24.03.10 추가)

다. margin 통합

block level의 경우, 두 개 이상의 수직 마진은 통합된다.

수평 마진은 통합되지 않는다.

</style>
	...
	li {
	  margin: 15px;
	 	...
	}
	li.withborder {
	  margin-top: 30px;
	  ...
	}
</style>

...
<ul>
  <li>첫번째 리스트입니다.</li>
  <li class="withborder">두번째 리스트입니다.</li>
</ul>

둘 사이 마진은 45px이 아닌 통합된 30px다.

5. 정리

Box model은 디자인에서 핵심적인 요소중 하나인 부피감과 관련된 모델이다.

HTML 태그들의 부피감을 결정하는 방식이다.

Content, border, padding, margin을 조정해서 부피감을 조절할 수 있다.

웹 페이지 디자인에 바탕이 되는 기본 개념이라 볼 수 있다.

(24.03.10 추가)

6. box-sizing

/* content-box */
*{
	/*default value
    box-sizing: content-box;
    */
}

/* border-box */
*{
	box-sizing: border-box;
}

https://opentutorials.org/course/2418/13405

content-box : content의 크기만 width와 height로 인식
border-box : content + padding + border까지 합친 크기를 width와 height로 인식

border-box를 많이 사용한다.

'FE > CSS' 카테고리의 다른 글

[CSS] Positioning, Flexbox (0)	2024.03.10
2022-08-10 CSS_5 (반응형 웹, 캐싱) (0)	2022.08.10
2022-08-03 CSS_4 (Grid) (0)	2022.08.04
2022-08-01 CSS_2 (Property, Selector) (0)	2022.08.01
2022-07-30 CSS_1 (소개) (0)	2022.07.30

개발은 즐거워?