박스 쌓기(display)

웹 페이지는 기본적으로 박스(Box)의 연속으로 이루어져 있는데, 이 박스들이 화면에 어떻게 쌓이고 보일지를 결정하는게 바로 display 속성이다.

display가 뭐여?

HTML에 있는 요소들이 화면에 어떻게 놓일지를 결정하는 속성이라고 한다.
기본적으로 두 가지가 많이 나온다.

• block : 한 줄을 다 차지하는 애 (div, p 같은 거)
• inline : 글 흐름 안에 들어가는 애 (span, a 같은 거)

div {
  display: block;
}
span {
  display: inline;
}

block vs inline 차이

1. block 요소

   • 항상 줄 바꿈 된다.
   • width, height, margin, padding 이런 거 다 잘 먹음.

2. inline 요소

   • 글 안에 붙어서 나온다.
   • width/height 따로 못 준다 (내용 크기만큼만).
   • margin, padding은 좌우만 되고 위아래는 거의 안 먹는다.

inline-block도 있다

둘의 좋은 점만 섞은 거라고 보면 된다.

• 줄 바꿈 안 되면서도 width, height 줄 수 있음.
• 버튼 만들 때 많이 쓰는 것 같다.

button {
	display: inline-block;
    width: 100px;
    height: 50px;
}

flex랑 grid 매우 중요

요즘은 레이아웃을 만들 때 flex랑 grid를 많이 사용한다

1. flex
   • 가로 또는 세로 한 줄 정렬할 때 좋음

   .container {
   	display: flex;
   	justify-content: space-between;
   	align-items: center;
   }

2. grid
   • 행과 열 같이 2차원으로 레이아웃을 만들 때 좋음

   .container {
    	display: grid;
   	grid-template-columns: repeat(3, 1fr);
   	gap: 10px;
   }