찾다
웹 프론트엔드CSS 튜토리얼표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.

저는 오랫동안 CSS를 작성해 왔지만 대부분의 프런트엔드 사용자는 좋은 CSS 작성 사양에 따라 CSS 코드를 작성하지 않습니다. 이는 코드 읽기 경험에 영향을 미칠 것입니다. 다음은 CSS 작성 사양과 CSS를 요약한 것입니다. 참고용 작성 순서

몇몇 외국 기사와 제 개인적인 경험을 참고하여 CSS를 작성하는 프론트엔드 사용자에게 배울 만한 내용이라고 생각합니다.

1. CSS 작성 순서

1. 위치 속성(position, top, right, z-index, display, float 등)
2. 크기(너비, 높이, 패딩, 여백)
3. 텍스트 계열(글꼴, 줄 높이, 글자 간격, 색상-텍스트 정렬 등)
4. 배경(배경, 테두리 등)
5. 기타 (애니메이션, 전환 등) )

표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.

2. CSS 작성 사양
1. CSS 약어 속성 사용
몇몇 CSS 속성은 축약될 수 있습니다. 패딩, 여백, 글꼴 등. 이는 사용자의 읽기 경험을 향상시키면서 코드를 간소화합니다.

2. 소수점 앞의 "0"을 제거하세요

표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.

3. 약식 이름 지정

많은 사용자가 약식 클래스 이름을 좋아하지만 전제 조건 사람들이 이해할 수 있도록 이름을 줄여야합니다!

표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.

4.16 16진수 색상 코드 약어

일부 색상 코드는 약어가 가능하며, 사용자 경험을 개선하기 위해 최대한 약어를 사용하도록 노력하겠습니다.

표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.

하이픈 5개CSS 선택기이름 지정 규칙

1) 대시를 사용하여 긴 이름이나 문구를 선택할 수 있습니다.

2) CSS 선택자 이름에 "_" 밑줄을 사용하지 않는 것이 좋습니다. 이유는 무엇입니까?

입력할 때 shift 키를 하나 덜 누르세요. 브라우저 호환성 문제(예: IE6에서는 유효하지 않은 _tips 선택기 이름 사용) JavaScript 변수 이름을 잘 구분할 수 있습니다(JS 변수 이름은 "_" 사용)

표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.

6. id를 임의로 사용하지 마세요

id는 JS에서 고유하므로 여러 번 사용할 수 없으나 class 클래스 선택자는 재사용이 가능합니다. 또한 id의 우선순위가 클래스보다 우선하므로 필요에 따라 사용해야 하며 남용되지 않아야 합니다.

표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.

7. 선택기에 상태 접두사를 추가합니다.

때로는 상태를 나타내는 접두사를 선택기에 추가하여 의미를 만들 수 있습니다. 예를 들어, 더 명확하게 하기 위해 다음 그림에서는 ".is-" 접두사를 추가합니다.

표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.

3. CSS 명명 규칙(규칙)
일반적으로 사용되는 CSS 명명 규칙

헤더: 헤더
콘텐츠: 콘텐츠/컨테이너
꼬리: 바닥글
탐색: nav
사이드바: 사이드바
열: 열
페이지 주변 장치 제어 전체 레이아웃 너비: 래퍼
왼쪽 오른쪽 가운데: 왼쪽 오른쪽 가운데
로그인 바: 로그인바
로고: 로고
광고: 배너
페이지 본문: 메인
핫스팟: 핫
뉴스: 뉴스
다운로드: 다운로드
Subnav: subnav
메뉴: 메뉴
하위 메뉴: 하위 메뉴
검색: 검색
친숙한 링크: friendlink
바닥글: 바닥글
저작권: 저작권
스크롤: 스크롤
콘텐츠: 콘텐츠
태그: 태그
글 목록: list
프롬프트 정보: msg
팁: 팁
칼럼 제목: title
참여: Joinus
가이드: 가이드
서비스: service
등록: regsiter
상태: status
투표: vote
파트너: 파트너

댓글 쓰기:

/* 헤더 */
콘텐츠 영역
/* 헤더 끝 */

ID 명명:

1) 페이지 구조

컨테이너: 컨테이너
헤더: 헤더
콘텐츠: 콘텐츠/컨테이너
페이지 본문: 메인
바닥글: 바닥글
탐색: nav
사이드바: 사이드바
열: 열
페이지 주변기기 제어 전체 레이아웃 너비: 래퍼
왼쪽 오른쪽 중앙

(2) 내비게이션

내비게이션: nav
메인 내비게이션: mainnav
하위 내비게이션: subnav
상단 내비게이션: topnav
측면 탐색: 사이드바
왼쪽 탐색: 왼쪽 사이드바
오른쪽 탐색: 오른쪽 사이드바
메뉴: 메뉴
하위 메뉴: 하위 메뉴
제목: 제목
요약 : 요약

(3) 기능

