🖋️ CSS 표준 준수 방법

CSS 표준 준수는 W3C(World Wide Web Consortium)와 같은 조직이 정의한 웹 표준을 따르는 것을 의미

이 표준은 웹 개발의 베스트 프랙티스를 정의하며, 웹 콘텐츠가 다양한 환경에서 일관되게 작동하도록 보장

---

• 크로스 브라우저 호환성

  • 크로스 브라우저 호환성은 웹사이트가 다양한 웹 브라우저(예: Chrome, Firefox, Safari, Edge 등)에서 일관된 방식으로 작동하도록 하는 것을 의미

• @ 달성 방법

  • CSS 리셋이나 정규화

    • 목적 : 브라우저 간 기본 스타일 차이 제거하거나 줄여서 일관된 레이아웃 제공

    • 방법 : CSS 리셋, 정규화

    • React 적용 : 최상위 CSS 파일에 리셋 or 정규화 CSS 포함

  • Flexbox 사용

    • Flexbox
      • 1차원 레이아웃을 위한 방법으로,
        주로 요소를 수평 또는 수직으로 정렬할 때 사용
      • 컨테이너에 display: flex; 를 적용하고, 자식 요소들의 정렬, 방향, 크기 조정 등을 관리
    • Grid
      • 2차원 레이아웃을 위한 방법으로, 복잡한 레이아웃을 구성할 때 유용
      • 컨테이너에 display: grid;를 적용하고, 행과 열을 정의하여 요소들을 배치

/* Flexbox 예시 */
.container {
display: flex;
justify-content: center; /* 가로 중앙 정렬 */
align-items: center; /* 세로 중앙 정렬 */
}
/* Grid 예시 */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3개의 열 */
grid-gap: 10px; /* 그리드 사이의 간격 */
}

• 브라우저별 특성 고려한 접두사 최소화

  • 특정 브라우저에서만 필요한 스타일 접두사를 줄여, 코드의 가독성과 유지 보수를 용이

  • 사용 방법

    • 자동화 도구 사용 : Autoprefixer 와 같은 도구를 사용하면, 필요한 브라우저 접두사를 자동으로 추가
    • PostCSS 설정 : 빌드 프로세스에 PostCSS 를 포함시키고, Autoprefixer 플러그인을 설정
    • Webpack 을 사용하는 경우 postcss-loader 와 autoprefixer 를 설치하고, Webpack 설정에 포함

// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('autoprefixer'),
                ],
              },
            },
          },
        ],
      },
    ],
  },
};