# MediaQuery

tjswo

Scss mediaQuery

hpodong

디바이스 크기를 잡아주는 class MediaQuery

bomida

들어가기에 앞서 이 글은 Styled components의 themePorvider에 대한 기본적인 지식이 있어야하며, react-responsive 라이브러리 사용법에 대한 내용은 다루지 않습니다. 반응형 웹 (Responsive Web) 태블릿, PC, 모바일 등

nej1044

Emotion에서 미디어 쿼리를 사용하는 것은 일반 css에서 사용하는 것과 같습니다.미디어 쿼리는 반응형 앱을 만드는 데 유용할 수 있지만 반복해서 작성해주면 각 스타일마다 다르게 적용될 수도 있고 비효율적입니다. 사용할 때마다 다시 작성하는 대신 상수로 옮겨 사용하

lee_yesol421

0426 포트폴리오 반응형웹오늘은 예전에 만들었던 메인 포트폴리오 페이지에 모바일 반응형 부분을 추가했다일부 position을 건드려 3차원으로 만들었던 요소들이 내 마음대로 배치되지 않아서 약간 헤맸다.메인 css 파일인 style.css에서 main태그 디자인 수정

lee_yesol421

0425 ganafont_webpage처음에 기존 object를 인수로 받아서 내부 변수에 저장한 후 value값을 랜덤으로 변경한 후, 내부 변수의 object를 리턴하는 함수를 만들었다. 근데 분명 다른 변수에 담아서 사용했는데도 기존 object가 변하는 문제가

hyyejin311

3월이 되고 이제 나의 학원 과정도 거의 막바지에 다다르고 있다.처음 두 달은 거의 허덕이며 보냈던 것 같고 ^ㅠ^세 달 네 달이 지나 5개월쯤 되자 html 과 css, mediaquery 를 사용해 사이트를 구현해보기도 한다.시각적으로 무언가 만들어지고 내가 입력해

daymoon_

📲 CSS : 뷰포트와 미디어 쿼리

peaceminusone

HTML 태그를 적절하게 사용하여 페이지 레이아웃을 스스로 구현할 수 있다.CSS 기초 개념을 활용하여 원하는 디자인을 요소에 적용할 수 있다. 개발자 도구를 활용하여 실제 페이지 레이아웃의 구성과 적용된 스타일을 확인할 수 있고 필요한 정보를 얻을 수있다.로그인 기능

hoje15v

style 태그 사용style 속성 쓰기 ex) 글자 색을 바꾸고 싶을 때 head내에 css를 도입할 수 있다.위의 태그 의미 : a 즉 링크가 걸려있는 모든 글자는 검정으로 해라 중복된 코드를 단하나의 코드로 표현한다. 즉 중복의 제거 효과color:black

sharveka_11

Flutter 일기참고 1: https://api.flutter.dev/flutter/widgets/MediaQuery-class.html오늘 배워볼 것은 MediaQuery기기의 화면 너비나 높이를 가져오거나, 화면 방향 정보(가로/세로)를 얻을 때 주로 쓴

rim_chaeeop

KidsGao_intro※ 사이트 – http://sisikiller.dothome.co.kr/● 원페이지 사이트Git 링크.KidsGao● Default CSS 설정하기① html과 body에 margin과 padding값을 0으로 설정② CSS에서 body

rim_chaeeop

※ flexbox.help 사이트를 이용하여 미디어 쿼리 작업 수행pr1_menu_pcpr1_menu_mobileGit 링크.MediaQuery_practice● header(3차원)와 main(2차원) 일 때, 레이어가 겹치는 현상 발생3차원이 2차원을 덮어 버림해결

rim_chaeeop

▶ 반응형, 적응형 웹사이트를 만들 때 사용▶ 제작한 웹사이트를 모바일, 태블릿 환경에 맞게 자연스러운 변화를 줄 때 사용하는 CSS 코드● 적응형, 반응형 웹사이트의 이해를 돕기 위한 사이트→ https://blog.teamtreehouse.com/which

hikoand

웹페이지를 만들때 첫번째 고비는 GNB 즉 navbar를 만드는 것이고 두번째 고비는 mediaquery를 이용해 모바일 기기에 대응하는 레이아웃으로 만드는 것이다.

rjsdnql123

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

claire-euni

css 코드 내부에서 media query 구현하기 위한 문법@media : media 를 시작한다는 의미only screen : 어떤 디바이스에 적용할지 선택 screen/ print/ all 등 and (max-width:480px;) : 전체 크기가 480

qksud14

포트폴리오를 반응형레이아웃을 적용해서 만들고 싶었고,어떻게 구현을 할지 검색중에 여러가지 방법들이 나와서 정리해본다.Flexbox 활용design framework 활용(bootstrap, material uimedia query library(react-respons

bungouk6829

반응형 웹(Responsible Web)이란 디바이스(전자기기)별로 각각 레이아웃(grid)가 달라지는 웹이다.쉽게 설명하자면 화면의 크기 마다 레이아웃이 달라진다.반응형 웹에서는 필수인 미디어쿼리는, 화면크기 마다 각각 다르게 CSS를 적용하는 것이다.화면 사이즈를