YirStrap
웹을 심플하고 쉽게 만들수 있도록 도와주는 프레임워크입니다.
목표는 간단한 웹 페이지에서 자주 사용되는 기능을 쉽고 빠르게 구현하는 것입니다.
구조 및 설명
CSS에서의 요소 분류는 주로 기능성, 재사용성 및 복잡성에 따라 이루어집니다. 여기서 언급하신 '버튼', '검색창', '네비게이션 바'와 같은 요소들은 다음과 같이 분류될 수 있습니다:
버튼 (Button):
- 분류: 위젯(Widget) 또는 요소(Element).
- 설명: 버튼은 기본적인 사용자 인터페이스 요소로, 단일 기능(예: 클릭 이벤트)을 수행합니다. CSS에서 버튼은 보통 단순하고 재사용 가능한 스타일로 구성됩니다.
검색창 (Search Bar):
- 분류: 컴포넌트(Component).
- 설명: 검색창은 입력 필드와 검색 버튼을 포함할 수 있는 복합적인 UI 요소입니다. 이는 여러 요소들이 조합되어 구현되며, 일관된 스타일과 동작을 가진 독립적인 기능 단위로 간주됩니다.
최소 두개 이상의 widget을 포함하는 것을 컴포넌트라고 합니다.
네비게이션 바 (Navigation Bar):
- 분류: 레이아웃(Layout).
- 설명: header, footer, sidebar 등과 같은 레이아웃 요소는 페이지의 구조를 정의합니다. 이러한 요소들은 페이지의 다른 부분들을 구분하고, 콘텐츠를 그룹화하며, 사용자가 콘텐츠를 탐색할 수 있는 방법을 제공합니다.
페이지 (Home Page):
- 분류: 템플릿(Templates).
- 설명: 템플릿은 웹사이트나 애플리케이션의 각 페이지에 일관된 구조를 제공합니다. 이를 통해 개발자는 개별 페이지에 특정 콘텐츠와 기능을 추가할 수 있으며, 사용자는 예측 가능하고 일관된 인터페이스를 경험할 수 있습니다.
명명 규명
- 하이픈케이스 (kebab-case): 모든 문자를 소문자로 작성하고, 단어 사이에 하이픈을 사용합니다. 예:
search-bar
- 스네이크케이스 (snake_case): 모든 문자를 소문자로 작성하고, 단어 사이에 밑줄을 사용합니다. 예:
search_bar
- 카멜케이스 (camelCase): 첫 단어를 제외한 모든 단어의 첫 문자를 대문자로 작성하고, 단어 사이에 공백을 사용하지 않습니다. 예:
searchBar
- 파스칼케이스 (PascalCase): 모든 단어의 첫 문자를 대문자로 작성하고, 단어 사이에 공백을 사용하지 않습니다. 예:
SearchBar
YirStrap의 명명 규칙
- CSS 이름 : 하이픈케이스 (
search-bar
) - Javascript 변수 : camelCase (
searchBar
) - 추측하기 쉬운 이름을 사용합니다. 예를 들어,
search-bar
는 검색창을 의미합니다.