에브리 저장소

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

리액트 스터디에 참석하며 간단하게 타자연습 앱을 개발했다. https://fed-gren.github.io/Typing-app/ 아직 완전하게 끝낸 건 아니지만 1차 목표까지 기능 구현을 한 시점에서 후기를 작성해본다. 내가 만든 타자연습의 (나름의) 특징이라면 사용자가 직접 연습할 텍스트를 입력한다는 점인데, 평소 다른 타자연습 사이트에서 내가 연습하고자 하는 글을 연습할 수 없는 점이 약간 아쉬웠기 때문에 이 같은 기능을 넣었다. 리액트 공부를 하며 중간중간 무언가를 만들어보고 싶었고 JavaScript30에서 실습한 내용 또한 활용하고 싶었는데 짧은 기간이지만 내가 원하는 걸 만들어보며 복습도 하고 재밌었다. 아직 문제점 및 구현이 안된 기능은 많다. (한글 미지원, 타자 속도 미측정, 탭 불가 등..

[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 저장소를 생성했..