CSS 명명 규칙

html 페이지의 CSS 및 DIV 명명 규칙

CSS 명명 규칙

헤더: 헤더

콘텐츠: 콘텐츠/포함

꼬리: 바닥글

내비게이션: 네비게이션

사이드바: 사이드바

열: 열

페이지 주변 제어 전체 레이아웃 너비: 래퍼

왼쪽 오른쪽 중앙 : 왼쪽 오른쪽 중앙

로그인바: 로그인바

로고 : 로고

광고: 배너

페이지 본문: 메인

핫스팟: 핫

뉴스: 뉴스

다운로드: 다운로드

하위 탐색: subnav

메뉴: 메뉴

하위 메뉴: 하위 메뉴

검색: 검색

친절한 링크:friendlink

바닥글: 바닥글

저작권: copyright

스크롤: 스크롤

내용: 내용

탭 페이지: 탭

기사 목록: 목록

프롬프트 메시지: msg

팁:팁

칼럼 제목: title

가입: Joinus

안내 : 길드

서비스: 서비스

등록: regsiter

상태: 상태

투표:투표

파트너:파트너

XHTML 파일의 ID 이름 지정

(1) 페이지 구조

컨테이너: 컨테이너

페이지 머리글: 헤더

콘텐츠: 콘텐츠/컨테이너

페이지 본문: 메인

바닥글: 바닥글

내비게이션: 네비게이션

사이드바: 사이드바

열: 열

페이지 주변 제어 전체 레이아웃 너비: 래퍼

왼쪽 오른쪽 중앙 : 왼쪽 오른쪽 중앙

(2)내비게이션

내비게이션: 네비게이션

메인 네비게이션: mainbav

하위 탐색: subnav

상단 탐색: 상단 탐색

측면 탐색: 사이드바

왼쪽 탐색: 왼쪽 사이드바

오른쪽 탐색: 오른쪽 사이드바

메뉴: 메뉴

하위 메뉴: 하위 메뉴

제목 : title

　요약: 요약

(3) 기능

로고 : 로고

광고: 배너

로그인: 로그인

로그인바: 로그인바

등록: regsiter

검색: 검색

리본 : 쇼핑

제목 : title

가입: Joinus

상태: 상태

버튼: btn

스크롤: 스크롤

탭 페이지: 탭

기사 목록: 목록

프롬프트 메시지: msg

현재: 현재

팁:팁

아이콘: 아이콘

　참고: 참고

안내 : 길드

서비스: 서비스

핫스팟: 핫

뉴스: 뉴스

다운로드: 다운로드

투표:투표

파트너:파트너

친절한 링크: 링크

저작권: copyright

CSS+DIV 명명 규칙:

로그인 바: loginBar

로고 : 로고

사이드바: sideBar

광고: 배너

내비게이션:nav

하위 탐색: subNav

메뉴:메뉴

하위 메뉴: 하위 메뉴

검색: 검색

스크롤:스크롤

페이지 본문: 메인

내용:내용

탭 페이지:tab

기사 목록: 목록

프롬프트 메시지: msg

팁:팁

칼럼 제목: title

친절한 링크: friendLink

바닥글: 바닥글

가입: Joinus

안내:길드

서비스: 서비스

핫스팟: 핫

뉴스: 뉴스

다운로드:다운로드

등록:등록

상태: 상태

버튼:btn

투표:투표

파트너:파트너

저작권: copyRight

　1. CSSID의 명명

코트:랩

기본 탐색:mainNav

하위 탐색: subnav

바닥글: 바닥글

전체 페이지: 내용

헤더: 헤더

바닥글: 바닥글

상표: 라벨

제목:제목

메인 네비게이션: mainNav(globalNav)

상단 탐색: 상단 탐색

측면 탐색: 사이드바

왼쪽 탐색: leftsideBar

오른쪽 탐색: rightsideBar

깃발: 로고

슬로건: 배너

메뉴 콘텐츠 1:menu1Content

메뉴 용량: menuContainer

하위 메뉴: 하위 메뉴

측면 탐색 아이콘: sidebarIcon

참고: 참고

이동 경로: breadCrumb(예: 페이지 위치에 대한 탐색 프롬프트)

컨테이너:컨테이너

내용:내용

검색: 검색

로그인: 로그인

기능 영역 : 매장(장바구니, 계산원 등)

현재 전류

　2. 스타일 파일 이름 지정

메인: master.css

레이아웃:layout.css

열: columns.css

텍스트:font.css

인쇄 스타일: print.css

테마:themes.css

참고: 이들은 모두 클래스이므로 확장해야 하며, 현재 이름에 "_"(밑줄) 접미사를 사용하여 이름을 사용자 정의해야 합니다.

나는 목록 페이지를 list, 뉴스 목록을 newslist, 사진 목록을 piclist라고 부르는 데 익숙합니다.

