1. CSS Variables (CSS 변수)
- CSS 변수(Custom Properties)는 CSS 내에서 변수를 선언하고 사용할 수 있도록 해주는 기능입니다.
:root {
--primary-color: #3498db;
--font-size: 16px;
}
.button {
background-color: var(--primary-color);
font-size: var(--font-size);
}- --변수이름: 값; 형식으로 변수 선언
- var(--변수이름, fallback)을 사용해 호출
CSS 변수의 장점
- 전역 & 지역 선언 가능
- 유지보수 편리 (한 곳에서 값을 변경하면 전체 반영)
- 미디어쿼리, 다크모드 적용 용이
- JavaScript에서 동적 변경 가능
document.documentElement.style.setProperty('--primary-color', '#e74c3c');2. Vendor Prefixes (벤더 프리픽스)
- 브라우저마다 CSS 기능을 다르게 지원할 때 특정 접두사를 붙여 스타일을 적용하는 방식입니다.
| 브라우저 | 접두사 |
|---|---|
| Chrome, Edge, Safari | -webkit- |
| Firefox | -moz- |
| Internet Explorer | -ms- |
| Opera (옛날 버전) | -o- |
.button {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}- 최신 브라우저에서는 필요 없지만, 이전 버전 호환성을 위해 사용
Autoprefixer 사용
벤더 프리픽스를 자동으로 추가해주는 도구
- PostCSS 플러그인 사용
- npx autoprefixer로 자동 적용
- Autoprefixer CSS online
3. Support Queries (@supports)
- 특정 CSS 기능이 브라우저에서 지원되는지 확인하는 방법입니다.
@supports (display: grid) {
.container {
display: grid;
}
}//다중조건
@supports ((display: flex) or (display: grid)) {
.container {
display: flex;
}
}//JavaScript에서 지원 여부 확인
if (CSS.supports("display", "grid")) {
console.log("Grid 지원됨!");
}- @supports 내부의 조건이 true일 때만 적용
4.Polyfills (폴리필)
- 구형 브라우저에서 지원되지 않는 기능을 대체하는 스크립트
- JavaScript를 이용하여 최신 CSS 기능을 흉내냄
| 기능 | Polyfill 도구 |
|---|---|
| CSS Variables | css-vars-ponyfill |
| Flexbox | Flexibility |
| Grid | IE Grid Layout Polyfill |
5. 브라우저 간 스타일 불일치 해결 방법
Normalize.css vs Reset.css
| 스타일 시트 | 특징 |
|---|---|
| Reset.css | 모든 기본 스타일 제거 (완전히 초기화) |
| Normalize.css | 브라우저 간 기본 스타일을 "일관성 있게 유지" |
//Reset.css 사용 예제
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}//Normalize.css 사용 예제
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}- 브라우저 기본 스타일을 조정하여 더 자연스럽게 렌더링
6. 클래스 명명 규칙 (BEM 방식)
BEM (Block Element Modifier)란?
클래스 명명 규칙으로 유지보수성과 가독성을 높이는 방법
.block__element--modifier { }| 개념 | 설명 |
|---|---|
| Block | 독립적인 요소 (ex: button) |
| Element | 블록 내의 하위 요소 (ex: button__icon) |
| Modifier | 특정 상태 (ex: button--disabled) |
.card { }
.card__title { }
.card__button { }
.card__button--active { }- .card → 블록
- .card__button → 요소
- .card__button--active →
Vanilla CSS vs Component Frameworks vs Utility Frameworks
1) Vanilla CSS
순수 CSS 사용 (Bootstrap, Tailwind 등 없이 직접 스타일링)
- 장점: 가볍고, 완벽한 커스텀 가능
- 단점: 코드 관리 어려움, 유지보수 힘듦
2) Component Frameworks (컴포넌트 프레임워크)
미리 설계된 컴포넌트를 제공 (Bootstrap, Material UI 등)
- 장점: 빠른 개발, 반응형 지원
- 단점: 커스터마이징이 어려움
예제 (Bootstrap 사용)
3) Utility Frameworks (유틸리티 클래스 기반 프레임워크)
클래스를 조합하여 스타일 적용 (Tailwind CSS 등)
- 장점: 높은 확장성, 빠른 스타일링
- 단점: HTML이 복잡해질 수 있음
예제 (Tailwind CSS 사용)
