6.Global Style & Theme

Reset CSS

CSS 재설정 또는 CSS 정규화라고도 하는 CSS 재설정은 여러 웹 브라우저에서 HTML 요소의 스타일을 지정하기 위한 일관된 기준을 제공하는 것을 목표로 하는 CSS 규칙 또는 스타일시트 집합이다. 브라우저에서 적용되는 기본 스타일의 불일치 및 차이를 제거하여 웹 디자인을 구축할 때 보다 일관된 시작점을 보장하는 데 도움이 된다.

1. 목적(Purpose): CSS 재설정의 주요 목적은 브라우저에서 HTML 요소에 적용한 기본 스타일을 재설정하거나 무력화하는 것이다. 웹 브라우저마다 글꼴 크기, 여백, 패딩, 줄 높이 및 기타 시각적 속성이 다를 수 있는 고유한 기본 스타일이 있다. CSS 재설정을 사용하면 깨끗한 슬레이트에서 시작하여 HTML 요소의 모양에 예기치 않은 불일치를 피하고 공평한 경쟁의 장을 만들 수 있다.

2. 재설정 대 정규화(Resets vs. Normalizes): CSS를 재설정하는 방법에는 재설정과 정규화라는 두 가지 주요 접근 방식이 있다.

• 재설정(Resets): CSS 재설정은 HTML 요소에서 모든 기본 스타일을 제거하여 공통 기본 스타일로 설정하는 것을 목표로 한다. 이 접근 방식은 빈 캔버스에서 시작하며 개발자가 각 요소의 모든 스타일을 명시적으로 정의해야 한다. 모양을 완벽하게 제어할 수 있지만 요소의 스타일을 처음부터 다시 지정하려면 더 많은 작업이 필요할 수 있다.

• 정규화(Normalizes): CSS 정규화는 브라우저의 불일치를 해결하면서 유용한 기본 스타일을 보존하는 것을 목표로 한다. 기본 스타일을 완전히 제거하는 대신 여러 브라우저에서 일관성을 유지하도록 조정한다. 정규화를 사용하면 일부 요소에 대한 명시적인 스타일 지정의 필요성을 줄여주어 보다 확실한 시작점을 제공할 수 있다.

1. 일반적인 재설정 기법(Common Reset Techniques)

• 여백과 패딩을 0으로 설정한다: 이렇게 하면 브라우저에서 적용되는 기본 여백이나 패딩을 제거하여 요소 간의 간격을 일관되게 유지할 수 있다.

• 글꼴 스타일 재설정: 크기, 굵기, 줄 높이와 같은 글꼴 속성을 일관되게 설정하여 여러 브라우저에서 일관된 타이포그래피를 보장한다.

• 상자 크기 정규화: 지정된 너비와 높이 내에서 패딩과 테두리를 포함하는 상자 크기: 테두리 상자; 속성을 적용하여 일관된 상자 모델을 보장한다.

• 목록 스타일 재설정: 정렬되지 않은 목록의 글머리 기호 및 정렬된 목록의 번호 매기기와 같은 기본 목록 스타일을 제거하여 일관된 모양을 만듭니다.

• 텍스트 장식 제거하기: 링크 및 기타 요소에서 밑줄 및 기타 텍스트 장식을 제거하여 개발자가 스타일을 처음부터 다시 지정할 수 있다.

1. 사용자 지정 및 사용(Customization and Usage) 프로젝트의 특정 요구 사항에 따라 CSS 재설정을 사용자 지정할 수 있다. 개발자는 요구 사항에 따라 특정 스타일을 추가하거나 제거할 수 있다. 일반적으로 개발자는 재설정 또는 정규화 스타일시트를 프로젝트의 첫 번째 CSS 파일로 포함시켜 다른 스타일시트보다 우선적으로 적용되도록 하는 것이 일반적이다. Normalize.css 및 Meyer's CSS Reset과 같이 널리 사용되는 CSS 재설정 라이브러리 또는 프레임워크는 웹 프로젝트에 쉽게 포함할 수 있는 미리 빌드된 재설정 또는 정규화 스타일시트를 제공한다. 이러한 라이브러리는 충분한 테스트를 거쳤으며 브라우저 간 일관성을 위한 탄탄한 기반을 제공한다.

2. 고려 사항(Considerations)

• 구체성 증가(Increased specificity): CSS 재설정은 브라우저에서 설정한 기본 스타일을 재정의하기 위해 보다 구체적인 선택기를 필요로 하는 경우가 많다. 개발자는 사용자 정의 스타일을 적용할 때 선택기의 특이성을 염두에 두어야 한다.

• 성능에 미치는 영향(Performance impact): HTML 요소의 모든 기본 스타일을 재설정하면 파일 크기가 증가하고 스타일 처리가 추가될 수 있다. 일관성의 이점과 성능에 미치는 영향의 균형을 맞추고 프로젝트의 특정 요구 사항을 고려하는 것이 중요한다.

box-sizing 속성

box-sizing은 CSS 속성 중 하나로, 요소의 크기 계산 방식을 지정하는 데 사용된다. 이 속성은 주로 박스 모델에 적용되며, 박스의 전체 크기 계산에 padding과 border를 포함할지 여부를 결정한다.

box-sizing 속성은 다음 두 가지 값 중 하나를 가질 수 있다:

1. content-box (기본값): 이 값은 요소의 크기 계산에 padding과 border를 포함하지 않다. 즉, 요소의 크기는 content 영역만을 기준으로 계산된다. padding과 border는 요소의 크기에 추가적으로 더해지지 않으며, 박스의 크기는 content 영역의 크기와 동일하다.

