CSS 네이밍은 영어 소문자 또는 조합으로 이름을 짓고, 단어는 "-"로 연결됩니다. 일반적으로 사용되는 CSS 네이밍 사양으로는 텍스트 네이밍 사양, 페이지 구조 네이밍 사양, 네비게이션 네이밍, 기능 네이밍 등이 있습니다.
CSS 네이밍은 일반적으로 영어 단어 소문자나 이름의 조합을 사용하며, 단어는 "-"로 구분하며, 영어 단어는 한눈에 알아볼 수 있는 간단한 단어가 아닌 이상 축약하지 않습니다. 다음으로 CSS에서 일반적으로 사용되는 명명 규칙을 공유하겠습니다.
[추천 과정: CSS 튜토리얼]
텍스트 명명 Convention
index .css: 일반적으로 홈페이지에서 스타일을 만드는 데 사용됩니다.
head.css: 헤드 스타일, 여러 페이지 헤더의 디자인 스타일이 동일한 경우에 사용됩니다.
base.css: 공유 스타일.
style.css: 독립 페이지에서 사용되는 스타일 파일입니다.
global.css: 페이지 스타일의 기본, 글로벌 퍼블릭 스타일로 페이지에 반드시 포함되어야 합니다.
layout.css: 레이아웃, 레이아웃 스타일, 일반적인 유형이 많을 때 사용되며 일반적으로 홈페이지 페이지 및 상품 페이지에서 사용됩니다.
module.css: 모듈, 상품 페이지에 사용되며 다른 스타일과 함께 사용할 수도 있습니다. .
master.css: 기본 스타일 시트
columns.css: 열 스타일
themes.css: 기본 스타일
forms.css: 양식 스타일
mend.css: 패치, 위 스타일을 기반으로 한 전용 패치 .
페이지 구조 명명:
페이지: 전체 페이지를 나타내며 가장 바깥쪽 레이어에 사용됩니다.
wrap: 모든 요소를 함께 감싸는 래퍼, 가장 바깥쪽 레이어에 사용
wrapper: 페이지 주변은 가장 바깥쪽 레이어에 사용되는 전체 레이아웃 너비를 제어
container: 가장 바깥쪽 레이어에 사용되는 전체 컨테이너 Layer
head, header: 헤더 영역, 헤드에 사용
nav: 탐색 모음
content: 콘텐츠, 웹 페이지의 중간 본문에 사용되는 웹 사이트에서 가장 중요한 콘텐츠 영역
main: 웹 사이트의 주요 영역 ( 가장 중요한 위치를 나타냄), 중간 메인 콘텐츠
column: 열
sidebar: 사이드바
foot, footer: 바닥글, 바닥글에 사용됩니다. 웹사이트의 일부 추가 정보 배치 영역(또는 저작권이라는 이름)은 하단에 사용됩니다.
Navigation naming:
nav, navbar, Navigation, nav-wrapper: 탐색 모음 또는 탐색 패키지, 가로 탐색을 나타냄
topnav : 상단 탐색
mainbav: 기본 탐색
subnav: 하위 탐색
sidebar: 측면 탐색
leftsidebar 또는 sidebar_a: 왼쪽 탐색
rightsidebar 또는 sidebar_b: 오른쪽 탐색
title: 제목
summary: 요약
메뉴: 메뉴, 해당 영역에는 일반 링크와 메뉴가 포함되어 있습니다.
submenu: 하위 메뉴
drop: 드롭다운
dorpmenu: 드롭다운 메뉴
links: 링크 메뉴
기능 이름:
logo: 웹사이트 표시 로고
banner: 슬로건, 광고 표시줄, 상단 광고 표시줄
login: 로그인, (예: 로그인 양식: form-login)
loginbar: 로그인 표시줄
register: 등록
tool, 도구 모음: 도구 모음
search: 검색
searchbar: 검색 창
searchlnput: 검색 입력 상자
shop: 현재를 나타내는 리본
icon: 작은 아이콘
label: 상표
homepage: 홈페이지
subpage: 보조 페이지 하위 페이지
hot: 인기 핫스팟
list: 기사 목록, (예: 뉴스 목록: list-news)
scroll: 스크롤
tab: 태그
sitemap: 사이트 맵
msg 또는 메시지: 프롬프트 정보
current: current
joinus : Join
status: status
btn: 버튼, (예: 검색 버튼은 다음과 같이 쓸 수 있습니다: btn-search)
tips:tips
note: note
guild: 가이드
arr, 화살표: 화살표 표시
service: service
breadcrumb: (예: 페이지 위치의 탐색 프롬프트)
download: 다운로드
vote: 투표
siteinfo: 웹사이트 정보
partner: 파트너
link, friendlink : 친근한 링크
copyright : 저작권 정보
siteinfoCredits : 신뢰성
siteinfoLegal : 법률 정보