[Basic] Frontend의 이해 - Modern CSS, CSS Frameworks

1. Modern CSS
- Styled Components와 CSS Modules이 가장 인기 있는 기술

• Styled Components 
  • JavaScript를 사용하여 CSS를 작성하는 방식
  • 컴포넌트 단위로 스타일을 정의하고, 해당 컴포넌트가 렌더링될 때 스타일 자동 적용
  • 범위 지정이 자동으로 되어 스타일 간의 충돌을 방지
  • 변수, 조건문, 반복문과 같은 동적 기능 활용 가능
• CSS Modules
  • CSS를 모듈화하여 컴포넌트에 바인딩하는 방식
  • 클래스 이름을 모듈화하여 컴포넌트와 관련된 스타일만 적용
  • 스타일을 캡슐화하여 모듈 간의 영향을 줄임
  • 클래스 이름은 로컬 범위에 한정되므로 스타일이 충돌하지 않고 컴포넌트 단위로 스타일링 가능
• Styled JSX
  • Next.js 프레임워크에서 사용되는 CSS-in-JS 방식
  • JavaScript 코드와 CSS를 동일한 파일에 작성 가능
  • JSX 구문 내에서 스타일 지정 가능
  • 범위 지정된 스타일을 사용하여 컴포넌트 간의 스타일 충돌을 방지
  • CSS의 변수, 조건문, 반복문과 같은 동적 기능 활용 가능
• Emotion
  • JavaScript를 사용하여 CSS를 작성하는 CSS-in-JS 라이브러리
  • CSS를 JavaScript 객체 형태로 작성하고, 컴포넌트에서 해당 객체를 사용하여 스타일 적용
  • 테마 지원, CSS 변수, 반응형 스타일 등 다양한 기능을 제공

2. CSS Frameworks

• 웹 개발에서 일반적으로 사용되는 CSS 스타일 및 컴포넌트를 미리 정의하여 개발자에게 제공하는 도구
• 다양한 컴포넌트, 스타일링 옵션, 테마, 유틸리티 함수 등을 제공
• Bootstrap, Foundation, Bulma, Tailwind CSS 등이 있음
• Bootstrap, Bulma는 프레임워크 컴포넌트가 포함되지 않은 CSS 중심의 프레임워크
• Tailwind는 프레임워크 기반의 Javascript 앱과 함께 사용하기에 좋음