에브리 저장소

반응형 웹 설계 - 미디어 쿼리(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..

[React] create-react-app github pages를 통해 배포하는 방법 오늘 포스팅 내용은 Create-React-App으로 개발한 앱을 github pages를 활용해 배포하는 방법입니다. 프로젝트 개발을 완료한 상태라는 가정 하에 터미널에서 React앱 root폴더로 이동해 yarn build를 입력합니다. 프로젝트 폴더 내부에 build 폴더가 생성됩니다. 완료 후 메시지를 보면 package.json에 아래와 같이 작성하라고 되어있습니다. "homepage" : "http://myname.github.io/myapp", 여기서 myname은 github 닉네임을 작성하면 되고, myapp에는 저장소명을 입력하시면 됩니다.저는 테스트를 위해 아래와 같이 github 저장소를 생성했..