컨텐츠 페이지는 보기

/**/

전체적으로 큰 프레임: #wrapper

큰 틀 속 : #inwrapper

///////////////////////////////////////////// /// ////////////////////////////////////////////// /////// ////////

상단 및 배너: .top

상단 및 배너 내: .intop

로고:.logo

배너：.banner

탐색: .menu

탐색: .inmenu

.메뉴

.메뉴얼 리

.Menuul li a

드롭다운 메뉴: .inmenu_xiala

.Inmenu_xialaul

.Inmenu_xialaul 리

.Inmenu_xialaul 리아

///////////////////////////////////////////// /// ////////////////////////////////////////////// /////// //////////

주요 콘텐츠: .mainWrapper

주요 콘텐츠: .inmainwrapper

왼쪽 블록: .sideleft

왼쪽 내부: .insideleft

오른쪽 열: .sideright

오른쪽 안쪽: .insideright

센터: .sidecenter

센터 내부: .insidecenter

///////////////////////////////////////////// /// ////////////////////////////////////////////// /////// ////////////

하단: .foot

하단 안쪽 : .infoot

///////////////////////////////////////////// /// ////////////////////////////////////////////// /////// //////////

/*기타 명명*/

검색: .search

검색: .insearch

검색창: .searchselect

검색 버튼: .serachbuttom

입력 텍스트 상자: .input

.선택

/*테이블 스타일*/

테이블의 전체 프레임: .listbox

테이블 너비: .listbox-table

테이블 헤더 텍스트 스타일: .listbox-header

테이블 텍스트 스타일: .listbox-entry

/*범용형*/

일반: .GM/*이건 좀 우울하네요. 제 영어가 너무 서툴거든요...*/

일반: .INGM

일반 왼쪽 부동소수점: .GMfl(GM FLOAT LEFT)

일반 오른쪽 부동소수점: .GMfr(GM FLOAT RIGHT)

/*범용적인 사진 스타일*/

범용 이미지 스타일: .img

/*플로트 지우기*/

모든 플로트 지우기: .clear

왼쪽 부동 소수점 지우기: .clearleft

오른쪽 플로트 지우기: .clearright

/*텍스트 스타일*/

텍스트: .font

/*뉴스 목록*/

뉴스 목록: .fontnews

/*페이지 글꼴 스타일 보기*/

페이지 보기 글꼴: .fontview

상표: 라벨

제목: 제목

메인 네비게이션 : mainbav (globalnav)

상단 탐색: 상단 탐색

사이드 탐색: 사이드바

왼쪽 탐색: 왼쪽 사이드바

오른쪽 탐색: 오른쪽 사이드바

깃발: 로고

슬로건: 배너

메뉴 콘텐츠 1: 메뉴 1 콘텐츠

메뉴 용량: 메뉴 컨테이너

하위 메뉴: 하위 메뉴

사이드 탐색 아이콘: sidebarIcon

참고: 　참고

탐색경로: 탐색경로(예: 페이지 위치에 대한 탐색 프롬프트)

컨테이너: 컨테이너

내용: 내용

검색: 검색

로그인: 로그인

기능 영역: 매장(장바구니, 계산원 등)

현재 전류

마스트헤드: 마스트헤드

초록, 요약요약 또는 일반

왼쪽 사진 왼쪽에 떠있는 사진

오른쪽 사진 오른쪽에 떠있는 이미지

제목　　제목

항목 하단　 항목하단

추가 확장 또는 .more

컨테이너 배경 컨테이너bg

서비스 서비스

서비스링크 서비스링크

라인라인

텍스트 텍스트

오른쪽

저작권 저작권

뉴스 뉴스

책 표지 포장지

소개　　소개-1부

컬럼 컬럼

진로 진로

섹션 섹션

모듈 모듈

상위 탐색 하위 탐색

2. 또한 스타일 시트 편집 시 표시되는 코멘트는 다음과 같이 작성할 수 있습니다.

<-- 바닥글 -->

콘텐츠 영역

<-- 바닥글 끝 -->

3. 스타일 파일 이름 지정

메인 master.css

레이아웃,layout.css

열 columns.css

텍스트 글꼴.css

인쇄 스타일 print.css

테마 theme.css

4. 스타일 시트의 댓글

예시 1

/* 글로벌 -------------- */

/* 링크 -------------- */

/* 양식 ---------------------------- */

/* IDS -------------------------- */

/* 헤더 ---------------------------- */

/* 열 1 -------------- */

/* 열 2 -------------- */

/* 클래스 ---------------------------- */

예시 2

HTML

예 3(NetEase)

CSS

#Urs로그인

#로고내비

#칼럼

#콘텐츠1

#bNav

#저작권

#Urs로그인

