찾다
웹 프론트엔드CSS 튜토리얼초보자가 꼭 읽어야 할 CSS 명명 규칙

아래 편집기에서는 CSS 명명 규칙에 대해 간략하게 설명합니다(초보자가 꼭 읽어야 할 내용). 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리고자 합니다.

Head: header 
Content: content/container 
Tail: footer 
Navigation: nav 
Sidebar: sidebar
Column: columns
페이지 주변 장치 제어 전체 레이아웃 너비: 래퍼 
왼쪽 오른쪽 중앙 
로그인 바: 로그인바 
마크: 로고 
광고: 배너 
페이지 본문: 메인 :hot 
뉴스: 뉴스
다운로드: 다운로드 바닥글: footer
저작권: copyright
칼럼 제목: title
가입: Joinus
가이드: guild
서비스: service
등록: regsiter
상태: status
투표: vote
파트너: 파트너



댓글 작성 방법



/* 바닥글 */
컨텐츠 영역
/* 바닥글 끝 */


ID 명명

컨테이너: 컨테이너 헤더: 헤더 컨텐츠: 컨텐츠 /container

페이지 본문: 메인

페이지 테일: 바닥글
탐색: nav
사이드바: 사이드바

열: 열

페이지 주변 장치 제어 전체 레이아웃 너비: 래퍼 왼쪽 오른쪽 센터

ID 네이밍





페이지 구조

컨테이너: 컨테이너
헤더 :헤더 콘텐츠: 콘텐츠/컨테이너 페이지 본문: 메인 바닥글: 바닥글 탐색: nav

사이드바: 사이드바

열: 열 페이지 주변 장치 제어 전체 레이아웃 너비: 래퍼 왼쪽 오른쪽 가운데

Navigation



Navigation: nav
메인 탐색: mainbav
하위 탐색: subnav
상단 탐색: topnav
측면 탐색: 사이드바
왼쪽 탐색: 왼쪽 사이드바

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

메뉴: 메뉴 하위 메뉴: 하위 메뉴 제목 : 제목 요약 : 요약


기능


마크 : 로고
광고 : 배너
로그인 : 로그인
로그인바 :loginbar
등록 : regsiter
검색 : search
리본 : shop

제목 : title

가입 : Joinus 상태 : status 버튼 : btn 스크롤 : 스크롤 탭 페이지: 탭
글 목록: 목록
프롬프트 메시지: msg
현재: 현재
팁: 팁
아이콘: 아이콘
참고: 노트
가이드: 길드
서비스: 서비스
핫스팟: 핫
뉴스: 뉴스
다운로드: 다운로드
투표: 투표
파트너: 파트너
친절한 링크: 링크
저작권: copyright



클래스 이름 지정



(1) 색상: 색상 이름 또는 16진수 코드 사용(예:
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2) 글꼴 크기는 "글꼴+글꼴 크기"로 직접 사용하세요.

.font12px {font-size: 12px }

.font9pt {font-size: 9pt; } 등의 이름 (3) 정렬 스타일은 정렬의 영문 이름을 사용하세요. 대상, .left { float:left }

.bottom { float:bottom }


(4) 제목 표시줄 스타일, "카테고리 + 함수" 방법 사용 이름을 지정하려면
.barnews { }
.barproduct { }



Notes

1. 모두 소문자입니다.
2. 가능한 한 영어를 사용하세요.

3. 대시나 밑줄을 넣지 마세요.

한 눈에 이해하기 쉬운 단어는 쓰지 마세요.
css
Module module.css

기본적으로 base.css 공유

layout,layout.css themes.css columns.css textfont.css forms.css

patch mend.css

Print print.css

위 내용은 편집자가 가져온 CSS 명명 규칙에 대한 간단한 토론(초보자가 꼭 읽어야 할 내용)의 전체 내용입니다. PHP 중국어 홈페이지를 지원해주세요~



위 내용은 초보자가 꼭 읽어야 할 CSS 명명 규칙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
CSS Flexbox vs Grid : 포괄적 인 검토CSS Flexbox vs Grid : 포괄적 인 검토May 12, 2025 am 12:01 AM

