CSS 및 HTML에서 Flexbox (튜토리얼) - 반응형 레이아웃 개발

CSS와 HTML에서 Flexbox 강좌에서 당신을 기다리고 있습니다.

Flexbox 레이아웃이 무엇이며, 왜 사용해야 하는지 알아야 합니다?

여기에서 프로젝트가 설정되고, 그 후에 작업이 진행됩니다.

여기서는 VS-Code에 통합된 MS Edge 도구를 사용하여 샘플 구조와 디버그 기능을 소개합니다. 또한이 비디오에서는 처음으로 Flexbox 레이아웃을 활성화하고 방향을 설정합니다.

플렉스박스 레이아웃에서 공간을 균등하게 또는 특정 비율로 어떻게 나눌 수 있나요?

쉬운 수학을 피할 수 없는 작은 연습.

여기서 두 개의 사이드바를 포함한 가로 레이아웃을 소개하며, 너비에 responsiv하게 맞춥니다.

하위 요소는 플렉스 컨테이너를 따라 수평 축을 따라 정렬할 수 있습니다. 여기서 이를 설정하는 방법을 보여드리겠습니다.

컨테이너뿐만 아니라 모든 자식 요소의 정렬을 설정할 수 있습니다. align-self를 사용하여 개별 요소의 정렬을 다르게 조정할 수도 있습니다.

정육면체와의 개별 조정에 대한 작은 연습.

굽힌 축을 따라 뿐만 아니라 주 축을 따라서도 유연한 컨테이너를 정렬할 수 있습니다. ;-)

주축을 따라 정렬하는 방법을 자주 사용하는 레이아웃에 대한 작은 예시입니다.

유연하게 움직이고 싶다면 자식 요소의 크기를 구체적인 너비나 높이와 독립적으로 지정할 수 있어야 합니다. 다행히도 flex-basis-속성을 사용하여 이를 정확히 구현할 수 있습니다. flex-direction을 변경하면 너비가 높이가 되거나 그 반대로 변환됩니다. 

만약 flex-basis에 지정된 값보다 더 많은 공간이 있다면 요소가 얼마나 커져야 하는지를 결정할 수 있습니다. 이를 flex-grow로 조절할 수 있습니다.

만약 flex-basis로 지정된만큼 공간이 부족하다면 요소가 얼마나 줄어들어야 하는가? 이것은 flex-shrink로 조절할 수 있습니다. 

자식 요소는 공간이 부족할 때만이 아니라 컨테이너에 의해 줄어들 수도 있습니다. 이를 flex-wrap으로 어떻게 제어하는지 이 비디오에서 보여줍니다.

flex-direction과 flex-wrap은 flex-flow 속성에서 함께 지정할 수 있습니다. flex-direction만 설정하려 할 때도 flex-flow가 더 짧기 때문에 이것이 심지어 의미가 있습니다. ;-)

flex-wrap에 대한 작업.

가끔은 인간의 눈이 불편해지지 않도록 거리를 유지해야합니다. 다행히도 간격 이라는 CSS 속성이 있어 이를 유연한 컨테이너의 자식 요소에 대해 처리할 수 있습니다.

질서는 유지되어야 하며, 특히 웹 인터페이스에서는 효율적으로 작동해야 합니다. 때로는 DOM 요소를 이동시키지 않고도 순서를 개별적으로 지정해야 합니다. 이를 위해 order CSS 속성이 매우 유용하며, 해당 속성을 사용하여 요소의 표시 순서를 쉽게 변경할 수 있습니다.

시험해 봅시다. 순서에 대해 이해했는지. 여기에는 동일한 결과를 얻을 수있는 두 번째 방법이 제공됩니다. 그러나 당신도 분명히 알 것입니다.

많은 경우 요소와 텍스트를 수평 및 수직으로 가운데 정렬하려고 합니다. Flexbox 이전에는 고생이었지만, Flexbox를 사용하면 아주 간단해요.

누구나 알고 있는 3단 구조? 이것이 여전히 사용 가능한 공간에 맞게 조정되면 반응형 디자인에 많이 부족한 부분이 없습니다.

양식이 없는 웹 사이트가 있습니까? 그렇다면 거의 없습니다. 그래서 이를 매력적으로 배열하는 것이 매우 중요하며, 다행히도 플렉스박스로는 문제가 되지 않습니다.

매우 자주 중첩된 레이아웃을 다루게 되지만, 플렉스 레이아웃을 사용하면 그런 것들도 큰 도전이 아니게 됩니다.

한동안 해변에 모래처럼 수많은 웹 채팅 클라이언트들이 있었고, AI 챗봇들이 더 늘어났습니다. 그렇지만 Flexbox를 사용하여 채팅을 어떻게 만들 수 있을까요? 이 비디오에서 보여드리겠습니다.

웹 2.0 이후에는 거의 모든 웹 사이트에서 갤러리를 찾을 수 있습니다. 이 비디오에서는 플렉스박스를 사용하여 이러한 레이아웃을 아주 좋게 구현할 수 있는 방법에 대해 설명하고 있습니다.

이제 Flex 레이아웃에 대해 모든 것이 명확해야 합니다. 마지막으로 배워야 할 내용, 무엇을 더 할 수 있는지, 그리고 어떤 멋진 CSS 레이아웃 옵션이 더 있는지 설명하겠습니다.