속성 기반 원자적 플렉스 레이아웃 | CSS 튜토리얼

소개

이 프로젝트에서는 CSS 를 사용하여 속성 기반의 원자적 플렉스 레이아웃을 구현하는 방법을 배우게 됩니다. 원자적 CSS (Atomic CSS) 는 속성 기반 스타일을 사용하여 CSS 작성을 단순화하는 인기 있는 CSS 구성 방법입니다.

이 프로젝트에서는 다음을 배우게 됩니다:

이 프로젝트를 완료하면 다음을 수행할 수 있습니다:

원자적 CSS (Atomic CSS) 는 최근 매우 인기 있는 CSS 구성 방법이며, 속성 기반 (Attributify) 원자적 CSS 는 CSS 작성을 더욱 단순화합니다.

예를 들어, 전통적으로 우리는 요소에 클래스 식별자를 생성하고 CSS 에서 선택자를 통해 해당 요소를 선택하여 flex를 구현합니다.

<style>
  .box {
    display: flex;
  }
</style>
<div class="box"></div>

속성 기반 원자적 CSS 를 사용하면 다음과 같은 방식으로 동일한 작업을 수행할 수 있습니다.

<div flex></div>

시작하려면 실험 환경을 열고, 디렉토리 구조는 다음과 같습니다.

├── css
│   └── style.css
└── index.html

여기서:

오른쪽 하단의 "Go Live"를 클릭하여 포트 8080 을 열어 브라우저에서 index.html 페이지를 미리 볼 수 있으며, 효과는 다음과 같습니다.

이 단계에서는 CSS 를 사용하여 속성 기반 원자적 플렉스 레이아웃을 구현하는 방법을 배우게 됩니다.

[flex="~ col"] {
  display: flex;
  flex-direction: column;
}

이 규칙은 flex="~ col" 속성을 가진 div 요소를 대상으로 하고 수직 플렉스 레이아웃을 생성하는 데 필요한 스타일을 적용합니다.

display: flex 속성은 요소를 플렉스 레이아웃을 사용하도록 설정하고, flex-direction: column 속성은 플렉스 방향을 수직으로 설정합니다.

축하합니다! 이 프로젝트를 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.