CSS의 Flexbox: 웹사이트 구조화를 위한 첫 단계

이 튜토리얼에서는 CSS와 HTML에서 Flexbox 레이아웃을 사용하여 웹 프로젝트의 샘플 구조를 구축하는 방법을 알아봅니다. Visual Studio Code에 내장된 디버깅 도구를 Microsoft Edge와 함께 살펴보고 Flexbox 레이아웃을 활성화하는 첫 번째 단계를 수행합니다. Flexbox는 적은 노력과 유연한 요소 배열로 복잡한 레이아웃을 만들 수 있는 강력한 레이아웃 시스템입니다.

주요 결과

• Flexbox를 사용하면 요소를 가로 및 세로로 정렬할 수 있습니다.
• Microsoft Edge 개발자 도구는 Visual Studio 코드에 직접 통합할 수 있습니다.
• 플렉스 방향은 플렉스 요소의 정렬에 영향을 줍니다.

단계별 지침

먼저 Visual Studio 코드에 Microsoft Edge 도구를 설치합니다. 확장 프로그램에서 "Microsoft Edge Tools for VS Code"를 검색하여 설치합니다.

확장 프로그램이 설치되면 디버깅 옵션으로 이동해야 합니다. "실행 및 디버그"를 클릭한 다음 "launch.json 파일 만들기"를 클릭합니다. 이렇게 하면 설정을 구성하는 데 도움이 됩니다.

이제 생성된 구성 파일에서 "Microsoft Edge 도구"에 대한 새 구성을 추가합니다. 터미널에서 이 포트에서 서버를 실행하고 있으므로 로컬 주소로 localhost:3000을 입력해야 합니다.

이제 프로젝트를 시작할 차례입니다. 올바른 하위 디렉터리로 변경하고 npm run dev 명령을 실행합니다. 그런 다음 브라우저에서 localhost:3000을 엽니다.

페이지가 로드되면 Visual Studio Code에서 해당 버튼을 클릭하여 Microsoft Edge 개발자 도구를 활성화할 수 있습니다. 그러면 편집기 바로 옆에 개발자 도구가 열립니다.

이제 애플리케이션의 구조를 볼 수 있습니다. "Flex Container" 클래스의 컨테이너(div)가 있습니다. 이 컨테이너 안에는 "Flex Child" 클래스를 가지며 각각 텍스트 콘텐츠 1, 2, 3, 4를 표시하는 4개의 DIV 요소가 있습니다.

플렉스 컨테이너는 현재 너비 400픽셀과 높이 200픽셀로만 정의되어 있고, 플렉스 자식은 너비 100픽셀과 높이 50픽셀로 정의되어 있습니다. 현재 Flexbox로 정렬된 자식은 없지만 세로 목록으로 표시됩니다.

Flexbox를 적극적으로 사용하려면 Flex 컨테이너에 CSS 속성 display: flex; 를 추가하고 저장해야 합니다. 이렇게 하면 하위 항목의 배열이 자동으로 변경되어 서로 나란히 표시되는 것을 볼 수 있습니다.

플렉스 자식들을 다시 세로로 정렬하려면 flex-direction 속성을 사용하면 됩니다. 플렉스 컨테이너의 플렉스 자식의 방향을 다시 세로로 변경하려면 플렉스 방향: 열; 을 설정합니다.

이제 플렉스 자식들이 다시 세로로 정렬된 것을 확인할 수 있습니다. 이제 높이와 너비를 조정하면 디스플레이가 블록이 아닌 플렉스로 설정되어 있어도 마치 블록에 통합된 것처럼 보입니다.

지금까지 Flexbox 레이아웃의 기본 사항에 대해 간략하게 설명했습니다. 비디오에서는 가장 중요한 속성에 대해 논의하고 그 효과를 살펴봤습니다. 앞으로의 튜토리얼에서는 Flexbox의 더 많은 기능을 살펴보고 이 강력한 레이아웃 시스템으로 무엇을 할 수 있는지 알아보겠습니다.

요약

이 튜토리얼에서는 CSS에서 Flexbox를 사용하여 간단한 구조를 만드는 방법을 배웠습니다. Microsoft Edge 개발자 도구를 Visual Studio Code에 통합하고 Flex 레이아웃을 활성화하는 첫 번째 단계를 수행했습니다. 아직 많은 가능성이 있으며, 다음 동영상에서 더 자세히 살펴보겠습니다.