# 반응형

31개의 포스트

React Native 반응형 디자인

디자이너와의 협업을 면접에서 물어보기도 한다.따라서 zeplin을 적절히 어떻게 사용할 것인지도 중요하다. 이러한 부분까지 종합적으로 기술하도록 하겠다.숫자 ⇒ 고정크기% ⇒ 화면 크기에 따른 상대적 크기 , 기준은 DOM Tree 바로 위 Parent DOMzepli

2021년 2월 22일
·
0개의 댓글

[React] React-Responsive / 반응형 웹 만들기

반응형 웹을 React로 구현할 때 쉽게 코딩하고 싶었다...!!

2021년 2월 19일
·
0개의 댓글
post-thumbnail

TIL 005 CSS_Responsive Units(반응형 단위)

물이 담긴 컵 같이 유동적으로 반응하는 반응형 웹사이트를 위한 Units를 배워보자!

2021년 2월 9일
·
0개의 댓글

@media screen

미디어 쿼리는 화면 , 테블릿 , 그리고 어플 적어도 하나 이상의 표현식으로 구성된다.컨텐츠의 변경없이 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다.화면을 그리기 전 우선적으로 데스크탑을 우선기준으로 삼을지 어플 기준으로 삼을지 정하는데 ,

2021년 2월 4일
·
0개의 댓글
post-thumbnail

[css] 반응형 레이아웃으로 화면 채우기

CSS작업을 할때 주로 픽셀(px)단위를 사용하게 된다. 하지만 반응형 레이아웃을 만들기엔 부족한 면이 있다. 가로정렬은 좀 쉬운 편이다. <div>들을 모아 하나의 컨테이너에 넣고 margin: auto;를 해주면 가운데 정렬끝! 가로방향은 컨텐츠의 어느정도

2021년 1월 18일
·
0개의 댓글
post-thumbnail

프로그래머스 웹 프론트엔드 과제 with vanillaJS 2

유저가 사용하는 디바이스의 가로 길이에 따라 검색결과의 row 당 column 갯수를 적절히 변경해주어야 합니다.992px 이하: 3개768px 이하: 2개576px 이하: 1개현재 템플릿 코드를 통해 실행시킬 경우 image들이 같은 사이즈로 질서있게 정렬이 된 모습

2021년 1월 17일
·
0개의 댓글

모바일 웹에서 hover 효과 제거하기

모바일(터치 디바이스)에서는 마우스 커서가 없기 때문에 hover 효과를 줄 수 없다.PC에서처럼 css에 hover 효과를 넣게 되면 해당 요소를 두번 터치해야 원하는 동작을 얻을 수 있다. (한번 터치하면 hover 효과만 적용되고 동작하지 않음)특히 반응형 작업을

2021년 1월 14일
·
0개의 댓글
post-thumbnail

[코드잇]웹 퍼블리싱 3

다음 내용은 코드잇 웹 퍼블리싱 토픽3 강의를 기반으로 정리한 내용입니다.

2021년 1월 12일
·
0개의 댓글
post-thumbnail

TIL | 반응형 사이트

HTML5, CSS3, 애니메이션, 애니메이션 관련, 미디어 쿼리, 레이아웃 연습레이아웃 작성body 부분에 id=wrap으로 해서 작성하고 그 아래에 5가지 요소를 class로 붙인다.해당 사이트로 접속하게 되면 side, contents 부분이 아래로 내려가 있는데

2021년 1월 10일
·
0개의 댓글
post-thumbnail

반응형 Header

css\-마우스 올리면 색깔 보이게 하는 방법 border-radius:테두리 둥글게\-기본 padding값 때문에 원하는 대로 안될 수 있으므로 padding값을 0으로 한다.\-태그 안에 태그를 지정하는 방법\-색깔만 따로 지정하는 방법

2021년 1월 3일
·
0개의 댓글

반응형 Header

html .png) -html 파일에서 css파일 연결 하는 방법 -icon 복사하는 방법 사이트에서 원하는 코드 선택한 후 복붙한다

2021년 1월 3일
·
0개의 댓글

모바일 분기

자바스크립트로 모바일 기기와 비모바일을 구분한다.

2020년 12월 24일
·
0개의 댓글

iOS에서 window.open 동작안함

iOS window.open

2020년 12월 24일
·
0개의 댓글
post-thumbnail

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -4 styled-components 에 media-query 끼얹기

목표 전 게시글에서 미디어 쿼리에 대해 알아보았습니다. 이번 게시글에서는 미디어 쿼리를 이용해 이번 프로젝트에 media-query를 얹어 반응형으로 만드는 작업을 하겠습니다. 본격 미디어 쿼리(media-query)사용하기 이 프로젝트의 목표는 모바일 사이즈가 되었을 때 로고가 Nav의 왼쪽으로 이동하고 로그인과 회원가입이 Menu에 숨겨져, 클릭하지 ...

2020년 12월 20일
·
0개의 댓글
post-thumbnail

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -3 media-query 맛보기

media query(미디어 쿼리)란? 반응형 웹을 구현하는 CSS Technique이며, 사용자의 디바이스에 따라 각각 다른 스타일시트를 적용하게 하는 것. 이번 글에서는 사용자의 환경에 따라 각각 다른 스타일시트를 적용시킬수 있는 media-query에 대해 배워

2020년 12월 19일
·
0개의 댓글
post-thumbnail

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -2(styled-components 맛보기)

Styled-components 맛보기 이 전 게시글에서 react 세팅을 다 마쳤습니다. 이제 본격적으로 styled-components를 활용해 웹 사이트 만들기에 돌입하겠습니다. 마크업 먼저 저희가 만들고자 하는 반응형 웹 사이트는 다음과 같은 구조를 갖고 있습니다. PC 환경에서는 버튼들이 한눈에 보이고, 모바일 환경에서는 contlor박스가 숨...

2020년 12월 18일
·
0개의 댓글
post-thumbnail

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -1

공부 순서 0.반응형 웹 이란? 1.react와 styled-components 사용해보기 2.media-query를 이용해 반응형 웹 적용 시켜보기 styled-components를 동적으로 사용해보기 반응형 웹이란? 세계적으로 온라인 시장이 활성화 되면서 pc중심이었던 온라인 서비스 시장이 휴대폰 태블릿 다양한 디바이스로 확대 되었습니...

2020년 12월 17일
·
0개의 댓글

TIL : media query

반응형 웹디자인을 하고자 시도해본 사람이라면 모두들 미디어 쿼리는 한 번쯤 들어봤을 것이다. 미디어 쿼리는 반응형 웹디자인의 핵심이다. 그럼 이 질문이 바로 나올 것이다.그래서 미디어 쿼리가 뭔데?미디어 쿼리는 웹 페이지 콘텐츠를 다양한 화면 크기와 해상도에 맞게 조정

2020년 11월 29일
·
0개의 댓글
post-thumbnail

React 최적화 - 반응형과 throttle

반응형을 개발할 때 보통 media tag에 조건을 달아 display: none을 적용하는 방식으로 필요없는 요소를 감춘다.갱신이 잦은 요소가 아니라면 그것으로 충분하겠지만 리랜더링이 빈번하게 일어나는 요소라면 어떨까?당연히 DOM에 존재하지 않게 하는 것이 성능 개

2020년 11월 18일
·
1개의 댓글