Flexbox 또는 그리드 선택은 레이아웃 요구 사항에 따라 다릅니다. 1) Flexbox는 탐색 표시 줄과 같은 1 차원 레이아웃에 적합합니다. 2) 그리드는 매거진 레이아웃과 같은 2 차원 레이아웃에 적합합니다. 두 사람은 프로젝트에 사용하여 레이아웃 효과를 향상시킬 수 있습니다.

CSS 파일 포함 방법 : 방법 및 모범 사례CSS 파일 포함 방법 : 방법 및 모범 사례May 11, 2025 am 12:02 AM

CSS 파일을 포함시키는 가장 좋은 방법은 태그를 사용하여 HTML 부분에 외부 CSS 파일을 소개하는 것입니다. 1. 태그를 사용하여 외부 CSS 파일을 소개합니다. 2. 작은 조정의 경우 인라인 CSS를 사용할 수 있지만주의해서 사용해야합니다. 3. 대규모 프로젝트는 SASS와 같은 CSS 전 처리기를 사용하여 @Import를 통해 다른 CSS 파일을 가져올 수 있습니다. 4. 성능의 경우 CSS 파일을 병합하고 CDN을 사용해야하고 CSSNANO와 같은 도구를 사용하여 압축해야합니다.

Flexbox vs Grid : 둘 다 배워야합니까?Flexbox vs Grid : 둘 다 배워야합니까?May 10, 2025 am 12:01 AM

예, YoushouldLearnbothflexBoxAndgrid.1) FlexBoxisIdealforone-Dimensional, FlexiblelayoutSlikenavigationMenus.2) GridexCelsIntwo-Dimensional, ComplexDesignsSuchasmagazinElayouts.3) 결합 된 BothenSlayoutFlexibility 및 HeartingFortructur

궤도 역학 (또는 CSS 키 프레임 애니메이션을 최적화하는 방법)궤도 역학 (또는 CSS 키 프레임 애니메이션을 최적화하는 방법)May 09, 2025 am 09:57 AM

자신의 코드를 리팩터링하는 것은 어떤 모습입니까? John Rhea는 자신이 쓴 오래된 CSS 애니메이션을 선택하고 최적화하는 사고 과정을 살펴 봅니다.

CSS 애니메이션 : 만들기가 어렵습니까?CSS 애니메이션 : 만들기가 어렵습니까?May 09, 2025 am 12:03 AM

cssanimationsarenherinly에 hardbutreepracticenderstandingofcsspropertiesandtimingflestions.1) startsimpleants withsimpleatslikeScalingabuttononHoverusingKeyframes.2) useAsingfuctionslikecubic-bezierfornateffects, 그러한 분위기, 3)

@keyframes CSS : 가장 많이 사용되는 트릭@keyframes CSS : 가장 많이 사용되는 트릭May 08, 2025 am 12:13 AM

@keyframesispopularduetoitstativerstatility 및 powerincreatingsmoothcssanimations.keytricksinclude : 1) states 사이에 moothtransitionsbettites, 2) 애니메이션 multiplepropertiessimultory, 3) vendorPixesforBrowsercompatibility, 4) 빗질을 사용하여

CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서CSS 카운터 : 자동 번호 매기기에 대한 포괄적 인 안내서May 07, 2025 pm 03:45 PM

csScounterSearedTomanageAutomaticNumberingInberingInwebDesigns.1) 1) theCanbeusedfortablestoffContents, ListItems 및 CustomNumbering.2) AdvancedUsesInSinestedNumberingsystems.3) CreativeUseNvolvecust를 CreativeSinvolecust.4) CreativeSinvolvecust

스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자스크롤 구동 애니메이션을 사용한 현대 스크롤 그림자May 07, 2025 am 10:34 AM

특히 모바일 장치에 스크롤 그림자를 사용하는 것은 Chris가 이전에 다룬 미묘한 UX입니다. Geoff는 애니메이션 타임 라인 속성을 사용하는 새로운 접근 방식을 다루었습니다. 또 다른 방법이 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.