이 페이지는 Pico CSS를 사용하여 작성되었습니다.
변수명 규칙을 지키지 않을경우 에러발생, 절대적으로 지켜야 할 규칙입니다.
| 규칙 | 설명 | 예시 |
|---|---|---|
| 한글 사용 금지 | 변수명에는 영문자, 숫자, 밑줄(_)만 사용 | name, user_name |
| 숫자로 시작 금지 | 변수명의 첫 글자는 영문자 또는 밑줄(_)이어야 함 | 1name (X), name1 (O) |
| 특수기호 사용 금지 | 언더스코어(_) 외의 특수문자 불가 | name$ (X), name_ (O) |
| 띄어쓰기 금지 | 변수명에는 공백 불가, 단어 구분은 _, 대문자 등 활용 | user name (X), userName (O) |
| 예약어 사용 금지 | 언어의 예약어(키워드)는 변수명으로 사용할 수 없음 | if, for 등 |
코딩 컨벤션은 코드의 일관성과 가독성을 높이기 위한 규칙입니다. 이를 통해 팀원 간의 협업이 원활해지고, 유지보수가 쉬워집니다.
| 표기법 | 사용처 | 작성예시 |
|---|---|---|
| 🐍 snake case | DB, 변수명, 함수명, 데이터 타입 등 | snake_case_naming_convention |
| 🐫 camel case | JAVA 변수명, 함수명 | camelCaseNamingConvention |
| 🎩 pascal case | C++, 클래스명 | PascalCaseNamingConvention |
| 🥙 kebab case | url, html, css | kebab-case-naming-convention |
| 📢scream snake case | 상수 | SCREAM_SNAKE_CASE_EXAMPLE |
CSS 클래스 네이밍은 BEM(Block Element Modifier) 방법론을 따릅니다. BEM은 코드의 가독성을 높이고, 재사용성을 향상시키는 데 도움을 줍니다.
BEM은 Block, Element, Modifier의 세 가지 구성 요소로 이루어져 있습니다. 각 구성 요소는 다음과 같은 표기법을 사용합니다:
각 구성 요소는 다음과 같이 정의됩니다:
| 구성 요소 | 정의 | 네이밍 예시 | 설명 |
|---|---|---|---|
| Block | 독립적으로 재사용 가능한 구성 요소 | menu, card, user-profile | 웹페이지의 의미 있는 한 영역이나 덩어리 (예: 네비게이션, 버튼, 카드 등) |
| Element | Block을 구성하는 하위 요소 | menu__item, card__title, user-profile__avatar | Block에서만 의미가 있으며, Block의 부품 역할 (예: 메뉴 항목, 카드 제목, 프로필 아바타 등) |
| Modifier | Block이나 Element의 상태, 종류, 버전 등을 표현 | menu__item--active, button--large, card__title--big | 특정 속성이 부여된 경우를 나타냄 (예: 활성화된 메뉴, 큰 버튼, 에러 상태 등) |
아래는 BEM 표기법을 적용한 CSS 클래스 네이밍 예시입니다:
| 구성 요소 | 표기법 | 예시 |
|---|---|---|
| Block | 단어를 소문자와 하이픈(-)으로 연결 | card, menu-list |
| Element | Block 이름 뒤에 __(언더스코어 2개) + Element 이름 | card__title, menu-list__item |
| Modifier | Block 또는 Element 뒤에 __(언더스코어 2개) 없이 --(하이픈 2개) + Modifier 이름 | card--active, menu-list__item--selected |
| 구성 요소 | 예시 (쉼표 구분) | 표기법이 아닌 단어 |
|---|---|---|
| Block | header, footer, navigation, sidebar, menu, card, button, modal, form, input, user-profile, banner, product-list, tab, dropdown, table, pagination, alert, tooltip, gallery | header, footer, navigation, sidebar, menu, card, button, modal, form, input, banner, tab, dropdown, table, pagination, alert, tooltip, gallery |
| Element | menu__item, card__title, card__image, user-profile__avatar, form__input, form__label, form__submit, sidebar__link, navigation__button, tab__content, dropdown__list, dropdown__item, header__logo, footer__nav, banner__image, product-list__item, modal__header, alert__message, tooltip__arrow, pagination__button | item, title, image, avatar, input, label, submit, link, button, content, list, logo, nav, header, message, arrow |
| Modifier | menu__item--active, button--primary, button--disabled, card--highlighted, card__image--large, form__input--error, form__input--success, tab__content--current, modal--open, sidebar--collapsed, header__logo--small, dropdown__item--selected, user-profile--admin, banner--hidden, pagination__button--disabled, alert--warning, tooltip--top, gallery__item--featured, product-list__item--soldout, navigation__button--current | active, primary, disabled, highlighted, large, error, success, current, open, collapsed, small, selected, admin, hidden, warning, top, featured, soldout |