[css] text balance, dark mode, width auto vs 100%

학습자료 : https://youtu.be/-st14lUQD3U?si=AoxGLb4rrr2S_PlU

1. text-wrap

정의

• 텍스트 줄 바꿈 속성.
• 제목 균형 조정에 사용.

문제점

• 다양한 화면 크기에서 제목 줄 바꿈 시 단어 분리 현상 발생.

해결책 text-wrap: balance 속성 사용.

• 브라우저가 제목 줄 바꿈 자동 조정.

특징

• 한 줄 제목은 유지.
• 여러 줄 제목은 단어 수 균등 분배.
• H1 태그, 큰 텍스트 제목 등에 적용 권장.

2. Dark Mode

구현 방법

• CSS 사용자 정의 속성 활용, 시스템 설정 기반 다크 모드 구현.

장점

• CSS 사용자 정의 속성: 다크 모드 설정에 유용.
• 브라우저 호환성: IE 지원 불필요.
• 유지 보수성: 색 구성표 전환 용이.
• prefers-color-scheme 미디어 쿼리: 다크 모드 설정에 사용.
• Windows 설정에서 앱 모드 변경으로 테스트 가능.

코드 예시

:root {
  --clr-light: #fdffc4;
  --clr-dark: #00332a;
  --clr-primary: #dbffa2;
  --clr-secondary: #fc3fcf2;
  --clr-accent: #ff7750;
  --foreground: var(--clr-drak);
  --background: var(--clr-light);
  --ff-title: "Playfair Display", serif;
  --ff-body: "Assistant", sans-sefif;
}

body {
  margin: 0;
  background: var(--background);
  colr: var(--foreground);
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  :root {
    --clr-primary: #202302;
    --clr-secondary: #00100d;
    --clr-accent: #ff7750;
    --foreground: var(--clr-light);
    --background: var(--clr-drak);
  }
}

Tailwind 응용

• 위 CSS를 app에 import 후 tailwind.config.js에 적용.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // 'media' 또는 'class'
  theme: {
    extend: {
      colors: {
        'light': 'var(--clr-light)',
        'dark': 'var(--clr-dark)',
        'primary': 'var(--clr-primary)',
        'secondary': 'var(--clr-secondary)',
        'accent': 'var(--clr-accent)',
        'foreground': 'var(--foreground)',
        'background': 'var(--background)',
      },
      fontFamily: {
        'title': 'var(--ff-title)',
        'body': 'var(--ff-body)',
      },
    },
  },
  plugins: [],
};

3. CSS width: auto vs 100%

width: auto

• 요소 크기: 부모 컨테이너 사용 가능 공간에 따라 조정.
• 마진 처리: 마진 불포함.
• 오버플로: 남은 공간 활용, 방지.

width: 100%

• 요소 크기: 부모 컨테이너 너비의 100%.
• 마진 처리: 마진, 패딩 포함.
• 오버플로: 요소 총 너비 > 뷰포트, 가로 스크롤 발생 가능.