반응형 CSS3 브라우저 성능 최적화 앞 글에서 웹 최적화를 위해 reflow와 repaint에 대한 정리를 하면서 paint과정 외에도 composite라는 과정이 더 있는 점을 알게 되었다. composite는 브라우저가 각각의 레이어를 스타일 방식에 따라서 병렬적으로 레이어로 분류되고 paint을 한 후에 모든 레이어를 합치는 과정이다. 애니메이션을 처리하기 위해서 GPU도 사용하게 된다. GPU에서 애니메이션을 처리하므로 메인 스레드는 렌더링 레이아웃에 포커스를 둘 수 있게 된다. * 브라우저가 별도의 Layer 생성할 때 조건 * - video, canvas 태그 사용 - animation 이나 transition 사용 - will-change가 opacity, left, top, bottom, right, transform - i.. 2024. 3. 30. CSS 선언 순서 레이아웃(배치)과 연관성이 많은 속성 순으로 선언하는 것이 좋다. 모질라 파이어폭스 CSS 선언 순서 1. display 2. list-style 3. position 4. float 5. clear 6. width/height 7. padding/margin 8. border/background 9. color/font 10. text-decoration 11. taxt-align/vertical-align 12. white-space 13. other text 14. content 네이버 CSS 선언 순서 1. display, visibility(표시) 2. overflow(넘침) 3. float(흐름) 4. position(위치) 5. width/height(크기) 6. padding/margin(.. 2019. 12. 27. CSS 방법론 CSS를 보다 효율적으로 작성하기 위해서 생겨났다. 1. 쉬운 유지보수 2. 코드의 재사용 3. 확장 가능 4. 직관적인 네이밍 - 클래스명 만으로도 의미를 예측 가능하도록 하자. SMACSS (Scalable and Modular Architecture for CSS) 엄격한 프레임워크 보다는 스타일 가이드에 초점을 맞추었다. 사용목적 : * CLASS 명을 통한 예측 * 재 사용 * 쉬운 유지보수 * 확장 가능 하나의 사이트에서 공통으로 적용되는 Base가 되는 css의 집합을 만든다. 예) reset.css css 이름은 콘텐츠와 직접적으로 연관되고, 이름만으로 어떤 콘텐츠인지 알 수 있도록 해야 한다. – 접두사를 사용하여 레이아웃, 모듈, 상태 여부를 알 수 있도록 : layout-, modul.. 2019. 12. 20. 이전 1 다음 728x90 반응형
