[Basic] Frontend의 이해 - CSS

 

1. CSS

• Cascading Style Sheets, 웹 페이지의 디자인과 레이아웃을 정의하기 위해 사용되는 스타일 시트 언어
• 요소들에 대한 스타일, 색상, 크기, 위치, 폰트, 배경 등 다양한 속성을 지정 가능
• 웹 페이지의 디자인과 콘텐츠를 분리하고, 여러 요소에 동일한 스타일을 적용할 수 있기 때문에 유지보수성과 재사용성을 향상시키는 데 도움을 줌
• HTML과 함께 사용하여 웹 페이지를 더욱 동적이고 매력적으로 만들 수 있음

2. CSS Architecture

• CSS 코드를 구조화하고 관리하기 위한 방법론이나 패턴
• 코드의 가독성, 재사용성, 유지보수성을 향상시키고 충돌을 방지하며 작업 효율성을 높이는 데 도움을 줌
• 프로젝트의 특성과 요구에 맞게 선택해서 사용해야 함 
  • OOCSS (Object-Oriented CSS): 스타일과 레이아웃을 분리하고 재사용 가능한 스타일 컴포넌트를 생성
  • BEM (Block Element Modifier): 구성 요소를 독립적인 블록(Block), 그 안의 요소(Element), 그리고 수정자(Modifier)로 나누어 정의하고 고유한 클래스 이름을 부여하여 스타일을 적용
  • SMACSS (Scalable and Modular Architecture for CSS): 기본적인 스타일 규칙을 정의하고 이를 상속하거나 재정의하여 다양한 모듈 구성
  • Atomic CSS: 작은 단위의 클래스를 사용하여 스타일을 정의하고 이를 조합하여 필요한 스타일을 구성

3. CSS Preprocessors

• CSS의 확장된 기능과 기능을 제공하는 도구
• Sass (Syntactically Awesome Style Sheets), Less, Stylus 등의 도구들은 개발자들이 CSS 작업을 보다 효율적이고 유지보수하기 쉽도록 도와줌
  • 변수 (Variables): 변수를 사용하여 색상, 폰트, 여백 등과 같은 스타일 속성의 값을 중복없이 정의
  • 중첩 규칙 (Nested Rules): 규칙을 중첩하여 코드 구조를 보다 직관적으로 작성
  • 믹스인 (Mixins): 믹스인은 재사용 가능한 스타일 패턴을 정의하고 필요한 곳에서 호출하여 사용할 수 있는 기능
  • 함수 (Functions): 함수를 사용하여 동적인 스타일을 생성
  • Import 기능: 여러 CSS 파일을 하나의 파일로 결합할 수 있는 Import 기능을 제공
  • 연산자 (Operators): 여백 값의 합, 폰트 크기의 연산 등을 수행

4. Post CSS

• CSS를 변환하고 확장하는 도구로 다양한 플러그인을 사용하여 CSS 코드에 대한 자동화된 작업을 수행
• 사용자는 필요한 작업에 특화된 플러그인을 선택하여 적용 가능
• 주요한 PostCSS 플러그인 : Autoprefixer, CSSnano, Lost, CSS Modules 등 
  • 프리픽스 (Prefixing): 벤더 프리픽스를 추가하여 브라우저 호환성 향상
  • 환경별 분기 (Environment-specific branching): 환경에 따라 다른 스타일을 적용할 수 있는 기능을 제공(개발 환경과 프로덕션 환경에서 다른 리소스 경로를 사용하는 등)
  • CSS 변수 대체 (CSS Variables Replacement): 변수를 사용하여 스타일 속성 값을 동적으로 변경 가능
  • 코드 최적화 (Code Optimization): 불필요한 공백, 주석, 중복된 스타일 등을 제거
  • 플러그인 확장성 (Plugin Extensibility): 다양한 플러그인을 사용하여 작업을 확장할 수 있는 유연한 아키텍처 제공