로고: 로고
광고: 배너
로그인: 로그인
로그인 바: loginbar
등록: 등록
검색: 검색
리본: 상점
제목: 제목
가입: Joinus
상태: 상태
버튼 : btn
스크롤: 스크롤
표시 태그 : 탭
글 목록: 목록
프롬프트 메시지: msg
현재: 현재
팁: 팁
아이콘: 아이콘
참고: 노트
가이드: 길드
서비스 : 서비스
핫스팟: hot
뉴스: 뉴스
다운로드: 다운로드
투표: vote
파트너: 파트너
친숙한 링크: 링크
저작권: copyright

4. 참고::

1. 항상 소문자를 사용하세요.
3. >4. 한눈에 이해하기 쉬운 단어가 아닌 이상 단어를 축약하지 마세요.

5. CSS 스타일시트 파일 네이밍

메인 master.css

모듈 module.css

기본적으로 공유되는 base.css
레이아웃, 레이아웃 레이아웃.css
theme theme.css
columns.css
textfont.css
forms.css
patch mend.css
print print.css

【관련 추천】

1.

CSS3 무료 동영상 튜토리얼

2.

H5 및 CSS3 양식 검증 튜토리얼

3. CSS3 의사 요소를 통해 점차 빛나는 테두리를 완성하는 코드

4. CSS3에서 이미지의 로우폴리 애니메이션 효과를 완성하는 과정에 대한 자세한 설명

5. CSS로 표준 원형 패턴을 그리는 방법을 가르쳐주세요

위 내용은 표준화된 방식으로 CSS 스타일을 작성하는 방법을 가르칩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Cohost.org의 잃어버린 CSS 트릭Cohost.org의 잃어버린 CSS 트릭Apr 25, 2025 am 09:51 AM

이 게시물에서 Blackle Mori는 코 호스트의 HTML 지원의 한계를 추진하면서 발견 된 몇 가지 해킹을 보여줍니다. 감히 CSS 범죄자 라벨이 붙어 있지 않도록 감히 사용하십시오.

커서를위한 다음 레벨 CSS 스타일커서를위한 다음 레벨 CSS 스타일Apr 23, 2025 am 11:04 AM

CSS가있는 커스텀 커서는 훌륭하지만 JavaScript를 사용하여 다음 단계로 가져갈 수 있습니다. JavaScript를 사용하면 커서 상태를 전환하고 커서 내에 동적 텍스트를 배치하고 복잡한 애니메이션을 적용하며 필터를 적용 할 수 있습니다.

Worlds Collide : 스타일 쿼리를 사용한 KeyFrame Collision DetectionWorlds Collide : 스타일 쿼리를 사용한 KeyFrame Collision DetectionApr 23, 2025 am 10:42 AM

2025 년에 서로를 ricocheting하는 요소가있는 대화식 CSS 애니메이션은 CSS에서 Pong을 구현할 필요가 없지만 CSS의 유연성과 힘이 증가하는 것은 LEE의 의심을 강화합니다.

UI 효과를 위해 CSS 배경 필터 사용UI 효과를 위해 CSS 배경 필터 사용Apr 23, 2025 am 10:20 AM

CSS 배경 필터 속성을 사용하여 사용자 인터페이스 스타일에 대한 팁과 요령. 여러 요소들 사이에 필터를 배경으로 배경으로 배경으로하는 방법을 배우고 다른 CSS 그래픽 효과와 통합하여 정교한 디자인을 만듭니다.

미소?미소?Apr 23, 2025 am 09:57 AM

글쎄, SVG '의 내장 애니메이션 기능은 계획대로 이상 사용되지 않았다. 물론 CSS와 JavaScript는 부하를 운반 할 수있는 것 이상이지만 Smil이 이전과 같이 물에서 죽지 않았다는 것을 아는 것이 좋습니다.

'예쁜'은 보는 사람의 눈에 있습니다'예쁜'은 보는 사람의 눈에 있습니다Apr 23, 2025 am 09:40 AM

예, 텍스트-랩을위한 점프 : Safari Technology Preview의 예쁜 착륙! 그러나 Chromium 브라우저에서 작동하는 방식과는 다른 점을 조심하십시오.

CSS- 트릭 연대기 XLIIICSS- 트릭 연대기 XLIIIApr 23, 2025 am 09:35 AM

이 CSS- 트릭 업데이트는 Almanac, 최근 Podcast 출연, 새로운 CSS 카운터 가이드 및 귀중한 컨텐츠에 기여하는 몇 가지 새로운 저자의 추가 진전을 강조합니다.

Tailwind ' s @apply 기능은 소리보다 낫습니다Tailwind ' s @apply 기능은 소리보다 낫습니다Apr 23, 2025 am 09:23 AM

대부분의 경우 사람들은 Tailwind ' S 단일 프로퍼 유틸리티 중 하나 (단일 CSS 선언을 변경)와 함께 Tailwind ' s @apply 기능을 보여줍니다. 이런 식으로 선보일 때 @apply는 전혀 약속하는 소리가 들리지 않습니다. 그래서 Obvio

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 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

맨티스BT

맨티스BT

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

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

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

메모장++7.3.1

메모장++7.3.1

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

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음