내가 실제로 가정 하는 대신 우리의 스타일 시트를 측정 처음,숫자는 나를 당황 했다. WP Adminify's 관리자 번들 CSS 파일을 성장 했다 214 KB-기능의 년,세 개발자,제로 삭제,최소화, 그것은 156 KB 로 떨어졌다. 그 위에 Gzipped,24 KB 와이어 통해. We'd 는 사용자가 다운로드 하는 것 보다 거의 아홉 배 더 많은 stylesheet 를 배송 해야 했다 구문 분석됨그리고 모든 관리자 페이지는 모든 부하에 대한 구문 분석 비용을 지불했습니다. CSS 는 뚱뚱하다는 이유로 오류를 던지지 않기 때문에 아무도 눈치 채지 못했습니다. 그것은 단지 조용히 모든 것을 나중에 만듭니다.
CSS 는 렌더링의 중요한 경로에 앉아있다. 브라우저는 헤드의 스타일시트가 다운로드되고 구문 분석 될 때까지 페인팅을 차단합니다 - that's what "render-blocking CSS"는 Lighthouse 보고서에서 의미하며,it's 는 스타일시트 크기가 첫 번째 만족 페인트와 가장 큰 만족 페인트에 직접 표시되는 이유,메트릭 중 두 가지입니다 핵심 웹 바이탈 신경쓰세요. JavaScript를 게으르게 로드할 수 있고 이미지를 연기할 수 있습니다; 중요한 CSS는 할 수 없습니다. It's는 모든 페이지 로드가 통과하는 요금소입니다.
최소화는 유효한 가장 싼 통행료 할인이다: 파서가 doesn't 필요로 하는 모든 것을 벗기십시오 - 코멘트,공백, 중복 구문 - 그리고 살아남은 규칙은 사실상 바이트 대 바이트 동등하다. 리팩토링이 없고 올바르게 수행되었을 때 동작이 변경될 위험이 없으며 브라우저 기반 도구를 사용하는 경우 빌드 파이프라인이 필요하지 않습니다 Toolz.dev의 CSS 미니파이어 붙여넣는 데 걸리는 시간 동안 클라이언트 측에서 정확히 이 작업을 수행합니다.
이 가이드는 사용 방법, 후드 아래에서 실제로 minification이 수행하는 작업, gzip 및 Brotli와 상호 작용하는 방법 (대부분의 기사가 잘못되는 부분) 및 minifying이 잘못된 이동 인 경우.
TL;DR: 스타일시트를 붙여넣으세요 Toolz.dev CSS 미니파이어 그리고 주석,공백 및 중복 구문이 제거된 기능적으로 동일한 CSS 를 다시 가져옵니다 - 일반적으로 압축 전에 15–40% 더 작습니다. 브라우저에서 완전히 실행되며 무료이며 가입이 없습니다. 축소 및 gzip/Brotli 스택: 두 가지 모두 읽을 수 있는 소스를 유지하고 축소된 출력을 제공하며 축소된 파일을 직접 편집하지 마십시오. 나머지 프런트 엔드 페이로드의 경우,다음과 페어링하십시오 HTML 미니파이어 그리고 에서 다루는 이미지 작업입니다 SEO 이미지 최적화 가이드.
주요 특징
공백 및 댓글 제거
축소 절약의 대부분은 지루한 물건에서 온다: 들여 쓰기,줄 바꿈,중괄호와 콜론 주변의 공백,그리고 코멘트. 잘 주석 스타일 시트는 쉽게 20% 주석과 공백 무게로 - 그리고 그것의 모든 바이트는 브라우저가 아닌 인간에 대한 단일 규칙이 해석되는 방법에 대해 아무것도 변경하지 않습니다. 이것은 또한 원본 파일을 유지하는 이유입니다: 축소 된 출력은 컴파일 된 코드와 같은 빌드 아티팩트입니다. 설명 주석과 함께 읽을 수있는 버전 왜 그 z-index 9999가 repo에 남아 있습니까; 벗겨진 버전은 생산에 들어갑니다.
구문 수준 최적화
좋은 축소 문법 자체에 공백을 지나갑니다. Toolz.dev minifier 세 가지 안전한 구문 변환을 수행: 0px 된다 0 (길이가 0이면 단위가 필요하지 않습니다.), #ffffff 된다 #fff (쌍이 일치하면 6자리 16진수가 3으로 축소됩니다.) 각 닫는 중괄호가 떨어지기 전의 마지막 세미콜론입니다. 개별적으로 이는 단일 바이트입니다; 실제 스타일시트에 걸쳐 합산하면 1~2퍼센트가 됩니다. 결정적으로 모든 것은 CSS 사양에 의해 안전하다고 정의됩니다 margin: 0px 그리고 margin: 0 는 파서에 대한 동일한 선언입니다. 마찬가지로 중요한 것은 그것이 고의적으로 원't 터치: 그것은 떠난다 0%, 0s, 그리고 0deg 단독으로(단위는 거기에서 중요합니다), 결코 8자리를 줄이지 않습니다 #rrggbbaa 알파 헥스 (네 번째 쌍 isn't 중복), 및 유지 /*! ... */ 당신의 속성이 살아남을 수 있도록 라이센스와 배너 코멘트. 이 구속은 I & #39;ll 깊은 다이빙에 도착 구조 조정의 위험 영역과 축소 사이의 전체 차이입니다.
절감액에 대한 즉각적인 피드백
이 도구는 입력 크기 대 출력 크기를 보여 주며 추상적 인 모범 사례를 구체적인 숫자로 바꿉니다. 그 숫자는 단지 만족스럽지 않은 진단입니다. 40% + 감소는 일반적으로 파일이 주석과 관대 한 서식으로 가득 차 있음을 의미합니다 - 손으로 쓴 CSS 의 경우 정상입니다. 10% 미만의 감소는 파일이 이미 축소되었거나 꽉 생성되었음을 의미하며 최적화 노력은 다른 곳,아마도 이미지에 속합니다. I & # 39;ve watched people spend an afternoon shaving 3 KB of CSS on a page serving 2 MB of unoptimized PNGs. Measure first; 숫자는 오후가 어디로 가야하는지 알려줍니다.
클라이언트측 처리
당신의 CSS 는 브라우저 탭을 떠나지 않습니다. 오픈 소스 스타일의 경우 that's 어깨를 으쓱하지만,많은 스타일 시트는 독점적입니다 - a client's unreleased redesign,당신이 판매하는 화이트 라벨 테마,내부 디자인 시스템 코드. 아무 개인 정보 보호 정책 you've 가없는 임의의 축소 사이트에 그들을 업로드하는 것은 작업이 로컬에서 완벽하게 잘 실행 될 때 취할 수있는 이상한 위험입니다. 클라이언트 측은 또한 그것을 의미합니다's 빠른 - 아니 업로드 왕복 - 서버 기반 도구 시간 초과를 만들 수있을만큼 큰 파일에서 작동합니다.
현대 CSS를 처리합니다
사용자 정의 속성, calc() 표현식,미디어 및 컨테이너 쿼리,전처리기의 중첩 출력,벤더 접두사 - 실제 2026 스타일시트는 순진한 regex 기반 축소기가 엉망으로 만드는 구성으로 가득합니다. 내부 공백 calc() 하중을 견디는 것으로 유명합니다: calc(100% - 20px) 빼기 기호 주위에 공백이 필요하고 이를 제거하는 축소기가 표현을 깨뜨립니다. 괄호와 문자열 리터럴을 추적하는 축소기는 - 이와 같이 - 해당 공백을 그대로 두고 내부의 모든 것에서 손을 떼는 것을 알고 있습니다 url() 또는 인용 문자열. you've 가 나쁜 minifier 에 의해 불에 타면,거의 확실하게 맹목적인 regex 하나 이었다; 수정은 괄호를 존중하는 도구입니다 url()그리고 패턴 일치 대신 따옴표를 사용합니다.
CSS Minifier 를 사용하는 방법
1 단계: 축소하려는 CSS를 수집합니다
스타일시트가 어디에 있든 복사하세요 .css 파일, a <style> 블록, Sass 빌드의 출력 또는 WordPress 사용자 정의 상자로 향하는 스니펫. 프로젝트에 함께 제공되는 여러 스타일시트가 있는 경우 먼저 연결하고 결과를 축소하는 것을 고려하십시오; 하나의 컴팩트 파일에 대한 하나의 요청은 일반적으로 여러 개의 작은 파일을 능가하지만 HTTP/2 다중화는 해당 규칙을 완화했습니다.
2단계: 축소기에 붙여넣습니다
열다 CSS 미니파이어 그리고 붙여넣기. 처리는 즉시 - there's no upload step because there's no upload. 입력에 구문 오류가 있으면 축소된 출력이 예기치 않게 동작할 수 있습니다 (누락된 닫는 중괄호는 소스에서와 마찬가지로 축소된 형태로 규칙을 따르지만 발견하기가 훨씬 어렵습니다), 따라서 무언가가 꺼져 보이면 먼저 소스의 유효성을 검사합니다.
3단계: 크기를 비교합니다
이전/이후 수치에 주목하세요. 커밋 메시지에 대한 여러분의 증거이자 CSS 가 올바른 타겟이었는지에 대한 여러분의 신호입니다. 수년간의 이 작업을 통해 얻은 대략적인 개인 벤치마크로서: 손으로 쓴 CSS 는 25–40%, 프레임워크 CSS 는 15–25%, 이미 처리된 CSS 는 10% 미만입니다. 그 범위를 벗어나는 것은 다시 살펴볼 가치가 있습니다.
4단계: 축소된 버전을 배송하고 소스를 유지하세요
출력을 생산 자산에 복사합니다 .min.css 파일,theme's 는 stylesheet,customizer 분야를 편집했습니다. 그 후에 규칙 I've 는 비싼 결과를 가진 위반한 것을 보았습니다: 축소된 파일을 직접 편집하지 마십시오. 누군가가 색을 핫픽스하는 순간 styles.min.css를,소스와 아티팩트가 발산되었고,다음 적절한 빌드는 묵묵히 픽스를 되돌립니다. 소스는 편집용,축소는 배송용,그 사이의 화살표는 한 방향을 가리킵니다.
5단계: 브라우저에서 확인합니다
축소된 스타일시트로 페이지를 불러오고 중요한 뷰를 클릭합니다. 올바른 축소는 동작 보존이므로 이 검사는 2 분이 걸리고 거의 항상 통과합니다 - 하지만 "almost always"는 그 문장에서 작업을 하고 있고,2 분은 저렴한 보험입니다. 만약 무언가가 바뀌었다면,diff the rendered pages' 와 함께 CSS 텍스트 차이 도구 어떤 규칙이 엉망이 되었는지 찾으려면.
테크니컬 딥 다이브: 미니피케이션, Gzip, 브로틀리
minification 에 대한 가장 일반적인 오해는 gzip 이 중복되게 만든다는 것입니다 - " 서버는 어쨌든 모든 것을 압축하는데 왜 귀찮게합니까?" 두 개는 서로 다른 레이어에서 작동하며 차이를 이해하면 각각이 정확히 가치가 무엇인지 알려줍니다.
압축(gzip, Brotli) 전송 수준이며 되돌릴 수 있습니다. 서버는 응답을 압축하고 브라우저는 응답을 압축 해제하며 나오는 내용은 들어간 내용과 바이트 동일합니다. 모든 주석과 모든 공간을 포함합니다. 압축은 압축을 축소합니다 다운로드.
축소 는 콘텐츠 수준이며 단방향입니다. 제거되는 바이트는 다운로드되지 않으며 압축이 풀리지 않으며 - 이것이 사람들이 놓치는 부분입니다 - 구문 분석되지 않았습니다. the browser's CSS 파서는 메인 스레드에서 압축 해제된 스타일시트의 모든 문자를 걷는다. 24 KB 로 gzips 하는 214 KB 스타일시트는 여전히 모든 미캐싱 로드에서 214 KB 의 파싱 비용을 절감하는 두 가지 중 유일한 최소화이다.
그들은 또한 스택,추가적으로 아니지만. 압축은 더 나은 거의 다른 어떤 것보다 반복적 인 공백을 짜낼 때 - 즉 minification's 상대적인 절감 압축 후 축소. 손으로 쓴 스타일 시트에 대한 숫자의 일반적인 모양: minification 혼자 30%를 저장,gzip 혼자 80%를 저장,둘 다 함께 어쩌면 83–85%를 저장합니다. minification 포스트 gzip 의 한계 와이어 절감은 겸손하다; 구문 분석 시간 절감은 압축에 의해 손길이 닿지 않으며 내구성 인수입니다. 둘 다하십시오. It's 는 어느 쪽도 아니고/또는,도 아니다 비싸다.
렌더링 차단 부분이 들어오는 곳. 참조된 스타일시트 <head> 디자인에 의해 첫 번째 페인트를 차단 - 브라우저는 당신에게 스타일이없는 콘텐츠의 플래시를 표시 거부,그래서 기다립니다. 등대는 "렌더 차단 리소스를 제거," 그리고 완화 툴킷은: minify (더 작은 차단기), 압축 (더 작은 스틸), HTML 에 직접 중요한 위의 - 접이식 규칙을 인라인 (중요한 부분에 대한 전혀 요청 없음), 및 비 - 중요 CSS 를 비동기적으로로드 media="print" 온로드 스왑 또는 rel="preload" 패턴. minification 는 첫 번째 단계 it's 효과적으로 제로 구현 위험 유일한 하나 때문에.
축소화가 아닌 것. 제거하지 않습니다 사용되지 않은 규칙 - that's purging (PurgeCSS,Tailwind's JIT 접근법), 이는 마크업을 알아야 하고 클래스 이름이 동적으로 구성될 때 절대적으로 중단될 수 있습니다. 중복 선택기를 병합하거나 캐스케이드를 재구성하지 않습니다. - 일부 공격적인 최적화 프로그램 (cssnano's 고급 사전 설정,csso's 구조 조정 모드) 이 시도하고 일반적으로 작동하지만 "usually"는 공백 제거와 다른 보증입니다's "always." 캐스케이드 순서는 CSS 에서 의미론적입니다; 동일한 특이성을 가진 두 규칙은 소스 순서에 따라 해결되며 이를 재정렬하는 구조 조정자는 페이지를 변경합니다. 한 번의 잘못된 금요일 배포 후 내 정책: 항상 안전한 변환,시각적 회귀 테스트만 보고 구조 조정.
전체 프런트엔드 파이프라인에서 축소가 이루어지는 경우 웹 개발자 툴킷 가이드 영토를 지도화하고, HTML 축소기 가이드 동일한 작업의 마크업 절반, 즉 동일한 아이디어, 공백에 대한 더 까다로운 규칙을 다룹니다.
일반적인 사용 사례
워드 프레스 테마 및 플러그인
워드 프레스 사이트는 스타일 시트를 축적 다락방이 상자를 축적하는 방식 - 테마, 자식 테마, 페이지 빌더, 여섯 플러그인, 각 enqueueing CSS. 테마 또는 플러그인을 발송하는 경우, 릴리스 전에 자신의 자산을 축소하는 것은 기본적인 위생입니다; 나는 우리의 CSS가로드되는 WP 관리 유지이 배웠습니다 모든 관리자 페이지 수만 개의 사이트에 대해 낭비되는 모든 킬로바이트에 해당 설치 기반이 곱해졌습니다. 사이트를 운영하는 경우 사용자 정의기 및 하위 테마 CSS 의 축소 된 복사본은 더 무거운 캐싱 플러그인에 도달하기 전에 낮은 노력의 승리입니다.
빌드 시스템 없이 사전 배포 빌드
실제 프로젝트의 많음은 번들러가 없습니다 - 방문 페이지,레거시 앱,클라이언트 마이크로 사이트,그 마케팅 페이지 누군가가 2019 년에 구축 한 여전히 변환. 하나의 스타일 시트를 축소하는 웹 팩을 추가하는 것은 터무니없는 과잉 업로드하기 전에 브라우저 축소기를 통해 붙여 넣는 것은 십오초가 걸리고 빌드 파이프 라인이 제공 할 이익의 대부분을 포착합니다. 모든 프로젝트가 인프라를받을 자격이있는 것은 아닙니다; 모든 프로젝트는 축소 된 자산을받을 자격이 있습니다.
이메일 및 임베디드 위젯 CSS
제삼자 위젯,embeddable 기장,및 HTML 이메일은 전부 당신이 don't 통제 환경으로 CSS 를 주사한다,어디 크기 예산이 단단한지 당신이 발송하는 각 킬로바이트가 당신을 embedded 각 위치 또는 받은 편지함에 의해 다시 발송되는지 어느 것이든지. embedded 작풍을 극소화하는 것은 존중한 기술설계이다. 특히 전자 우편을 위한 1 개의 주의: 몇몇 오래된 클라이언트는 CSS 구문 분석에 진짜로 괴상하다,그래서 Outlook's 연출 엔진에 동등성 이동을 추측하기 보다는 오히려 당신의 전자 우편 시사 공구에 있는 극소화된 버전을,아주 조금 하기 때문에 시험하십시오.
역방향 디버깅: 소형화된 CSS를 아름답게 합니다
동일한 공구 종류는 다른 방향에 있는 그것의 유지를 벌n다. 너가're 생산 문제점을 검열하고 너가 있는 모두는 누군가 else's 위치에게서 단 하나 선 90 KB stylesheet 이을 때,읽을 수 있는 모양으로 그것을 다시 배열하는 것은 이해의 단계 영 이다. Minification 은 영구히 코멘트를 버린다 - 저것은 결코 돌아오지 않는다 - 그러나 구조 및 가독성은 멀리 1 개의 누르기에 이다. 나는 응답 "how 그들이 저것을 건축했다?" 다른 사람's 위치에 관하여 질문,보통 나란히 그라데이션 생성기 대답이 배경으로 밝혀지면 재현하고 싶습니다.
성과 감사
Lighthouse 실행이 렌더링 차단 CSS 또는 과도한 스타일시트 바이트를 플래그하면,축소기는 측정 장비로도 두 배가 됩니다: 문제가 되는 파일을 붙여넣고 델타 이전/이후는 문제가 형식화되는 정도와 진정으로 너무 많은 규칙이 되는 정도를 알려줍니다. 8%만 축소되는 파일은 공백 문제를 가지고 있습니다. - 범위 문제가 있으며,수정은 축소하지 않고 퍼지 또는 분할됩니다. 수정을 시작하기 전에 어떤 문제가 있는지 아는 것이 감사의 대부분입니다.
최소화 vs. 압축 vs. 퍼지
| 축소 | Gzip/Brotli 압축 | 사용되지 않은 CSS 퍼지 | |
|---|---|---|---|
| 제거하는 것 | 주석, 공백, 중복 구문 | 아무것도 없음(가역 인코딩) | 사용되지 않은 전체 규칙 |
| 일반적인 저축(단독) | 15~40% | 70~85% | 0~90%, 매우 가변적입니다 |
| 파싱 비용 절감 | 예 | 아니요 | 네, 무엇보다도 |
| 파손 위험 | 실제 파서로 0에 가깝습니다 | 제로 | 실제 - 동적 클래스 이름 |
| 그것이 달리는 곳 | 빌드 단계 또는 브라우저 도구 | 서버/CDN 구성 | 콘텐츠 분석으로 단계를 구축하세요 |
| 입양을 위한 노력 | 분 | 분(종종 이미 켜져 있음) | 시간, 그리고 지속적인 경계 |
이 테이블에서 떨어지는 전략: 서버에서 압축을 활성화하면 어떻게 든 isn & # 39;t 이미,모든 것을 제로 위험 기본값으로 축소하고,스타일 시트가 극적으로 페이지에 대한 오버 사이즈 인 경우에 대한 퍼지를 예약 - 일반적으로 프레임 워크 CSS 는 간단한 페이지에서 사용되는 각 행은 다른 레이어를 공격합니다,이는 & quot;gzip 은 minification 무의미하게 만드는 이유입니다 & quot; 관계가 잘못 가져옵니다. 전체 최적화 스택에 대한 더 많은 컨텍스트는 에 살고있다 코딩 도구 가이드.
자주 묻는 질문
CSS minifier 는 무엇을 하는가?
CSS 축소기는 브라우저 doesn't 필요 - 주석, 공백, 줄 바꿈 - 모든 문자를 제거하고 다음과 같은 안전한 구문 바로 가기를 적용합니다 0px 에 0 그리고 #ffffff 에 #fff. 출력은 기능적으로 동일한 CSS that's 일반적으로 압축 전에 15–40% 더 작습니다. It's 프레젠테이션 보존 변환: 페이지가 정확히 동일하게 렌더링되고 브라우저는 단지 더 적은 바이트를 다운로드하고 구문 분석합니다.
CSS 를 축소하면 무엇이 깨지나요?
축소기가 정규식과 패턴 일치가 아닌 CSS를 실제로 구문 분석하는 경우는 아닙니다. 공백 제거 및 구문 단축키는 CSS 사양에 의해 정의 안전합니다. 알려진 예외는 공백 내부입니다 calc()올바른 축소기가 보존하는 것입니다. 공격적인 구조조정 (병합 및 재정렬 규칙) 은 CSS 캐스케이드 순서가 의미가 있기 때문에 실제 위험이있는 다른 작업입니다. 표준 축소를 고수하고 빠른 시각적 확인으로 확인하십시오.
내 서버가 gzip 또는 Brotli 를 사용하는 경우 minification 은 여전히 가치가 있습니까?
예,대부분의 기사가 놓친 이유: 압축은 다운로드를 축소하지만 브라우저는 원래 바이트로 압축을 풀고 기본 스레드에서 모두 구문 분석해야합니다. 축소 된 바이트는 다운로드되지 않으며 구문 분석되지 않습니다. gzip 후의 와이어 절감 효과는 겸손합니다 - 몇 퍼센트 - 그러나 구문 분석 시간 절감 효과는 압축에 의해 손대지 않습니다. 두 스택은 거의 비용이 들지 않으며 다른 병목 현상을 해결하므로 둘 다 수행합니다.
내 CSS 파일은 얼마나 작아질까요?
손으로 쓴,잘 주석 처리된 스타일시트는 일반적으로 25–40%가 줄어듭니다; 프레임워크 또는 전처리기 출력은 15–25%가 줄어듭니다; 이미 최적화된 CSS 를 10% 미만으로. The Toolz.dev CSS 미니파이어 정확한 before/after 크기를 보여주고, 숫자는 진단적입니다 - 작은 감소는 파일 does't에 서식 문제가 있음을 의미하며, 성능 예산은 이미지 또는 사용되지 않는 규칙 퍼지에 더 잘 소비됩니다.
CSS 를 축소하면 SEO 및 핵심 웹 바이탈이 향상됩니까?
간접적으로 그러나 진실하게. 문서 머리에 있는 CSS 는 렌더링 차단입니다,그래서 그것의 크기는 첫번째 만족한 페인트 및 가장 큰 만족한 페인트로 직접 먹입니다 - 그리고 LCP 는 Google's 페이지 경험 신호로 인수분해하는 핵심 웹 Vitals 측정 기준입니다. minification 혼자서 won't 는 느린 페이지를 구출합니다,그러나 it's 렌더링 차단 CSS 완화 순서에 있는 가장 싼 단계 Lighthouse 는 긴요한 CSS 인라이닝과 비동기화 선적에 앞서 추천합니다.
Webpack 과 같은 빌드 도구 없이 CSS 를 축소할 수 있습니까?
예 - that's 브라우저 기반 축소기의 용도는 정확히 무엇입니까. 스타일시트를 붙여넣습니다 CSS 미니파이어, 출력을 복사하고 프로덕션 파일로 업로드하세요. 랜딩 페이지, WordPress 하위 테마, 레거시 사이트 등 번들러가 없는 프로젝트의 경우 설치하거나 유지 관리할 인프라가 없어 빌드 파이프라인의 이점을 15초 만에 대부분 포착합니다.
축소된 CSS 파일을 직접 편집해야 하나요?
아니요,그리고 이 규칙에는 이빨이 있습니다. 축소된 파일은 빌드 아티팩트입니다; 읽을 수 있는 소스는 변경 사항이 속하는 곳입니다. 누군가가 핫픽스를 하는 순간 .min.css 직접적으로,소스와 아티팩트가 발산하고,다음 재생은 조용히 수정 사항을 되돌립니다 - 명백한 원인없이 몇 주 후에 다시 나타나는 버그. 소스 편집,다시 축소,재배치. 한 방향,항상.
독점 CSS를 온라인 축소기에 붙여넣는 것이 안전한가요?
클라이언트 측에만 해당됩니다. 그만큼 Toolz.dev 미니파이어 브라우저의 모든 것을 처리합니다 - 스타일시트는 절대 업로드되지 않으며,붙여넣는 동안 네트워크 탭을 보고 확인할 수 있습니다. 서버 기반 축소기는 반드시 코드를 수신하며,이는 CSS 가 출시되지 않은 제품,NDA 아래의 클라이언트 또는 판매하는 상용 테마에 속하는 경우에 중요합니다.
