CSS 개발 과정 에서 20 개의 빠 른 향상 기 교 를 상세 하 게 설명 하 다.

1.CSS 리 셋 사용(reset)
css 리 셋 라 이브 러 리,예 를 들 어 normalize.css 는 이미 여러 해 동안 사용 되 었 습 니 다.웹 사이트 스타일 에 비교적 뚜렷 한 기준 을 제공 하여 브 라 우 저 간 의 일치 성 을 확보 할 수 있 습 니 다.
대부분의 항목 은 이 라 이브 러 리 에 포 함 된 모든 규칙 이 필요 하지 않 습 니 다.간단 한 규칙 을 통 해 레이아웃 에 있 는 모든 요 소 를 적용 하고 모든 margin,padding 을 삭제 하여 브 라 우 저의 기본 박스 모델 을 변경 할 수 있 습 니 다.

*{box-sizing:border-box;margin:0;padding:0}

box-sizing 성명 을 사용 하면 선택 할 수 있 습 니 다.아래 에 계 승 된 박스 모델 형식 을 사용 하면 건 너 뛸 수 있 습 니 다.
2.계승 박스 모델
박스 모델 html 에서 계승:

html {    box-sizing: border-box;  }    *, *:before, *:after {    box-sizing: inherit;  }

3.margin 의 문 제 를 피하 기 위해 flexbox 레이아웃 을 사용 합 니 다(Get Rid of Margin hacks width Flexbox)
조합 이나 갤러리 같은 격자 구 조 를 몇 번 이나 설계 해 보 았 을 때,움 직 이 는 방식 을 사용한다 면,움 직 이 는 것 을 제거 하고 바깥쪽 거 리 를 리 셋 해서 필요 한 줄 로 분해 해 야 한다.nth-,first-,last-child 문 제 를 피하 기 위해 flexbox 의 space-between 속성 값 을 사용 할 수 있 습 니 다.

.flex-container{display:flex;justify-content:space-between;}.flex-container .item{              flex-basis:23%;}

4.사용:not()lists 테두리 문제 해결
웹 디자인 에서 저 희 는 보통 last-child nth-child 선택 기 를 사용 하여 부모 선택 기 에 있어 야 할 스타일 을 덮어 씁 니 다.예 를 들 어 네 비게 이 션 메뉴 는 borders 를 사용 하여 모든 링크 링크 에 분할 자 를 만 든 다음 에 하나의 규칙 을 추가 하여 마지막 링크 의 border 를 해제 합 니 다.

