프론트엔드/CSS3 [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. 이전 1 다음
