요소의 기본값에 관계없이 다음을 설정하여 이 속성을 변경할 수 있습니다.

display: block
display: inline-block

이제 코드 펜에서 .box 규칙 세트를 변경하여 모든 상자가 나란히 표시되도록 하세요.

Flexbox 및 그리드

내부 디스플레이 유형의 경우 위치를 지정하는 방법에 대한 몇 가지 추가 옵션이 있습니다. 요소를 가변상자나 그리드로 변환할 수 있으며 이는 해당 요소의 하위 요소가 배치되는 방식에 영향을 미칩니다.

디스플레이: 플렉스

이러한 각 개념은 자체적으로 전체 게시물을 작성할 가치가 있지만 기본적으로 플렉스 박스는 상위 요소에 포함된 요소를 인라인으로 "유연하게" 배치합니다. Flexbox는 창을 기준으로 하기보다는 항목을 서로 기준으로 배치하고 포함 요소를 기준으로 배치하므로 다양한 화면 크기에 더 잘 적응합니다.

이 내용을 실제로 보려면 Codepen의 .frame 규칙 세트를 살펴보세요.

다음 코드 줄의 주석 처리를 제거합니다.

display: flex;

4개의 인라인 블록을 갖는 것과 매우 비슷해 보이죠? 기본적으로 플렉스 컨테이너는 해당 항목을 플렉스박스의 시작 부분이나 왼쪽에 정렬하지만 이것도 변경할 수 있습니다!

플렉스박스 선언 아래에 다음을 추가하세요:

justify-content: center;

이제 모든 상자가 화면 중앙에 나타나는 것을 볼 수 있습니다!

하지만 그들이 그렇게 꼭대기에 갇히는 것을 원하지 않는다면 어떻게 될까요? 다음도 추가해 보겠습니다.

align-items: center;

엄청난!

디스플레이: 그리드

참고: CodePen에서 계속 진행하기 전에 추가한 display: flex 및 justify-content 또는 align-items 속성이 포함된 줄을 주석 처리하거나 제거했는지 확인하세요.

플렉스박스 외에도 전체 요소를 그리드로 변환하여 항목을 배치할 수 있는 옵션도 있습니다!

여기서 이 코드에 대해 자세히 설명하지는 않지만 요소를 그리드로 선언하고 그리드 템플릿을 제공한 다음 그리드 내에 항목을 배치하면 가능하다는 점을 알아두세요!

.frame 규칙 세트에서 다음 줄의 주석 처리를 제거하세요!

display: grid;  
  grid-template: 1fr 1fr / 1fr 1fr;
  align-items: center;
  justify-items: center;

이제 프레임의 사분면 중앙에 각 상자가 배치되어 있는 것을 볼 수 있습니다!

새로 찾은 기술을 사용하세요!

지난 기사와 마찬가지로 여기에는 일련의 과제가 있습니다. 시도하기 전에 그리드 레이아웃을 생성하는 코드 줄을 삭제하거나 다시 주석 처리하는 것이 좋습니다!

도전 #1: 올바른 justify-content 속성을 찾기 위해 MDN을 검색하여 각 블록을 아래 그림과 같이 측면과 중앙에 건드리지 않고 수평면에 균등하게 표시하고 수직으로 표시합니다.

챌린지 #2: 아직 플렉스 컨테이너에서 모든 상자를 그룹화하여 오른쪽 하단에 배치할 수 있는지 확인하세요! (이를 위해 어떤 속성을 조정해야 합니까?)

도전 #3: 요소의 표시 순서를 바꾸는 플렉스 속성을 찾을 수 있나요?

챌린지를 완료한 것을 축하합니다! 더 많은 HTML과 CSS를 보려면 다음 주에 만나요!