.nav li {    border-right: 1px solid #666;  }.nav li:last-child {    border-right: none;  }

이것 은 브 라 우 저 를 강제로 렌 더 링 할 뿐만 아니 라 특정한 선택 기 를 통 해 취소 하 는 매우 혼 란 스 러 운 방식 이다.이렇게 덮어 쓰 는 스타일 은 불가피 하 다.그러나 가장 중요 한 것 은 not 위조 류(pseudo-class)를 사용 하여 설명 하고 싶 은 요소 에 하나의 스타일 만 사용 할 수 있 습 니 다.

.nav li:not(:last-child) {    border-right: 1px solid #666;  }

위 에는 마지막 li 를 제외 한 모든.nav li 에 border 스타일 이 붙 어 있 습 니 다.간단 하지 않 습 니까?
물론,너 도.nav li+li 또는.nav li:first-child~li 를 사용 할 수 있 지만,not 는 더욱 의미 화(semantic)되 고 이해 하기 쉽다.
5、body 에 line-height 스타일 추가
낮은 스타일 효율(inefficient stylesheets)을 초래 하 는 일 은 끊임없이 반복 되 는 성명 이다.프로젝트 계획 과 조합 규칙 을 만들어 서 CSS 가 더욱 원활 해 지 는 것 이 좋 습 니 다.이 를 실현 하려 면 직렬 연결(캐 스 케 이 드)과 유 니 버 설 선택 기 에서 어떻게 쓰 는 스타일 이 다른 곳 에 계승 되 는 지 이해 해 야 한다.
줄 간격(line-height)은 전체 항목 에 설정 한 속성 으로 코드 의 양 을 줄 일 수 있 을 뿐만 아니 라 사이트 의 스타일 도 표준 적 인 외관 을 줄 일 수 있 습 니 다.

body {line-height: 1.5;}

이 성명 은 단위 가 없습니다.저 희 는 브 라 우 저 에 게 렌 더 링 줄 이 렌 더 링 글꼴 크기 의 1.5 배 라 고 만 알려 드 립 니 다.
6.수직 으로 가운데 에 있 는 모든 요소(vertical-center anything)
CSS Grid 레이아웃 을 사용 할 준비 가 되 어 있 지 않 을 때 수직 가운데 레이아웃 을 설정 하 는 전역 규칙 은 좋 은 방식 으로 우아 한(elegantly)설정 내용 레이아웃 에 기반 을 다 질 수 있 습 니 다.

html, body {height: 100%;    margin: 0;  }    body {    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;    display: -webkit-flex;    display: flex;  }

7、SVG icons 사용
SVG 는 모든 분류 에 사용 되 며 모든 브 라 우 저 도 지원 합 니 다.그래서.png.jpg.gif 등 파일 을 버 릴 수 있 습 니 다.FontAwsome 5 에서 도 SVG 아이콘 글꼴 을 제공 합 니 다.SVG 형식 을 설정 하면 다른 그림 형식 과 같 습 니 다.

.logo {    background: url("logo.svg");  }

따뜻 한 알림:SVG 를 대화 가능 한 요소 에 사용 하면 button,SVG 는 불 러 올 수 없 는 문제 가 발생 할 수 있 습 니 다.SVG 가 접근 할 수 있 도록 아래 규칙 을 통 해 확인 할 수 있 습 니 다.(HTML 에 적당 한 aria 속성 이 설정 되 어 있 는 지 확인)

.no-svg .icon-only:after {    content: attr(aria-label);  }

8."OWL 선택 기"사용
유 니 버 설 선택 기(universal selector)*와 인접 한 형제 선택 기(adjacent sibling selector)+를 사용 하면 강력 한 CSS 기능 을 제공 하여 다른 요소 의 문서 흐름 에 있 는 모든 요소 에 통 일 된 규칙 을 설정 할 수 있 습 니 다.

* + * {    margin-top: 1.5rem;  }

이것 은 아주 좋 은 기술 로 더욱 균일 한 유형 과 간격 을 만들어 줄 수 있다.위의 열 에서 다른 요소 뒤에 있 는 요소,예 를 들 어 H3 뒤의 H4 또는 한 단락 뒤의 한 단락,그들 사이 의 최소 1.5rems 간격(약 30px)
9.일치 하 는 수직 구조(Consistent Vertical Rhythm)
일치 하 는 수직 리듬 은 시각 미학 을 제공 하여 내용 을 더욱 가 독성 있 게 한다.Worl 선택 기 가 너무 통용 된다 면 요소 내 에서 유 니 버 설 선택 기(*)를 사용 하여 레이아웃 의 특정 부분 에 일치 하 는 수직 리듬 을 만 드 십시오.

.intro > * {   margin-bottom: 1.25rem;  }

10.더 예 쁜 줄 바 꾸 기 텍스트 에 box-decoration-break 사용
줄 을 여러 줄 로 바 꾸 는 긴 텍스트 줄 에 통 일 된 간격,여백,강조 표시 또는 배경 색 을 적용 하고 싶 지만 전체 단락 이나 제목 이 큰 덩어리 처럼 보이 지 않 기 를 원 하지 않 습 니 다.Box Decoration Break 속성 은 텍스트 에 만 스타일 을 적용 하고 채 움 과 페이지 여백 의 완전 성 을 유지 할 수 있 습 니 다.
서 스 펜 션 할 때 강조 디 스 플레이 를 사용 하거나 슬라이더 에 하위 텍스트 스타일 을 설정 하여 강조 되 는 외관 을 가 지 려 면 이 기능 이 특히 유용 합 니 다.

.p {display: inline-block;box-decoration-break: clone;-o-box-decoration-break: clone;-webkit-box-decoration-break: clone;}

내 연 블록 성명 은 전체 요소 가 아 닌 색상,배경,페이지 여백,채 우기 등 을 줄 마다 적용 할 수 있 습 니 다.클론 성명 은 이 스타일 을 줄 마다 고 르 게 적용 하도록 합 니 다.
11.등 폭 표 셀
표 는 처리 하기 어 려 울 수 있 으 므 로 table-layout:fixed 를 사용 하여 셀 의 폭 을 유지 하려 고 합 니 다.

.calendar {    table-layout: fixed;  }

12.속성 선택 기 를 사용 하여 빈 링크 를 표시 하도록 강제 합 니 다.
이것 은 CMS 를 통 해 삽 입 된 링크 에 특히 유용 합 니 다.CMS 는 클래스 속성 을 가지 지 않 고 등급 연결 에 영향 을 주지 않 는 상황 에서 특정한 스타일 설정 을 할 수 있 도록 도 와 줍 니 다.예 를 들 어요 소 는 텍스트 값 이 없 지만 href 속성 에 링크 가 있 습 니 다. a[href^="http"]:empty::before { content: attr(href); }13.스타일"기본"링크링크 스타일 하면 거의 모든 스타일 시트 에서 일반적인 A 스타일 을 찾 을 수 있 습 니 다.이 때문에 하위 요소 의 모든 링크 에 추가 적 인 덮어 쓰기 와 스타일 규칙 을 만 들 고 워드 프레스 와 같은 CMS 를 사용 할 때 버튼 텍스트 색상 보다 홈 링크 스타일 에 문제 가 생 길 수 있 습 니 다.'기본'링크 에 스타일 을 추가 하 는 데 방해 가 적 습 니 다. a[href]:not([class]) { color: #999; text-decoration: none; transition: all ease-in-out .3s;}14.비율 상자고유 비율 을 가 진 상 자 를 만 들 려 면 상단 이나 아래쪽 을 div 에 채 우 는 것 이 필요 합 니 다. .container { height: 0; padding-bottom: 20%; position: relative; } .container div { border: 2px dashed #ddd; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }20%를 사용 하여 채 워 서 상자 의 높이 를 너비 의 20%와 같 게 합 니 다.시야 의 너비 와 상 관 없 이 하위 div 는 종횡 비(100%/20%=5:1)를 유지 합 니 다.15.스타일 이 깨 진 이미지이 기 교 는 코드 축소 가 아니 라 디자인 디 테 일 을 세분 화 하 는 것 이다.깨 진 이미지 가 발생 하 는 원인 은 여러 가지 가 있 습 니 다.보기 싫 거나 혼 란 스 럽 거나(빈 요소 일 뿐 입 니 다).이 작은 CSS 로 더 아름 다운 효 과 를 만 듭 니 다: img { display: block; font-family: Helvetica, Arial, sans-serif; font-weight: 300; height: auto; line-height: 2; position: relative; text-align: center; width: 100%; }img:before { content: "We're sorry, the image below is missing :("; display: block; margin-bottom: 10px; } img:after { content: "(url: " attr(src) ")"; display: block; font-size: 12px; }16.remi 를 사용 하여 전체 크기 조정 하기;em 을 사용 하여 부분 크기 조정루트 디 렉 터 리 의 기본 글꼴 크기 를 설정 한 후 html 글꼴 크기:15px;요 소 를 포함 하 는 글꼴 크기 를 remy 로 설정 할 수 있 습 니 다. article { font-size: 1.25rem; } aside { font-size: .9rem; }그리고 텍스트 요소 의 글꼴 크기 를 em 으로 설정 합 니 다. h2 { font-size: 2em; } p { font-size: 1em; }현재 포 함 된 모든 요 소 는 분 구 화 되 고 스타일 화 되 기 쉬 우 며 유지 하기 쉽 고 유연 하 다.17.음소 거 되 지 않 은 자동 재생 영상 숨 기기원본 코드 에서 쉽게 제어 할 수 없 는 내용 을 처리 할 때 사용자 스타일 시트 를 사용자 정의 하 는 데 좋 은 방법 입 니 다.이 기술 은 페이지 를 불 러 올 때 비디오 의 소 리 를 자동 으로 재생 하여 방문 자 를 방해 하지 않도록 도와 주 고 멋 진:not()의사 선택 기 를 다시 제공 합 니 다. video[autoplay]:not([muted]) { display: none; }18.루트 유형 활용응답 레이아웃 의 글꼴 크기 는 자동 으로 시각 영역 으로 조정 되 어 미디어 조 회 를 작성 하 는 작업 을 저장 하여 글꼴 크기 를 처리 할 수 있 습 니 다.사용 가능:not 와 시각 단위,시각 높이 와 너비 에 따라 글꼴 크기 를 계산 합 니 다. :root { font-size: calc(1vw + 1vh + .5vmin); }현재 루트 em 단 위 를 사용 할 수 있 습 니 다.이 단 위 는:not 기반 입 니 다. body { font: 1rem/1.6 sans-serif; }위의 rem/em 기술 을 결합 하여 더욱 좋 은 통 제 를 얻 을 수 있 습 니 다.19.폼 요소 에 글꼴 크기 를 설정 하여 더욱 좋 은 모 바 일 체험 을 얻 을 수 있 습 니 다.모 바 일 브 라 우 저(iOS Safari 등)가드 롭 다운 목록 을 클릭 할 때 HTML 폼 요 소 를 확대 하지 않도록 font-size 스타일 을 추가 하 십시오. input[type="text"], input[type="number"], select, textarea { font-size: 16px; }20.CSS 변수마지막 으로 가장 강력 한 CSS 단 계 는 CSS 변수 에서 나 옵 니 다.이 값 들 은 스타일 시트 의 모든 위치 에 있 는 키 워드 를 통 해 다시 사용 할 수 있 습 니 다.일치 성 을 유지 하기 위해 서 전체 항목 에 사용 할 색상 이 있 을 수 있 습 니 다.CSS 에서 이러한 색상 값 을 반복 하 는 것 은 귀 찮 을 뿐만 아니 라 실수 하기 도 쉽다.만약 에 특정한 색 이 특정한 시간 에 바 뀌 어야 한다 면 찾 고 교체 해 야 한다.이것 은 믿 을 수 없 거나 빠 르 지 않다.최종 사용자 에 게 제품 을 구축 할 때 변 수 는 맞 춤 형 제작 을 훨씬 쉽게 할 수 있다.예 를 들 면: :root {--main-color: #06c;--accent-color: #999;}h1, h2, h3 {color: var(--main-color);}a[href]:not([class]) ,p,footer span{color: var(--accent-color);}이상 은 CSS 개발 과정 에서 20 개의 빠 른 기술 향상 에 대한 상세 한 내용 입 니 다.CSS 개발 과정 에서 20 개의 빠 른 기술 향상 에 관 한 자 료 는 우리 의 다른 관련 글 을 주목 하 세 요!