[display] display의 종류
- display: block;
- 새로운 라인에서 시작
: display: block; 을 사용하면 해당 요소는 항상 새로운 라인에서 시작한다.
이는 다른 블록 레벨 요소들과 수직으로 정렬되어 있다는 것을 의미한다.
- 전체 가로 폭 차지
: 블록 레벨 요소는 가능한 모든 가로 폭을 차지합니다.
부모 요소의 가로 폭 전체를 차지하게 되며, 너비를 지정하지 않으면 화면 전체를 차지한다.
- 수직으로 쌓임
: 블록 레벨 요소는 수직으로 쌓이기 때문에, 다른 블록 레벨 요소와 수직으로 정렬된다.
- 레이아웃을 쉽게 구성
: section 나누기, layout 구성 등에서 주로 활용된다.
콘텐츠 영역, 패딩, 테두리, 여백 등으로 구성된다.
ex. `<div>` 요소는 기본적으로 `display: block;`이 적용된 상태이다.
.block-element {
display: block;
width: 200px;
/* 너비를 지정할 수 있지만, 지정하지 않으면 가로 폭 전체를 차지한다. */
height: 100px;
/* 높이를 지정할 수 있지만, 지정하지 않으면 콘텐츠에 맞게 늘어난다. */
margin-bottom: 20px /* 아래쪽 여백 지정함 */
}- display: inline;
: 해당 요소를 inline 요소로 만드는 역할을 한다. 이는 다른 요소와 나란히 나열되어 가로로 쭉 흐르는 특성을 가지게 된다.
- inline 요소
: 인라인 요소는 새로운 라인에서 시작하지 않고, 내용에 맞게 가로로 나열된다.
- 내용에 맞게 크기가 조절
: 인라인 요소는 내용에 맞게 크기가 조절된다.
지정한 너비와 높이는 무시되며, 콘텐츠의 크기에 따라 동적으로 조절된다.
- 수직 정렬이 쉽지 않음
: 수직으로 정렬하기 어렵다.
수직으로 정렬하려면 `vertical-align` 속성을 사용해야 한다.
- 주로 문장 내에서 작은 강조 text or link등을 만들 때 활용된다.
- display: inline-block;
: inline처럼 나란히 나열되면서 동시에 block처럼 너비와 높이를 설정할 수 있는 특성을 가진다.
- inline-block 요소
: 새로운 라인에서 시작하지 않고, 내용에 맞게 가로로 나열되면서 동시에 block 레벨 요소의 특성을 가진다.
- 너비와 높이 설정 가능
: 다른 인라인 요소들과는 달리, 크기를 직접 조절할 수 있다.
- 수직 정렬이 쉬움
- 주로 사용되는 곳
1. layout 구성 : button, box 등을 나란히 배치하고 각각의 크기를 조절할 때 유용하다.
2. link 목록 : navigation bar에서 link를 inline-block으로 스타일링하여 가로로 배치할 때 사용된다.
- display: flex;
: flex-container를 생성하는 CSS 속성 중 하나로,
요소들을 유연하게 배치하고 정렬할 수 있는 기능을 제공한다.
- layout 구성
: 요소들을 수평이나 수직으로 유연하게 배치할 수 있다.
flex-container 내에서 자식 요소들을 쉽게 정렬하고 간격을 조절할 수 있다.
- 반응형 디자인에 알맞는
: 동적인 크기 조절이 가능하고, 화면 크기에 따라 자동으로 조절되므로 반응형 디자인을 쉽게 구현할 수 있다.
- 수평, 수직 정렬:
: 수평 정렬과 수직 정렬이 간단해진다.
`justify-content`, `align-items`, `align-self` 등의 속성을 사용하여 요소들을 쉽게 배치할 수 있다.
- 요소들 간의 비율을 유연하게 조절할 수 있어, 동적인 디자인을 만들 수 있다.
(사진이 아주 이해 잘되게끔 되어있는걸 가져왔다.)
- display: grid;
: 그리드 레이아웃은 행(row)과 열(column)을 사용하여 요소들을 배치하는 방법을 제공한다.
- 행과 열
: 그리드는 행과 열로 이루어져 있다.
`grid-template-rows`와 ` grid-template-columns `속성을 사용하여 행과 열의 크기와 배치를 정의할 수 있다.
- 자식 요소들은 자동으로 그리드 셀에 배치된다.
특정 셀에 배치하고 싶다면 `grid-row`와 `grid-colum` 속성을 사용할 수 있다.
- 간격 설정
`grid-gap` 속성을 사용하여 행과 열 간의 간격을 설정할 수 있다.
- 반응형 디자인을 쉽게 구현할 수 있다.