#로고내비

#검색지역

#채널영역

#핫뉴스

#뉴스센터

.키워드

#쇼핑지역

#도시

#회사소개

……………

공통 명칭

포장지와 용기가 들어있습니다.

헤더 또는 약어로 hd

바닥글 또는 약어로 ft

내비게이션 네비게이션

내 위치 탐색경로

보조 탐색 sub_nav

사이드바 사이드바 또는 사이드 열

모듈 모듈

데이터베이스의 명명 규칙

데이터베이스에는 문자 규칙이 포함됩니다

영문 26자(대소문자 구분)와 0~9까지의 10개의 자연수와 밑줄_을 더해 총 63자로 구성됩니다. 다른 문자(설명 제외)는 나타날 수 없습니다.

데이터베이스 객체 명명 규칙

데이터베이스 개체에는 테이블, 뷰(쿼리), 저장 프로시저(매개변수 쿼리), 함수 및 제약 조건이 포함됩니다. 객체 이름은 접두사와 실제 이름으로 구성되며, 길이는 30자를 초과할 수 없습니다. 접두사: 소문자를 사용합니다.

예: 테이블-tb 보기-vi 저장 프로시저-sp 함수-fn

실명

실제 이름은 엔터티의 내용을 설명하기 위한 것이며 단어 또는 단어의 조합으로 구성됩니다. 각 단어의 첫 글자는 대문자로 표시되며 그 외의 글자는 숫자나 _로 시작하지 않습니다.

예: 테이블 User_Info 보기 UserList 저장 프로시저 UserDelete

따라서 법적 개체 이름은 다음과 유사합니다.

테이블 tbUser_Info, tbMessage_Detail

vi_MessageList 보기

저장 프로시저 sp_MessageAdd

데이터베이스 테이블 명명 규칙

필드는 접두어와 실제 이름으로 구성됩니다. 시스템에서는 실제 이름의 첫 번째 단어와 동일한 단어를 사용하려고 합니다.

접두사: 소문자 tb를 사용하여 테이블을 나타냅니다.

예: tbMember　tbMember_Info　tbForum_Board　tbForum_Thread1

필드 명명 규칙

숫자, 문자, 날짜/시간, lob(대형 개체), 기타, 필드는 표의 약어, 밑줄, 실제 이름과 접미사로 구성됩니다.

접미사: 소문자를 사용하여 필드의 속성을 나타냅니다.

예: 　User_Idint　 　 User_Namestr　 　 User_RegDatedtm

명명 규칙 보기

필드는 밑줄로 연결된 접두사와 실제 이름으로 구성됩니다.

접두사: 소문자 vi를 사용하여 뷰를 나타냅니다.

예: vi_User　　vi_UserInfo

저장 프로시저 명명 규칙

필드는 밑줄로 연결된 접두사와 실제 이름으로 구성됩니다.

접두사: 소문자 sp를 사용하여 저장 프로시저를 나타냅니다.

예: sp_User

데이터베이스 설계 문서 규칙

모든 데이터베이스 디자인은 문서로 작성되어야 하며, 문서는 모듈 형식으로 표현되어야 합니다. 일반적인 형식은 다음과 같습니다.

'----------------------------------

　테이블 이름 : tbUser_Info　

　　 작성자: UAM_Richard

' 날짜: 2004-12-17

' 버전: 1.0

　설명: 사용자 정보 저장

　구체적인 내용:

　UserId int, 자동 증가 사용자 코드

　사용자 이름　문자(12)　사용자 이름

　　......

　---------------------------------- ---

CSS 클래스 및 ID의 명명 규칙

웹 개발자는 CSS 클래스와 ID 이름을 만들고 이러한 이름을 사용하여 div 및 기타 형식의 페이지 요소를 식별할 수 있습니다. 개발자의 경우 XHTML 태그(태그)를 재정의하는 CSS 선택기의 이름을 지정할 때 미리 정의된 태그와 정확하게 일치하는지 확인해야 하지만 클래스 및 ID 선택기 이름에 관해서는 의견의 문제입니다. 그러나 이러한 클래스와 ID의 이름을 원하는 대로 지정하는 것은 좋은 습관이 아닙니다.

1. 직관적인 네이밍

웹페이지를 디자인하고 div를 식별해야 할 때 가장 자연스러운 아이디어는 페이지에서 요소의 위치를 ​​설명할 수 있는 단어를 사용하여 이름을 지정하는 것입니다.

예: 상단 패널

가로 탐색

왼쪽

중앙 열

오른쪽 열

CSS, XHTML 클래스 및 ID에 대한 유효한 명명 규칙입니다. 이러한 용어는 간단하고 설명적이므로 페이지 요소와 해당 CSS 스타일을 식별해야 하는 요구 사항을 충족합니다.

