프론트엔드/CSS2 [CSS] CSS 최적화 기법 기법 1. Remove unused CSS 사용하지 않는 CSS 제거 2. Eliminate render-blocking resources 렌더 차단 리소스 제거 1. Remove unused CSS CSS = 렌더 차단 리소스 브라우저가 CSS 파일을 해석하는 동안 웹 페이지 렌더링은 차단된다. 즉, CSS는 페이지 렌더링을 차단하는 리소스임. 사용하지 않는 CSS가 많을 수록 브라우저가 스타일을 계산하는데 잠재적으로 더 많은 시간을 소비한다. Lighthouse 미사용 CSS가 포함된 2KB 이상의 파일을 검출해서 오류로 보고한다. Remove unused CSS 라는 항목을 클릭해서 보면 된다. # 주의사항 - font-face 규칙을 사용하지 않는 CSS로 보고하는 오류가 있음 (사용하는데 미사용.. 2023. 2. 21. [CSS] 형제 요소가 width: 100%일 때 버튼 텍스트가 줄바꿈 되는 문제 Intro 인풋 + 버튼이 row 방향으로 나열되어 있는 UI를 구현하고 싶다. 이를 구현하기 위해 아래처럼 css를 적용했다. - 요소를 감싼 div에 display: flex를 적용 - 인풋 width : 100% - 버튼 padding: 0 40px 문제 그런데, 버튼에 padding을 줘서 버튼 자체의 width는 늘어나는데 내부 텍스트의 width가 늘어나지 않고 줄 바꿈이 되어버리는 문제가 생겼다. 버튼에 직접 width를 주는 방법도 있지만, 직접 지정하지 않고 padding으로 해결하고 싶었다. 해결 white-space : nowrap 을 적용해서 해결했다. white-space는 요소의 공백을 어떻게 처리할지 정의하는데, nowrap은 normal처럼 연속된 공백과 줄바꿈을 하나의 공백.. 2023. 1. 20. 이전 1 다음
