에브리 저장소

반응형 웹 설계 - 미디어 쿼리(Media Queries) 미디어 쿼리란 무엇인가? 미디어 쿼리는 CSS3에서 소개된 CSS 기술입니다. 미디어 쿼리는 특정 조건이 true인 경우에만 CSS 속성 블록을 적용하도록 @media 규칙을 사용합니다. 아래 코드는 브라우저 창의 width가 600px 이하인 경우, body의 배경색을 lightblue로 적용하겠다는 의미를 갖습니다. @media only screen and (max-width: 600px) { body { background-color: lightblue; } } Breakpoint 추가하기 이 전 글에서 Row와 Column을 가진 웹 페이지를 작성했습니다. 브라우저 크기에 따라 화면을 보여주지만, 아주 작은 화면에서는 레이아웃이 보기 좋지..

반응형 웹 설계 - 그리드 뷰(Grid-View) 그리드 뷰 ? 많은 웹 페이지가 그리드 뷰 기반으로 만들어져 있습니다. 그리드 뷰란 column(열)으로 나누어져 있는 웹 페이지 뷰를 의미합니다. 웹 페이지를 설계할 때, 그리드 뷰를 사용하면 HTML 요소를 배치하는 데 매우 도움이 됩니다. 반응형 그리드 뷰는 보통 12개의 column을 가지고 있고, 100%의 width를 가지며, 브라우저 창의 크기가 재조정됨에 따라, 축소되거나 확장됩니다. 반응형 그리드 뷰 만들기 첫 번째로, padding 및 border 속성이 각 요소의 전체 width, height에 포함되도록 모든 HTML 요소의 box-sizing 속성을 border-box로 설정해줍니다. const AppContainer = style..

최근 저의 관심사는 반응형 웹 익히기였습니다. 이는 8월 15일에 코드스쿼드에서 진행한 해커톤에서 시작되었는데, 반응형 웹으로 UI를 구성해볼까? 하는 생각은 했지만 반응형 웹에 필요한 미디어 쿼리 등을 React, styled-components와 함께 사용해본 적이 없었고 이를 팀원들과 진행하는 해커톤에서 하나하나 공부하며 적용하기엔 속도가 매우 더뎌질 것 같았습니다. 언젠간 반응형을 공부해야지, 하고 미뤄왔던 것이 부메랑으로 돌아오자 공부를 시작할 마음이 생겨 나름대로 공부해보았고, 이를 정리해서 남깁니다. 참고 CSS Responsive - W3Schools 반응형 웹 디자인 기본 사항 - Google developers How to create responsive UI with styled-co..