css - display

display

display는 HTML요소들을 어떻게 보여줄지를 결정하는 속성으로, 꼭 알아야하는 속성 중 하나입니다.

display속성에는 none, block, inline, inline-block 그리고 grid, flex 등의 다양한 값들이 있습니다.

class 이름이 속성값-setting으로 되어있는 모든 요소들은 오른쪽 코드처럼 width와 height의 값을 각각 300px, 200px로 설정해주겠습니다.

 

코드를 실행하면 다음과 같습니다.

block

• 기본적으로 가로의 길이가 100%로 설정이되며, 한 줄의 하나만 div만 배치됩니다. block-setting이라고 적힌 div를 보면, 우리가 설정했던 길이와 높이의 값이 적용이 되어 표시되는 것을 알 수 있습니다.

 

inline

• inline값은 기본적으로 한줄에 여러개의 div가 배치되고, 길이와 높이의 값을 설정해놓더라도 inline div안의 내용에 따라 길이와 높이가 결정됩니다.

 

inline-block

• inline-block은 말 그대로, inline 특징과 block 특징 모두가 적용된 값으로, 기본적으로 한줄에 여러개의 div가 배치되며, div안의 내용에 따라 길이와 높이가 결정되지만, inline-block-setting에서 처럼 길이와 높이를 설정하면, 설정한 값으로 크기가 적용이 됩니다.

 

none

• display 속성값을 none으로 주게 되면, 그 요소가 존재하지 않았던 것처럼 사라지게 됩니다.

 

 

grid

gird는 말 그대로 격자를 뜻합니다.

grid값을 설정하게 되면, 해당 요소 바로 밑에 있는 모든 자식요소들은 grid-item이 됩니다.

아래는 grid-wrapper에 display에 gird값을 적용한 배치입니다. 

 

 

gird-template

grid의 행과열은 grid-template-rows, grid-template-columns 속성으로 조절할 수 있습니다.

grid-template-columns 속성은 그리드 컨테이너 내에서 열의 크기와 간격을 정의하는 속성입니다.

columns에 들어갈 아이템의 길이를 80px 씩 3개로 입력하게 되면, 1개의 행에 3개의 div가 80px의 크기로 생성됩니다.

 

 

이번에는 fr이라는 단위로 작성되어있는 것을 볼 수 있습니다.

fr단위는 사용가능한 공간을 일정 비율로 나타낸 단위로, 1개의 행의 길이가 2: 1 : 1의 비율인 요소3개가 들어가게 됩니다.

 

gird-template-row속성은 그리드 컨테이너 행의 크기를 정의하는 속성입니다.

 

 

이번에는 columsn와 rows를 모두 사용해보겠습니다.

이렇게 두속성을 동시에 적용하면 행의 높이는 각각 100px과 200px로 열의 가로길이는 1:1:1비율로 그리드를 생성하게 됩니다.

 

 

flex

display flex값을 적용한 박스 안의 요소들은, 일열로 배치됩니다.

이렇게 배치된 요소들은 어떤 방향으로든 배치될수있고, 커지거나 축소하여 크기 조정 및 정렬을 쉽게 조작할 수 있도록 유연해지게 됩니다. 

 

justify-content

기본적으로 justify-content flex-start값이 적용되며, 요소들을 flex박스의 왼쪽으로 정렬합니다. 

flex-end는 요소들을 flex박스의 우측(끝)으로 정렬하고, center는 요소들을 가운데로 정렬합니다.

 

 

아래에서 하늘색은 요소들을, 녹색은 간격의 길이를 나타냅니다.

space-around는 요수 주변의 (양옆)간격을 동일하게 두고 정렬됩니다.

space-between는 첫번째요소는 가장왼쪽, 마지막 요소는 가장오른쪽에 두고, 나머지 요소들은 사이의 간격을 동일하게 두고 정렬됩니다.

space-evenly는 요소 사이의 간격을 전부 동일하게 두고 정렬됩니다.

 

align-items

align-items속성은 justifiy-content 속성과는 다르게 새로를 기준으로 하위 요소들의 위치를 조절하는 속성입니다. 

start로 적용하면 박스의 시작부분, 즉 가장 윗부분에 정렬되고

center로 적용하면 박스의 중앙부분

end값을 적용하면 박스의 가장 아랫부분으로 정렬이 됩니다. 

마지막으로 stretch속성은 하위 요소들의 높이가 display flex 값이 적용된 박스의 높이와 동일하게 늘어나는 속성입니다.