css4 [CSS] container-queries 목차 - 컨테이너 쿼리 vs 미디어 쿼리 - 사용법 컨테이너 쿼리 vs 미디어 쿼리 기존 반응형을 작성하려면 mdedia query로 css를 작성하게 되는데 이는 viewport 크기를 기준으로 작성하게 됩니다. container-query는 element 크기를 기준으로 작성할 수 있게 해줍니다. 사용법 사용법은 간단하게 container-type: inline-size로 컨텍스트를 지정해준다음 @container [:name] (size)로 사용하시면 됩니다. 아래 코드와 처럼 주의할 점은 container context로 지정된 컨테이너틑 css 수정할 수 없습니다. container 내부 요소들만 css를 변경시킬 수 있습니다. .post { container-type: inline-size; .. 2023. 12. 30. z-index와 Stacking context 목차 - z-index 없는 Stacking - z-index 있는 Stacking - Stacking context (중요 이것 때문에 씀) z-index 없는 Stacking z-index와 Stacking context를 알아보기 전에 z-index를 사용하지 않았을 때, element들이 어떻게 화면에 쌓이는지 알아봅시다. html 파일 안에 element들은 아래와 같은 순서로 차곡차곡 쌓입니다. 1. root element 2. position을 정의 안한 element 3. position을 정의 한 element 참고로 position를 명시 안하면 기본적으로 static이 부여됩니다. 샘플 화면을 보죠. 아래 그림을 보면 하얀 배경은 위의 규칙 1에 따라 가장 아래에 쌓여있습니다. 이후 .. 2023. 8. 16. BEM CSS BEM (Block-Element-Modifier)은 CSS를 보다 예측 가능하고 유지 보수하기 쉬운 코드로 작성하기 위한 방법론 중 하나입니다. BEM은 CSS 작성 방식에 대한 공식적인 표준은 아니지만, 많은 개발자들이 사용하고 있는 인기있는 방법론 중 하나입니다. BEM은 HTML 요소의 구조를 기반으로 CSS 클래스를 작성하는 방법입니다. BEM의 핵심 개념은 블록(Block), 요소(Element), 수정자(Modifier)입니다. 블록(Block): 웹 페이지의 모듈 또는 컴포넌트와 같이 화면에서 독립적으로 존재할 수 있는 대상을 나타냅니다. 블록은 보통 하나 이상의 요소로 구성되며, 하나 이상의 수정자를 가질 수 있습니다. 블록 클래스의 이름은 단순하고 명확해야하며, 스타일시트 전체에.. 2023. 3. 12. Critical Rendering Path CRP를 보기전에 DOM, CSSOM, Render Tree에 대해 간단히 봅시다. DOM이란? Document Object Model로 HTML 파일을 브라우저에서 읽게 되면 태그들을 분석해서 자바스크립트 Node라는 Object로 변환 됩니다. 이것을 통해 웹페이지의 요소들을 선택하고, 조작하고 변경을 할 수 있는 겁니다. CSSOM이란? DOM + CSS로 DOM과 우리가 정의한 CSS 파일을 파싱하여 합친것을 말합니다. 마지막 Render Tree란? 이렇게 만들어진 DOM과 CSSOM을 합친 것으로 최종적으로 렌더링 될 노드들만 나타나 있습니다. 만약 display:none인 아이는 여기에 포함이 되질 않습니다. 그래서 렌더링은 어떻게 되는데? 웹페이지를 요청하면 아래 그림과 같은 과정을 거쳐서.. 2023. 3. 10. 이전 1 다음
