CSS 반응형 디자인2 CSS 쉽게 배우기 | 미디어 쿼리 (@media) CSS 미디어 쿼리 한눈에 알아보기 플렉스 박스와 그리드 레이아웃에서 계속 언급된 단어가 있죠: 반응형 디자인 근데 정확히 뭔지 설명이 잘 안된것같아서 이번편에서는 반응형 디자인과 미디어 쿼리의 연관성을 알아볼게요 웹에서 반응형 디자인의 뜻은? 스마트폰, 테블릿PC 이전에는 데스크탑PC에서 모든 웹사이트를 볼수있었는데요 시간이 지나서 스마트폰과 테블릿PC의 등장으로 이제는 웹사이트를 볼수있는 기기가 다양해졌죠 갑자기 웬 '라떼' 얘기냐? 스마트폰과 테블릿PC의 등장이 반응형 디자인에 큰 영향을 주었기 때문입니다 웹사이트를 PC에서만 볼때는 거의 모든 모니터의 크기가 똑같았기때문에 하나의 디자인만 있으면 충분했는데 스마트폰과 테블릿PC가 등장하면서 PC모니터에 맞춘 디자인이 스마트폰과 테블릿PC에는 맞지않.. 2021. 4. 6. CSS 쉽게 배우기 | Grid Layout (그리드 레이아웃) CSS 그리드 레이아웃 기초 알아보기 저번편에서 플렉스 박스에대해서 알아봤죠? 확실히 플렉스 박스를 사용하니까 반응형 디자인을 좀더 쉽고 빠르게 만들수 있습니다 그럼 그리드 레이아웃은 뭘까요? 플렉스 박스처럼 반응형 디자인을 만들때 사용하는 방법중 하나 입니다 그러면, 이 둘의 차이점은 뭘까요? 쉽게 말하자면 '차원' 입니다 플렉스 박스는 1차원적이고 그리드 레이아웃은 2차원적이라고 볼수 있겠습니다 플렉스 박스에서는 컨테이너의 반응 방향을 한 방향으로만 (가로 또는 세로) 설정할수있지만 그리드 레이아웃에서는 컨테이너의 반응 방향을 두 방향으로 (가로, 세로) 각각 따로 설정할수 있습니다 또다른 차이점은 디자인의 적용입니다 플렉스 박스의경우 대부분의 반응형 디자인이 컨테이너 요소에 적용되지만 그리드 레이아.. 2021. 3. 28. 이전 1 다음 반응형
