CSS 변수 6장 "반응성과 CSS 변수"🐌

사랑하는 여러분 안녕하세요 👋

오늘 새롭고 창의적인 것을 배우기🧞 바랍니다.

지난 DEV 포스팅에서는 "JavaScript로 CSS 변수를 제어하는 ​​방법"에 대해 알아보았습니다.

CSS 변수 5장 "자바스크립트로 CSS 변수 값 바꾸는 방법" 🔥️

Atul Prajapati ・ 2021년 3월 18일 ・ 2분 읽기

#css #codenewbie #todayilearned #codepen

이번 포스팅에서는 CSS 변수를 반응형으로 스마트하게 활용하는 방법에 대해 알아보도록 하겠습니다🍭

🌲그래서 웹 페이지의 반응형 동작을 어떻게 변경할 수 있는지 배우게 되어 기쁩니까?



그럼 해보자🍦

4개의 제품으로 구성된 그리드가 있고 데스크탑 화면 크기에 대해 각 행에 2개의 제품 열이 있다고 가정합니다. 그리고 우리는 모바일 화면 크기에서 단일 행에 하나의 제품 열만 표시하려고 합니다 💻

NOTE : Here I'm assuming that you have some basic knowledge about CSS grid.

CSS 그리드에 대해 아무것도 모른다면 이 무료CSS grid course by .

이것이 4개 제품 그리드의 기본 화면입니다. 🎋



이제 장치 화면에 따라 제품 그리드가 반응하도록 합니다. 하나의 열에 하나의 제품만 표시한다는 의미입니다.

그래서 우선 그리드 열과 같은 전역 변수를 선언할 것입니다.

.grid
{
     --product-column: 200px 200px;
}

그런 다음 스마트폰 화면 크기에 대해 이 미디어 쿼리를 사용해야 합니다.

@media all and (max-width: 450px)
{
    .grid
    {
        --product-column: 200px;
    }
}

🏆 타다, 모든 미디어 화면에 따른 반응형 웹페이지.



Dev post는 여기까지입니다 😉 다음 장에서는 CSS 변수의 상속 예제에 대해 알아 보겠습니다. 그러니 계속 지켜봐주세요 🔔️