BEM 네이밍 방식
CSS 클래스명을 체계적으로 명명하는 방법론
BEM (Block Element Modifier) 구조
block__element--modifier
- 🏗️ 구조 파악: 클래스명만 봐도 HTML 구조를 한눈에 알 수 있어요
- 🛡️ 충돌 방지: 다른 개발자가 만든 스타일과 겹치지 않아요
- 👥 팀워크: 모든 개발자가 같은 규칙으로 코딩해요
실제 사용 예시
/* Block: header */
.header { }
/* Element: header 안의 menu */
.header__menu { }
/* Element: menu 안의 item */
.header__menu__item { }
/* Modifier: active 상태의 item */
.header__menu__item--active { }
/* 여러 클래스 동시 적용 */
.header__menu__item.active { }
언제 쓰나요?
- 큰 프로젝트에서 CSS 관리가 복잡할 때
- 여러 사람이 함께 작업할 때
- 재사용 가능한 컴포넌트를 만들 때
상단 고정 네비게이션
스크롤해도 항상 보이는 메뉴바 만들기
position: sticky; /* 또는 fixed */
두 방법의 차이점
| 속성 | 동작 방식 | 언제 사용? |
| sticky | 스크롤 시 특정 위치에서 고정 | 자연스러운 고정 효과 원할 때 |
| fixed | 화면에 항상 고정 (뷰포트 기준) | 항상 보여야 하는 중요한 메뉴 |
실제 사용 예시
/* sticky 사용 */
.header {
position: sticky;
top: 0;
z-index: 100;
}
/* fixed 사용 */
.floating-menu {
position: fixed;
top: 20px;
right: 20px;
}
언제 쓰나요?
- 사용자가 페이지를 스크롤해도 계속 접근해야 하는 메뉴
- 쇼핑몰의 장바구니 버튼, 블로그의 목차 등
반응형 폰트 크기
화면 크기나 사용자 설정에 따라 자동으로 조절되는 글자 크기
font-size: 1.8rem;
rem
- 📏 기준: 브라우저 기본 폰트 크기(보통 16px)를 1rem으로 계산
- 🧮 계산법: 1.8rem = 16px × 1.8 = 28.8px
- ♿ 접근성: 사용자가 브라우저에서 글자 크기를 키워도 비율에 맞게 따라 커져요
다른 단위와 비교
/* 절대 단위 - 고정된 크기 */
font-size: 18px;
/* 상대 단위 - 유연한 크기 */
font-size: 1.8rem; /* 브라우저 기본 크기 기준 */
font-size: 1.2em; /* 부모 요소 크기 기준 */
언제 쓰나요?
- 모바일, 태블릿, PC에서 모두 잘 보이는 웹사이트 만들 때
- 시각 장애인이 글자 크기를 키워도 레이아웃이 깨지지 않게 하고 싶을 때
모서리 둥글게 처리
개념: 네모난 요소의 모서리를 부드럽게 만드는 기법
border-radius: 4px;
- 😊 시각적 편안함: 날카로운 모서리보다 부드러운 느낌
- 🎨 모던한 디자인: 최신 웹 트렌드에 맞는 스타일
- 💝 사용자 경험: 더 친근하고 접근하기 쉬운 느낌
다양한 활용법
/* 기본 둥근 모서리 */
border-radius: 4px;
/* 완전한 원 만들기 */
border-radius: 50%;
/* 각 모서리별로 다르게 */
border-radius: 10px 20px 30px 40px;
/* 상단만 둥글게 */
border-radius: 10px 10px 0 0;
언제 쓰나요?
- 버튼, 카드, 이미지 등 거의 모든 요소에 적용
- 특히 클릭 가능한 요소들의 사용자 경험 향상