# MediaQuery

19개의 포스트

Scss에서 medaiQuery 사용하기

Scss mediaQuery

2022년 6월 6일
·
0개의 댓글

Flutter MediaQuery

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

2022년 5월 30일
·
1개의 댓글
post-thumbnail

[React] React에 MediaQuery 적용하기

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

2022년 5월 26일
·
0개의 댓글
post-thumbnail

[Emotion] MediaQuery

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

2022년 5월 13일
·
0개의 댓글
post-thumbnail

0426 개발일지

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

2022년 4월 26일
·
0개의 댓글
post-thumbnail

0425 개발일지

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

2022년 4월 25일
·
0개의 댓글
post-thumbnail

개발자는 어떤 사람이야?

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

2022년 3월 5일
·
0개의 댓글
post-thumbnail

[Project] Webucks Clone Coding #6 [커피 리스트 페이지 기능과 반응형 레이아웃 구현]

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

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

CSS 박스모델, MediaQuery, grid

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

2021년 9월 24일
·
0개의 댓글
post-thumbnail

Flutter - #38. MediaQuery

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

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

[대구AI스쿨] 21.07.13 개발일지

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

2021년 7월 13일
·
0개의 댓글
post-thumbnail

[대구AI스쿨] 21.07.12 개발일지

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

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

[대구AI스쿨] 21.07.09 개발일지

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

2021년 7월 9일
·
0개의 댓글
post-thumbnail

[CSS] mediaquery 대응 navbar 만들기

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

2021년 5월 8일
·
0개의 댓글
post-thumbnail

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

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

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

Responsive Web Design) Media query

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

2020년 6월 23일
·
0개의 댓글
post-thumbnail

포트폴리오(02 : 반응형 웹사이트 구현)

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

2020년 4월 28일
·
0개의 댓글

반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport

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

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