Flexbox III: Flex Direction을 활용,

flex-direction

 

flex-direction속성으로 Flex Container의 동작 방식을 바꿀 수 있습니다.

Flex Container요소는 기본적으로 메인축 (Main Axis)과 교차축 (Cross Axis)로 이루어져 있습니다.

위와 같은 값을 이용하여 이 메인축과 교차축의 작동 방식을 바꿉니다.
flex-direction: row: 왼쪽에서 오른쪽으로의 방향성을 가지고 있습니다. Flex Items요소들이 가로로 배치 됩니다. (direction속성에 영향)
flex-direction: row-reverse: row값의 반대, 일반적으로 오른쪽에서 왼쪽의 흐름으로 배치됩니다.

flex-direction: column: 메인축 방향이 위에서 아래로 바뀌게 됩니다. 이에 맞춰 교차축 방향도 바뀌게 됩니다. Flex Items요소가 세로로 배치 됩니다.
flex-direction: column-reverse: column값의 반대, 일반적으로 아래에서 위 흐름으로 배치됩니다.

flex-direction 상태가 변하게 된다면 Flex Items요소에게 지정 될 수 있는 속성의 기준 또한 모두 변하게 됩니다.

 

flex-direction: column으로 지정 되었다면?

• flex-basis, flex-grow, flex-shrink속성은 요소의 높이가 결정 되는 방식에 영향을 끼칩니다.
• 메인 축과 교차 축이 서로 교체 되면서 justify-content, align-items 또한 영향을 받게 됩니다.

 

---

CSS 커스텀 프로퍼티

 

다른이름: CSS Variables, CSS 변수

CSS 커스텀 프로퍼티는 CSS에서 변수를 사용할 수 있게 해주는 기능입니다. 커스텀 프로퍼티는 CSS 변수라고도 불리며, 특정 스타일 값을 재사용 가능하게 하고, 코드의 유지 보수를 쉽게 만들어 줍니다.

1. 특성

• 마크업 구성을 기준으로 한 변수의 유효 범위를 지님
• 재사용성: 동일한 값을 여러 곳에서 사용 가능.
• 유지 보수: 값 변경 시 모든 관련 요소에서 동시에 반영 가능.

2. 기본 문법

2.1 변수 정의

 

  :root {
    --main-bg-color: #3498db;
    --main-text-color: #ffffff;
    --padding-size: 10px;
  }

• 변수명은 반드시 --로 시작해야 합니다.
• 변수명은 대소문자를 구분합니다.
• :root 가상 클래스는 문서의 최상위 요소인 html요소를 의미하며, 전역 변수로서 활용 할 수 있습니다.

2.2 변수 사용

body {
  background-color: var(--main-bg-color);
  color: var(--main-text-color);
  padding: var(--padding-size);
}

2.3 변수의 대체값(fallback) 지정

.box {
  padding: var(--padding-size, 15px);
}

• --padding-size변수가 정의되지 않은 경우 대체값인 15px이 반영됩니다. 초기값 개념으로도 볼 수 있습니다.

3. 변수의 유효 범위 (scope)

CSS 커스텀 프로퍼티는 HTML 마크업 구성을 기준으로 변수의 유효 범위가 결정됩니다.
즉, :root와 같은 전역적인 수준에서 정의될 수도 있고, 특정 요소 내에서만 유효한 로컬 변수로 정의될 수도 있습니다.

3.1 전역 변수 (Global Variables)

전역 변수는 :root 가상 클래스 내에서 정의되며, 문서 전체에서 접근 가능합니다.

:root {
  --main-bg-color: #3498db;
  --main-text-color: #ffffff;
}

3.2 로컬 변수 (Local Variables)

로컬 변수는 특정 요소 내에서만 정의되며, 해당 요소와 그 하위 요소들에서만 접근 가능합니다.

<div class="container">
  <div class="box">BOX</div>
</div>
<div class="outside">
  OUTSIDE
</div>

.container {
  --padding-size: 20px; /* .container나 .container 하위 요소내에서만 사용할 수 있는 로컬 변수 */
}
.box {
  padding: var(--padding-size);
}
.outside {
  padding: var(--padding-size); /* 유효하지 않음 */
}

• 로컬 변수: .container 요소와 그 하위 요소에서만 var(--padding-size)를 사용할 수 있습니다.

만약 로컬 변수와 전역 변수가 동일한 이름을 가질 경우, 로컬 변수가 우선 적용됩니다.

로컬 변수를 사용해 각 컴포넌트별로 독립적인 스타일을 정의하면, 코드의 가독성이 높아지고 유지보수가 쉬워집니다.