CSS 명명 규칙 웹사이트 디자인 및 기본 프레임워크 구조

1. 웹사이트 디자인 및 기본 프레임워크 구조:

1. 컨테이너
"컨테이너"는 페이지의 모든 요소를 ​​하나로 묶는 부분이기도 합니다. 이름: "wrapper", "wrap", "page".
2. Header
"Header"는 일반적으로 웹사이트 페이지의 헤드 영역입니다. 이 부분의 이름은 "page-header"(또는 pageHeader)일 수도 있습니다.
3. Navbar
"navbar"는 가로 탐색 표시줄과 동일하며 가장 일반적인 웹페이지 요소입니다. 이 부분은 "nav", "navigation", "nav-wrapper"로 이름을 지정할 수도 있습니다.
4. 메뉴
"메뉴" 영역에는 "subNav"로 이름을 지정할 수도 있습니다. ", "links", "sidebar-main".
5. 메인
"메인"은 웹사이트의 메인 영역입니다. 블로그인 경우 로그가 포함됩니다. 이 섹션의 이름은 "content", "main-content"(또는 "mainContent")로 지정할 수도 있습니다.
6. 사이드바
"사이드바" 부분에는 최근 업데이트된 콘텐츠 목록, 웹사이트 소개 또는 광고 요소 등 웹사이트의 보조 콘텐츠가 포함될 수 있습니다. 이 부분에도 이름을 붙일 수 있습니다. : "subNav", "side-panel", "secondary-content".
7. 바닥글
"바닥글"에는 웹사이트에 대한 추가 정보가 포함되어 있으며 이 부분은 "저작권"으로 명명될 수도 있습니다.

2. 몇 가지 참고 사항:

1. 의미를 달성하기 위해 요소에 자체 기능 또는 "의도"의 이름을 지정하는 것을 고려해보세요.
빨간색/왼쪽/큰 등의 피상적인 이름을 사용하지 마세요.

2. 조합 명명 규칙:
[요소 유형]-[요소 기능/내용]
예: 검색 버튼: btn-search
로그인 양식: form-login
뉴스 목록: list-news

3. 대화형 동작과 관련된 요소 이름 지정:
대화형 동작과 관련된 요소는 일반적으로 일반, 마우스 오버, 클릭, 탐색 등 다양한 스타일을 갖습니다. 다음 규칙:
마우스 가리키기:: hover 클릭: 클릭 보기: 방문
예: 검색 버튼: btn-search, btn-search-hover, btn-search-visited

3. 일반적으로 사용되는 이름 요약:

헤더: header
로그인 바: loginbar
로고: 로고
사이드바: 사이드바
광고 스트립 :배너
탐색:nav
하위 탐색:subNav
메뉴:메뉴
하위 메뉴:subMenu
드롭다운 메뉴:dropMenu
도구 모음: 도구 모음
양식:양식
열:열
화살표:화살표
검색:검색
검색 버튼:btn-search
스크롤 막대:스크롤
내용:내용
탭:탭
기사 목록:목록
프롬프트 정보:msg
팁:팁
열 제목:제목
링크:링크
바닥글:바닥글
서비스:서비스
핫스팟:핫
뉴스: 뉴스
다운로드: 다운로드
등록: regsiter
상태: status
버튼: btn
투표: vote
파트너: 파트너
저작권: copyright
사이트맵: 사이트맵

기타 참조 명명 규칙
헤더: 헤더
로그인 바: loginbar
로고: 로고
사이드바: 사이드바
광고: 배너
Navigation: nav
Subnav: subnav
Menu: menu
Submenu: submenu
Search: search
Scroll: scroll
페이지 본문: main
Content: content
탭: 탭
글 목록: 목록
프롬프트 메시지: msg
팁: 팁
열 제목: 제목
참여: Joinus
가이드:길드
서비스: service
핫스팟: hot
뉴스: news
다운로드: 다운로드
등록: regsiter
상태: status
버튼: btn
투표: vote
파트너: 파트너
친숙한 링크: friendlink
Footer: footer
Copyright: copyright

CSS ID naming
Coat: Wrap
메인 네비게이션: mainnav
하위 네비게이션: subnav
Footer: footer
전체 페이지: content
Header: header
Footer: footer
상표: label
Title: title
메인 네비게이션: mainbav(globalnav)
Top 네비게이션: topnav
사이드 네비게이션: 사이드바
왼쪽 네비게이션: 왼쪽 사이드바
오른쪽 네비게이션: 오른쪽 사이드바
플래그: 로고
슬로건: 배너
메뉴 콘텐츠 1: 메뉴1콘텐츠
메뉴 용량: menucontainer
하위 메뉴: 하위 메뉴
사이드 탐색 아이콘: sidebarIcon
참고: 참고
탐색경로: 탐색경로(즉, 페이지 탐색 팁의 위치)
컨테이너: 컨테이너
콘텐츠 :  내용
검색:  검색
로그인:  로그인
리본:  쇼핑(장바구니, 결제 등)
현재

스타일 시트 편집 시 사용할 수 있는 주석은 다음과 같이 작성할 수 있습니다.

콘텐츠 영역

스타일 파일 명명
기본 master.css
레이아웃, 레이아웃.css
열 columns.css
텍스트 글꼴.css
인쇄 스타일 print.css
테마 테마. css

예:
은 같은 회사에서 개발되었으며 CSS 명명 키워드는 구체적으로 다음과 같이 설정됩니다.

컨테이너: 컨테이너/박스
헤더: 헤더
메인 탐색: mainNav
하위 탐색: subNav
상단 탐색: topNav
웹사이트 로고: 로고
큰 광고: 배너
페이지 중간: mainBody
하단: 바닥글
메뉴: 메뉴
메뉴 콘텐츠: menuContent
하위 메뉴: subMenu
하위 메뉴 콘텐츠: subMenuContent
검색: search
검색 키워드: 키워드
검색 범위: range
태그 텍스트: tagTitle
태그 콘텐츠: tagContent
현재 태그: tagCurrent/currentTag
제목: title
콘텐츠: 콘텐츠
목록: 목록
현재 위치: currentPath
사이드바: 사이드바
아이콘: icon
참고: note
로그인: 로그인
등록: 등록
열 정의: columns_1of3(세 열 중 첫 번째)
column_2of3(세 열 중 두 번째) 열)
column_3of3(3개 중 세 번째 열)