.box {
  box-sizing: content-box;
}

1. border-box: 이 값은 요소의 크기 계산에 padding과 border를 포함한다. 즉, 요소의 크기는 content 영역에 padding과 border를 더한 전체 박스의 크기로 계산된다. padding과 border는 요소의 크기에 이미 포함되므로, content 영역의 크기는 요소의 크기와 동일하다.

.box {
  box-sizing: border-box;
}

기본적으로 대부분의 요소는 box-sizing가 content-box로 설정되어 있지만 CSS를 사용하여 전역적으로 또는 특정 요소에 대해 변경할 수 있다. 예를 들어 범용 선택기 *를 사용하여 모든 요소에 box-sizing: border-box를 설정할 수 있다

* {
  box-sizing: border-box;
}

word-break 속성

word-break 속성은 CSS에서 사용되는 속성 중 하나로, 텍스트 줄 내에서 단어의 줄 바꿈을 어떻게 처리할지를 지정한다. 이 속성을 사용하여 긴 단어가 텍스트 영역을 벗어나지 않도록 제어하거나, 다국어 텍스트의 줄 바꿈을 적절하게 처리할 수 있다.

word-break 속성은 다음과 같은 값들을 가질 수 있다

1. normal (기본값): 이 값은 단어의 줄 바꿈을 기본적인 동작에 따라 처리한다. 긴 단어는 필요한 경우 텍스트 영역을 벗어나거나 줄을 나누어 표시될 수 있다.

.text {
  word-break: normal;
}

1. break-all: 이 값은 단어를 줄 바꿈의 대상으로 간주하며, 필요한 경우 단어 내에서 줄 바꿈을 수행한다. 따라서 긴 단어가 텍스트 영역을 벗어나지 않도록 한다.

.text {
  word-break: break-all;
}

1. keep-all: 이 값은 언어의 의미 단위를 기준으로 줄 바꿈을 수행한다. 한글, 중국어, 일본어 등에서는 단어 사이에서 줄 바꿈을 하지 않고 단어 전체를 유지한다. 이 값은 다국어 텍스트에서 자연스러운 줄 바꿈을 위해 사용될 수 있다.

.text {
  word-break: keep-all;
}

1. break-word: 이 값은 break-all과 유사하게 동작하지만, 긴 단어를 줄 바꿈할 때 단어 내의 하이픈(-)을 사용하여 단어를 분할한다. 이를 통해 단어의 의미가 유지되면서도 필요한 경우 단어를 텍스트 영역에 맞춰 줄 바꿈할 수 있다.

.text {
  word-break: break-word;
}

Theme

스타일 컴포넌트에서 "테마"는 웹 애플리케이션의 디자인 시스템과 시각적 스타일을 정의하는 변수 및 값의 집합을 의미한다. 테마는 재사용 가능한 스타일, 색상, 타이포그래피 및 기타 디자인 관련 속성을 중앙에서 관리할 수 있는 방법을 제공한다.

스타일 컴포넌트의 테마는 일반적으로 키-값 쌍을 포함하는 객체로 정의된다. 각 키는 특정 스타일 속성을 나타내며, 해당 값은 해당 속성의 값을 나타냅니다.

const theme = {
  colors: {
    primary: "#FF0000",
    secondary: "#00FF00",
    background: "#FFFFFF",
  },
  typography: {
    fontFamily: "Arial, sans-serif",
    fontSize: "16px",
    fontWeight: "normal",
  },
};

위의 예에서 테마 객체에는 색상과 타이포그래피라는 두 가지 주요 섹션이 포함되어 있다. 색상 섹션은 기본, 보조 및 배경 색상을 정의하고 타이포그래피 섹션은 fontFamily, fontSize 및 fontWeight와 같은 글꼴 관련 속성을 정의한다.

스타일 컴포넌트에서 테마를 사용할 수 있도록 하려면 스타일 컴포넌트에서 제공하는 ThemeProvider 컴포넌트를 통해 전달할 수 있다. 이 컴포넌트는 전체 애플리케이션 또는 애플리케이션 트리의 특정 부분을 래핑하여 해당 트리 내의 모든 스타일 컴포넌트가 테마에 액세스할 수 있도록 한다.

ThemeProvider

import React from "react";
import styled, { ThemeProvider } from "styled-components";

const Button = styled.button`
  background-color: ${props => props.theme.colors.primary};
  color: ${props => props.theme.colors.background};
  font-family: ${props => props.theme.typography.fontFamily};
  font-size: ${props => props.theme.typography.fontSize};
  font-weight: ${props => props.theme.typography.fontWeight};
`;

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button>Hello, styled-components!</Button>
    </ThemeProvider>
  );
};

export default App;

이 예제에서 버튼 컴포넌트는 테마의 색상 및 타이포그래피 속성을 사용하여 스타일이 지정되었다. 값은 스타일이 지정된 컴포넌트의 템플릿 리터럴 구문 내에서 props.theme 구문을 사용하여 액세스한다.

스타일 컴포넌트에서 테마를 활용하면 애플리케이션에 일관되고 재사용 가능한 디자인 시스템을 만들 수 있다. 테마를 사용하면 테마에 대한 변경 사항이 해당 테마 속성을 사용하는 모든 스타일 컴포넌트에 자동으로 전파되므로 스타일을 쉽게 사용자 정의하고 유지 관리할 수 있다.

전반적으로 스타일 컴포넌트의 테마는 애플리케이션 전체에 일관된 스타일을 관리하고 적용할 수 있는 강력한 방법을 제공하여 디자인 시스템의 유지 관리 및 재사용 가능성을 높여줍니다.