🚀 개발환경 설정
VS Code 필수 확장
Emmet (기본 내장)
div.container>div+ Tab →<div class="container"><div></div></div>
<div class="container">
<div></div>
</div>div#header>p.title*3+ Tab → id, class, 반복 생성
> 표시는 내 바로밑의 자식요소라는 뜻
<div id="header">
<p class="title"></p>
<p class="title"></p>
<p class="title"></p>
</div>!+ Tab → HTML 기본 템플릿lorem+ Tab → 더미 텍스트
Prettier/Beautify
- 우클릭 → Format Document
- 코드 자동 정렬
추천 테마
- Atom One Dark
- Night Owl
- Color Hints
유용한 확장
- Auto Rename Tag
- Bracket Pair Colorizer
- Color Highlight
Emmet CSS 단축키
/* 입력 → 결과 */
m10 → margin: 10px;
mt20 → margin-top: 20px;
p15 → padding: 15px;
w100% → width: 100%;
h50vh → height: 50vh;
df → display: flex;
jcc → justify-content: center;
aic → align-items: center;💄 스타일링 방법
1. 인라인 스타일
const MyComponent = () => {
const styles = {
backgroundColor: '#f0f0f0',
padding: '20px',
borderRadius: '8px'
};
return <div style={styles}>컨텐츠</div>;
};2. CSS 모듈
/* Button.module.css */
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
}import styles from './Button.module.css';
const Button = () => (
<button className={styles.button}>버튼</button>
);3. Styled Components
import styled from 'styled-components';
const StyledButton = styled.button`
background-color: ${props => props.primary ? '#007bff' : '#6c757d'};
color: white;
padding: 10px 20px;
&:hover {
opacity: 0.8;
}
`;4. Tailwind CSS
const Card = () => (
<div className="bg-white rounded-lg shadow-md p-6 m-4">
<h2 className="text-xl font-bold text-gray-800 mb-4">제목</h2>
<p className="text-gray-600">내용</p>
</div>
);5. 조건부 스타일링
import classNames from 'classnames';
const Button = ({ primary, disabled }) => (
<button
className={classNames('btn', {
'btn-primary': primary,
'btn-disabled': disabled
})}
>
버튼
</button>
);📱 HTML Head 최적화
기본 메타 태그
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사이트 제목</title>
<!-- SEO -->
<meta name="description" content="사이트 설명">
<meta name="keywords" content="키워드1,키워드2,키워드3">
<!-- CSS 링크 -->
<link href="css/main.css" rel="stylesheet">
<!-- 파비콘 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>Open Graph (소셜 미디어)
<meta property="og:title" content="사이트 제목">
<meta property="og:description" content="사이트 설명">
<meta property="og:image" content="/thumbnail.jpg">
<meta property="og:url" content="https://example.com">파비콘 설정
<!-- 기본 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- 고해상도 -->
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<!-- iOS -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">🎨 CSS 고급 기법
CSS 변수 활용
:root {
--primary-color: #007bff;
--border-radius: 8px;
--spacing-unit: 1rem;
}
.card {
background: var(--primary-color);
border-radius: var(--border-radius);
padding: calc(var(--spacing-unit) * 2);
}애니메이션
.fade-in {
animation: fadeIn 0.3s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.hover-scale:hover {
transform: scale(1.05);
transition: transform 0.2s ease;
}⚡ 성능 최적화
CSS 파일 관리
// 컴포넌트별 분할
import './Header.css';
import './Button.css';
// 동적 임포트
const loadHeavyStyles = () => import('./heavy-styles.css');Critical CSS
// 중요한 스타일을 인라인으로
const criticalStyles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
};📝 프로젝트별 추천
| 프로젝트 규모 | 추천 방법 |
|---|---|
| 소규모 | CSS Modules + Sass |
| 중대규모 | Styled Components |
| 빠른 프로토타이핑 | Tailwind CSS |
| 팀 프로젝트 | CSS Modules + 디자인 시스템 |
💡 개발 팁
레이아웃 설계 순서
- 디자인에 박스 구조 그리기
- div와 class 구조 미리 설계
- Emmet으로 빠르게 마크업
- 스타일 적용
주의사항
- CSS-in-JS는 번들 크기 증가 가능
- 클래스명 충돌 방지 (BEM, CSS Modules)
- 인라인 스타일은 재사용성 낮음
- 성능을 위한 불필요한 리렌더링 방지
파일 경로 구분
css/main.css → 상대경로 (현재 폴더 기준)
/css/main.css → 절대경로 (사이트 루트 기준)
App, Web Developer