집 > 기사 > 웹 프론트엔드 > CSS 파일을 압축하는 방법

CSS 파일을 압축하는 방법

青灯夜游원래의: 2021-04-14 18:48:163401검색

압축 방법: 1. DW 소프트웨어를 사용하여 CSS 파일을 엽니다. 2. "찾기 및 바꾸기" 도구를 사용하여 파일의 모든 공백을 삭제합니다. 3. 스타일 코드에서 초과된 세미콜론을 삭제합니다. 코드를 일렬로(서로 가깝게) 정렬하도록 합니다.

CSS 파일을 압축하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&AdobeDreamweaverCS6 버전, Dell G3 컴퓨터.

CSS 코드 압축 어디서부터 시작해야 할까요

웹 페이지가 개발된 후 공백 삭제, 줄 바꿈 제거, 중복되는 세미콜론 제거 등 웹 사이트에 게시할 CSS 코드를 직접 축소 압축할 수 있습니다.

물론 일부 CSS 코드도 사용할 수 있습니다. 최적화를 사용하면 코드 양을 크게 줄여 파일 크기도 줄일 수 있습니다.

CSS 파일을 압축하는 방법

DW 소프트웨어의 찾기 및 바꾸기 도구를 사용하여 압축된 CSS 코드를 바꿉니다.

1. DW 소프트웨어로 CSS 파일 열기

2. 공백 압축 코드 삭제

2-1: 단축키 "Ctrl+F"를 사용하여 찾기 및 바꾸기 도구 탭을 불러옵니다.

CSS 파일을 압축하는 방법

2-2: 검색 위치에 영문 반각 소문자 "space"를 입력(입력)합니다.

"Find" 입력 상자에 공백을 입력합니다.

CSS 파일을 압축하는 방법

"Find"에 공백을 입력합니다. " 입력 상자, "바꾸기" 입력 상자에 문자나 코드를 채울 필요가 없습니다. 이렇게 하면 교체를 수행할 때 공백을 문자가 없는 것으로 바꾸는 것과 같으며 이는 공백을 삭제하는 것과 같습니다. 위치.

2-3: "모두 바꾸기"를 클릭하세요.

"모두 바꾸기"를 클릭한 후 남은 공백을 삭제하고 압축을 완료할 수 있습니다.

CSS 파일을 압축하는 방법

3. 중복되는 세미콜론을 삭제하세요

CSS 코드에서 각 CSS 선택기의 마지막 CSS 스타일 끝은 "세미콜론"으로 끝날 필요가 없습니다. "마지막 중괄호" 앞의 마지막 CSS 스타일을 세미콜론으로 끝내려면

CSS 파일을 압축하는 방법

또한 실수로 다른 "세미콜론"이 삭제되는 것을 방지하기 위해 DW 소프트웨어의 "찾기 및 바꾸기" 기능을 사용하여 삭제합니다. 이때 "찾기" 입력 상자에 ";}"를 입력합니다. "찾기 및 바꾸기" 탭(세미콜론 + 후행 중괄호)에서 "바꾸기" 입력 상자에 "}"(후행 중괄호)만 입력한 후 "모두 바꾸기"를 클릭하면 중복되는 세미콜론 기호 삭제가 완료됩니다.

4. 코드가 일렬로(서로 가깝게) 정렬되도록 여분의 빈 줄을 삭제하세요.

빈 줄을 수동으로 삭제하거나 DW 소프트웨어를 사용하여 특정 삭제 및 빈 줄을 빠르게 삭제할 수 있습니다. 압축은 다음과 같습니다.

4-1: 먼저 DW에서 CSS 파일 코드를 엽니다.

4-2: 빈 줄을 선택합니다.

먼저 마우스 커서를 선택기 시작 부분으로 이동한 다음 마우스 왼쪽 버튼을 누른 상태에서 선택기 위로 끌어당깁니다. 이전 선택기의 끝 이전(이전 CSS 스타일 선택기 뒤 중괄호 뒤) 이때 빈 행을 선택할 수 있으며, 빈 행을 파란색 영역으로 선택할 수 있습니다.

CSS 파일을 압축하는 방법