그런데 문제는 그러한 이름이 페이지 내용의 특정 표현과 연관되어 있다는 것입니다. 이러한 이름은 특정 페이지 레이아웃 내에서 페이지 요소의 위치를 ​​나타내므로 해당 레이아웃 외부에서 사용하는 것은 부적절하거나 혼란스러울 수도 있습니다. 이러한 이름은 문서 내용의 구조에 대한 참조가 없습니다. 따라서 CSS 클래스와 ID의 이름을 지정하는 더 좋은 방법이 있습니다.

2. 구조화된 네이밍

CSS, XHTML 클래스 및 ID에 대한 유효한 명명 규칙입니다. 이러한 용어는 간단하고 설명적이므로 페이지 요소와 해당 CSS 스타일을 식별해야 하는 요구 사항을 충족합니다. 이는 CSS 및 XHTML 클래스와 ID의 이름을 지정하는 유효한 방법입니다. 이러한 용어는 간단하고 설명적이므로 페이지 요소와 해당 CSS 스타일을 식별해야 하는 요구 사항을 충족합니다.

태그된 관련 정보는 문서의 모양보다는 문서의 구조를 설명하는 데 사용됩니다. 이 기능을 사용하면 CSS를 간단히 변경하여 다양한 모양 형식으로 콘텐츠와 마크업을 재사용할 수 있습니다. 이 방법을 이해하면 오디오와 같은 표시 형식을 처리할 때 페이지 위치를 사용하여 클래스 및 ID 이름을 지정하는 것이 매우 부적절하다는 것을 쉽게 알 수 있습니다. 따라서 클래스와 ID는 나타나는 위치보다는 문서에서의 사용 목적에 따라 구조화되어야 합니다.

아래와 같이 구조화된 방식으로 클래스 및 ID 이름을 지정할 수 있습니다.

예: 브랜딩

메인네비

하위 탐색

주요내용

사이드바

이러한 이름은 직관적인 이름 지정만큼 이해하기 쉽지만 위치보다는 페이지 요소의 역할을 설명합니다. 이는 순수한 구조적 마크업을 사용하려는 원래 의도와 코드의 일관성을 더욱 높여줍니다. 즉, 개발자는 마크업을 변경하지 않고도 다양한 미디어의 표시 형식을 처리할 수 있습니다.

다른 미디어로 웹 페이지 형식을 지정할 계획이 없더라도 구조화된 이름 지정을 사용하면 향후 사이트 업그레이드나 재설계를 더 쉽게 만드는 데 도움이 될 수 있습니다. 예를 들어, 구조화된 이름 지정은 동일한 ID 오른쪽 열을 가진 div가 페이지 왼쪽으로 이동할 때 혼란을 방지합니다. 페이지의 어느 쪽에 표시되든 이름은 여전히 ​​직관적이고 개발자가 이해하기 쉽기 때문에 이런 방식으로 div 사이드바의 이름을 지정하는 것이 더 적절합니다.

3. 컨벤션

Andy Clarke는 표준화된 웹 디자인 개념을 옹호하는 개발자가 디자인한 40개의 웹 사이트의 소스 코드를 분석했습니다. 클래스 이름과 ID 이름은 매우 불일치하지만 자주 나타나는 일부 공통 이름은 여전히 ​​발견됩니다. 가장 일반적으로 사용되는 클래스/ID 이름의 예 목록은 다음과 같습니다.

예: 헤더

내용

탐색

사이드바

바닥글

3. 회원별 명명 규칙

회원별 명명 규칙은 파일과 폴더를 소속에 따라 분류하여 명명하는 것을 말하며, 이를 통해 파일 배열을 보다 논리적으로 만들 수 있습니다.

예를 들어, 마우스 클릭 전의 사진 파일은 "file_on"이고 클릭한 후의 사진 파일 이름은 이 범주에 따라 "file_off"로 지정됩니다.

4. 속성 기반 명명 규칙

예: 작은 장식 그림은 "___.*"에 따라 표현됩니다. 이것은 "heart_red_401*334_1.jpg"입니다.

5. 서수 기반 명명 규칙

웹 페이지에서는 이미지 다운로드 시간을 줄이기 위해 일반적으로 이미지를 작은 부분으로 나누어 전체 이미지를 구성합니다. 이 경우 이름을 지정하는 데 2차원 배열을 사용할 수 있습니다.

데이터테이블           dtbl             dtblProduct                                                                         데이터관계 drel drelMasterDetail DataView dvw dvwFilteredProducts WinForm 컨트롤 명명 규칙데이터 유형 데이터 유형 약어 표준 명명 예 lblMessage lblMessage 라벨 LinkLabel         llbl         llblToday                                                       메인메뉴 ​ ​ ​​ TableRow           tblr             tblrCountry                                                                           로 지정합니다.