CSS : 레이아웃 정리 (display/box-sizing/em/rem)

프로젝트를 구현하면서 헷갈리는 CSS이 있었다. 이번 포스팅은 내가 헷갈려하는 CSS들의 정리한 것이다.

 

CSS와 박스 모델

CSS 박스 모델이란, 박스 형태의 모델이다. 이 박스 모델들이 모여 웹문서를 이룬다. 또한 그 안에는 margin과 padding, border 등 여러 겹의 박스가 들어있다. 

 

블록 레벨 요소 VS 인라인 레벨 요소

박스 모델은 블록 레벡 요소인지 인라인 레벨 요소인지에 따라 나열 방법이 달라진다. 

블록 레벨 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 의미이다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. width, margin, padding 등을 이용해 크기나 위치를 지정하려면 블록 레벨 요소여야 한다. 블록 레벨 요소의 대표적인 태그는 <div>, <p> 태그 등이 있다. 

인라인 레벨요소는 줄을 차지하지 않는 요소이다. 즉 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 인라인 레벨 요소의 대표적인 태그는 <img>, <strong> 태그 등이 있다. 

박스 모델은 박스 형태의 콘텐츠이다. 블록 레벨 요소들은 모두 박스 형태이다. CSS에서는 박스형 태인 요소를 '박스 모델 요소'라고 부른다. 웹 문서 안에 여러 요소들을 원하는 위치에 배치하려면 CSS박스 모델에 대해 잘 알고있어야햔다. 

display 속성

이제 내가 제일 헷갈려하는 display 속성에 대해 알아보자. display속성은 화면 배치 방법을 결정할 때 사용한다. 요소를 블록과 인라인 요소중 어느쪽으로 처리할지와 요소를 배치할 때 사용할 레이아웃도 설정한다. 

display : block | inline | inline-block | flex | inline-flex | grid | inline-grid | flow-root | none | contents

 

속성으로는  block | inline | inline-block | flex | inline-flex | grid | inline-grid | flow-root | none | contents 가 있다. 프로젝트를 진행하면서 가장 많이 사용하는 속성은 flex이다. flex의 예시를 들어가며 공부해보자. 

 

display:flex 브라우저의 정가운데에 div요소를 둬야할 때

 

<section class="section">
  <div class="container">
  </div>
</section>

.section {
  width: 100%;
  height: 100vh;
  background-color: antiquewhite;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: black;
  width: 100px;
  height: 100px;
}

display: flex 요소는 블록요소처럼 작동하고 flexbox모델에 따라 내용을 배치한다.

justify-content : 인자값으로 받아 요소들을 가로선 상에서 정렬한다. center를 인자 값으로 넘겨 요소들을 컨테이너의 가운데로 정렬한다. 

align-items : 인자값으로 받아 요소들을 세로선 상에서 정렬한다. center를  요소들을 컨테이너의 세로선 상의 가운데로 정렬한다.

👉 CSS Flexible Box Layout 정리한 글

 

flex를 사용해 비율 나누기 

 

<div class="section">
  <div class="div1">
  </div>
  <div class="div2">
  </div>
</div>

.section {
  display: flex;
  height: 100vh;
  width: 100%;
}

.div1 {
  flex: 1 1 30%;
  background-color: burlywood;
  width: 100px;
  height: 100%;
}

.div2 {
  flex: 1 1 70%;
  background-color: cadetblue;
  width: 100px;
  height: 100%;
}

위의 코드의 flex는 flex-grow, flex-shrink, flex-basis를 한 번에 축약해서 쓴 것이다. 

참고 : CSS Flex 

 

 

box-sizing

CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용된다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그린다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 한다. 이때 유용하게 쓰이는 설정값이 border-box이다.

* {
  box-sizing: border-box;
}

React에서 프로젝트를 하다보면 아래 그림처럼 div 요소가 부모 요소를 벗어 나는 상황이 종종 있는데 이럴 때 app.css에 상단에 위의 CSS를 코드를 넣어주면 이를 방지할 수 있다. 

https://developer.mozilla.org/ko/docs/Web/CSS/box-sizing

 

 

상대 길이 단위 

상대길이  단위는 다른요소와 관련이 있다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정할 수 있다. 

단위	관련사항
em	요소의 글꼴 크기 | 같은 엘리먼트에서 지전된 font-size를 기준으로 px로 바뀌어 화면에 표시된다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 된다.
rem	루트 요소의 글꼴 크기 | 최상위 엘리먼트에서 지정된 font-size를 기준으로 변환된다. 대게는 HTML tag에서 지정된 font-size가 기준이 된다. 만약 별도의 font-size를 설정하지 않은 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받는다.
vw	viewport 너비의 1%
vh	viewport 높이의 1%

 

 

 

참고 : 

CSS 레이아웃 정리 display, position 완성 

(Do it! HTML5+CSS3 웹표준의 정석, 이지스퍼블리징(주), 2017)을 학습하고 개인 학습용으로 정리한 내용입니다.

Do it! HTML5+CSS3 웹 표준의 정석 - YES24