CSS Flexbox를 사용하여 Red Onion's Daily Prophet 사본을 만들었습니다.

Red Onion’s Daily Prophet page을 본 적이 있다면 이것이 CSS 그리드를 사용하여 구축된 정말 멋지고 창의적인 레이아웃이라는 것을 알 것입니다. 웹에서 복제하기가 상당히 어려워 보이는 구식 인쇄 레이아웃과 비슷합니다. flexbox 레이아웃을 사용하는 방법을 배우고 싶다면 css 그리드 대신 flexbox를 사용하여 복제본을 만드는 것이 정말 좋은 도전이 될 것입니다. (선배님도 링크를 보내주셨을 때 그렇게 생각하셨나 봅니다.)

flexbox와 css 그리드가 나온 지 꽤 되었지만, 대부분의 시간을 기존 css 프레임워크에 의존했기 때문에 그렇게 많이 사용하지는 않았습니다(알고 있습니다).

그래서 보이는 것처럼 정말 복잡한지 알아보기 위해 이 연습을 하기로 결정했고 여기에 제가 배운 것이 있습니다.

상자에서 보기

페이지 레이아웃은 처음 볼 때 매우 복잡해 보이지만 각 섹션을 상자로 보기 시작하면 더 쉽다는 것을 알게 되었습니다. 이것은 페이지가 상자에서 보이는 모습입니다.

인라인 및 차단된 요소

일부 상자는 서로 인라인으로 표시되는 반면 다른 상자는 블록으로 표시됩니다. 기본적으로 유연한 부모 상자에 여러 자식이 있는 경우 해당 자식이 한 줄로 나란히 표시됩니다.



각 자식을 자체 블록에 표시하려면 flex-direction 속성을 열로 사용할 수 있습니다.

겹치는 요소 래핑

또한 고려해야 할 가장 중요한 사항 중 하나는 더 작은 장치(또는 페이지 응답성)에서 페이지가 어떻게 보이는지입니다. 기본적으로 flexbox를 사용할 때 항목은 새 줄로 래핑되지 않습니다. 따라서 화면이 작아지면 일부 콘텐츠가 보이지 않습니다. 새 뷰포트 크기에 맞추려면 flex-wrap 속성을 wrap으로 선언해야 합니다.

.parent {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;

    .child {}
}

요소 내부의 중심 맞추기

이전에는 요소 내부에 텍스트를 세로 및 가로 중앙에 배치해야 하는 경우 부모 및 자식 요소에 위치 지정을 사용했습니다.

그러나 flexbox를 사용하면 justify-content 및 align-items를 사용하여 정확한 동작을 수행할 수 있습니다.

<div class="exclusive-story__marker">exclusive</div>

.exclusive-story__marker {
    display: flex;
    align-items: center;
    justify-content: center;
}

추가 학습

원본 글꼴을 사용할 수 없는 경우 대체 글꼴 사용

원래 페이지는 스토리 헤드라인에 Headline One HPLHS를 사용하고 있지만 Google 글꼴에서 정확한 글꼴을 찾을 수 없어 신문 헤드라인에도 적합해 보이기 때문에 대신 serif를 사용하기로 결정했습니다. 같은 글꼴을 사용하면 좋겠지만 지금은 필요하지 않습니다. 내 목표는 페이지의 픽셀 완벽한 복제본을 만들지 않고 flexbox를 사용하는 방법을 배우는 것입니다.

작은 화면에서 콘텐츠가 겹치지 않도록 div에 높이를 사용하지 마세요.

상자 측면에서 페이지 섹션을 보는 것은 매우 유용한 접근 방식이지만 높이에 대해 생각하게 만들었습니다. 예, 높이. 출판명 섹션과 독점 스토리 섹션과 같이 높이가 매우 구체적인 것으로 보이는 상자에 높이를 지정하기 시작했습니다.

하지만 뷰포트의 크기를 줄이면 내부의 텍스트와 이미지가 플렉스 컨테이너와 겹치므로 높이 선언을 제거하기로 결정했습니다.

마지막으로...

object-fit:cover를 사용하여 이미지를 자르고 가운데 표시

첫 글자 의사 코드를 사용하여 신문에서 동작하는 것처럼 문단의 첫 글자를 나머지 문장보다 크게 만듭니다.

전반적으로 저는 이 운동을 하는 것을 정말 좋아했습니다. flexbox가 작동하는 방식에 대해 더 많이 이해하게 되었습니다. flex-basis, order, flex-shrink와 같이 아직 사용하지 않은 flex 속성이 많이 있지만 지금은 괜찮습니다. 계속해서 배울 수 있습니다.

읽어 주셔서 감사합니다. 복제된 페이지@CodePen를 확인할 수 있습니다.

의견/의견이 있으시면 알려주세요.

*예언자 일보의 저작권은 Red Onion에 있습니다.

추신 제 선배이자 멘토인 Dinesh Pandiyan의 격려 없이는 불가능할 것입니다. 감사합니다 포.