[ Next.js ] 2장 CSS 스타일링

About this offer

2장 CSS 스타일링 글로벌 스타일 웹사이트의 모든 페이지(모든 라우트)에 공통으로 적용되는 기본 디자인 규칙 ex) CSS 리셋 규칙 링크 같은 HTML 요소의 사이트 전체 스타일 등 애플리케이션 내 어떤 컴포넌트든 가져올 수 있으나 보통 최상위 컴포넌트에 추가하는 것이 좋음. /app/ui/global.css 파일에 작성, /app/layout.tsx 에 import 하여 불러오기 Tailwind CSS (유틸리티 우선 CSS) CSS 코드를 별도 파일에 작성하지 않고, 미리 정해진 유틸리티 클래스 이름일 HTML/JSX 요소에 직접 입력 → 스타일을 적용하는 프레임워크 스타일이 각 요소에 직접 적용 → 파일 용량 커짐 X, 클래스명 충돌 걱정 X CSS Modules (컴포넌트 전용 CSS) 기존 CSS 작성 방식을 그대로 유지 + 스타일 적용 범위를 해당 컴포넌트 내부로 한정(Local Scope) 시키는 방식 빌드 시 Next.js가 고유한 클래스 이름 자동으로 생성 → 다른 파일과의 이름 충돌 발생 X /app/ui/home.module.css 파일 생성 후 클래스 작성, .tsx 파일에서 import하여 사용 전통적인 CSS 규칙 작성 / 스타일을 JSX와 분리하는 것을 선호 → CSS 모듈 굿 CSS 비교 구분 일반 CSS CSS Modules Tailwind CSS 차이점 별도의 .css 파일에 클래스명과 스타일 규칙 직접 작성함 .module.css 형태로 파일 만들어 작성, 작성된 스타일을 특정 컴포넌트 파일에만 지역적으로 제한 시킴 유틸리티 우선 CSS 프레임워크 스타일이 기본적으로 전역 스코프 가짐 → 서로 다른 파일에서 같은 클래스명 쓸 경우 스타일 충돌 가능 빌드 시 고유한 클래스명이 자동 생성됨 → 컴포넌트 간 스타일 이름 충돌 위험 없애줌 HTML/JSX 마크업 안에서 미리 정의된 유틸리티 클래스를 조합 → 직접 스타일 적용함 ⇒ Tailwind CSS와 일반 CSS의 주요 차이 일반 CSS Tailwind CSS 작성 위치 CSS 파일과 JS/JSX 파일을 번갈아가며 작성 JSX 컴포넌트 파일 안에서 화면 구조와 스타일 동시에 작성 클래스명 이름 직접 지음 미리 완성된 유틸리티 이름 가져다 씀 효율성 + 관리 직접 작성한 코드 + 외부 CSS 라이브러리 전체 코드가 그대로 남아서 쓰지 않는 코드까지 파일 용량에 포함됨 ⇒ 내가 쓴 파일 통째로 감 프로젝트에서 사용한 클래스만 추출하여 빌드 → 최종 CSS 파일 용량이 최적화됨 ⇒ 실제 쓰는 것만 보내서 가벼움 clsx 라이브러리로 조건부 클래스 적용 clsx 라이브러리 상태나 조건에 따라 스타일을 동적으로 변경할 때 유용한 라이브러리 clsx('기본클래스', { '적용할클래스': 조건식 }) 형태의 객체 구조로 작성 ** clsx : 클래스 이름을 쉽게 토글할 수 있는 라이브러리 CSS 방식 비교 Global CSS 애플리케이션 전체에 일괄 스타일 적용 Tailwind CSS CSS 파일 이동 없이 빠른 개발 + 용량 최적화 CSS Modules 기존 CSS 문법 유지 + 컴포넌트 간 스타일 충돌 방지

Offer details

Provider

velog

Source

velog-rss

Score

54.36

Confidence

49%