반응형 웹
1.[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -1
공부 순서 0.반응형 웹 이란? 1.react와 styled-components 사용해보기 2.media-query를 이용해 반응형 웹 적용 시켜보기 styled-components를 동적으로 사용해보기 반응형 웹이란? 세계적으로 온라인 시장이 활성화 되면서 pc중심이었던 온라인 서비스 시장이 휴대폰 태블릿 다양한 디바이스로 확대 되었습니...
2.[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -2(styled-components 맛보기)
Styled-components 맛보기 이 전 게시글에서 react 세팅을 다 마쳤습니다. 이제 본격적으로 styled-components를 활용해 웹 사이트 만들기에 돌입하겠습니다. 마크업 먼저 저희가 만들고자 하는 반응형 웹 사이트는 다음과 같은 구조를 갖고 있습니다. PC 환경에서는 버튼들이 한눈에 보이고, 모바일 환경에서는 contlor박스가 숨...
3.[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -3 media-query 맛보기
media query(미디어 쿼리)란? 반응형 웹을 구현하는 CSS Technique이며, 사용자의 디바이스에 따라 각각 다른 스타일시트를 적용하게 하는 것. 이번 글에서는 사용자의 환경에 따라 각각 다른 스타일시트를 적용시킬수 있는 media-query에 대해 배워
4.[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -4 styled-components 에 media-query 끼얹기
목표 전 게시글에서 미디어 쿼리에 대해 알아보았습니다. 이번 게시글에서는 미디어 쿼리를 이용해 이번 프로젝트에 media-query를 얹어 반응형으로 만드는 작업을 하겠습니다. 본격 미디어 쿼리(media-query)사용하기 이 프로젝트의 목표는 모바일 사이즈가 되었을 때 로고가 Nav의 왼쪽으로 이동하고 로그인과 회원가입이 Menu에 숨겨져, 클릭하지 ...
