# media query

28개의 포스트
post-thumbnail

미디어 쿼리 디버깅 - CSS 코드 순서에 따른 상속

내가 하려고 했던건 검색 결과 history가 밑에 표시되게 하는 기능이었다. 그래서 이런식으로 코드를 작성했다.반응형으로 만들려고 media query를 이용했다. 그러나 반응형이 동작해야하는 시점에 효과가 적용되지 않아서 개발자 도구를 살펴보니 media query

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

[CSS] 미디어 쿼리

반응형 웹을 위한 기술 중 하나인 미디어 쿼리에 대해 알아보자.

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

TIL 8 : media query와 호환성 체크

20211111 TIL 모든 기기에 내 웹사이트가 예쁘게 보이면 좋겠다!

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

TIL 7 : z-index

20211110 TIL 당신의 z-index가 동작하지 않는 이유

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

개나 소도 하는 다크모드 나도 해보기

흰 화면은 어두운 밤에 보면 눈에 너무 치명적이다!어두운 테마를 적용해 눈이 덜 아프도록 해주는 기능이 다크모드다!미디어 쿼리를 쓰면 된다!어짜피 다크 모드는 색깔 말고 바꾸는게 없으니색깔을 변수에 저장해서 값만 바꾸자!https://developer.mozi

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

[개발일지] 1일차 - media query, css grid

css의 import문은 어떻게 되고, grid-template-area는 무엇인지 공부했습니다.

2021년 9월 28일
·
1개의 댓글
post-thumbnail

반응형 웹 - 미디어쿼리

!codepenlearnwebcode/embed/bYqLJx?default-tab=html%2Cresulthtml 자동 생성시 viewport 지우지 말기css 페이지 제일 위에 폰트 넣기사이드바를 아래로 내려 좀더 보기 좋게 만들수 있다. 그런데 화면이 넒을때는 이대

2021년 8월 15일
·
0개의 댓글

#10_css 미디어쿼리

과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권6미디어쿼리210514 주제 : css css 미디어쿼리 적응형/ 반응형 홈페이지 브라우저 크기에 따라 홈페이지의 여러 오브젝트 또한 변하게 되는데, 이런 오브젝트가 변화하는 방법에 따라 홈페이지를 적응형

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

Transition / Transformation / Media query

💡 어떤 상태에서 다른 상태로 가는 변화를 애니메이션 하는 것. transition속성은 state가 없는 요소에 붙어야 한다. transition에서 변화를 준 것들은 state에 들어있는 것들이 기준이 되어 바뀐다. 다시 한번, transitiondms root에

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

[CSS #5] Media Query와 함께라면 반응형도 문제없지

Media Query는 web뿐 아니라 mobile 기기에서 접속했을 때도 문제없이 웹 사이트를 사용할 수 있는 반응형 웹(responsive web)을 만들기 위한 CSS property로 브라우저에 접속한 디바이스에 따른 사이즈에 맞게 보여준다. HTML : hea

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

반응형으로 웹 만들기

반응형 웹이 무엇인지, 어떻게 만드는지 정리😎브라우저를 사용하는 환경들은 점점 더 늘어나고 있다.. 이에 따라 프론트엔드 개발자, 웹 디자이너 분들은 골머리를 앓고 계신다고 한다(저는 아직 그 반열에 합류하지 못해 경험해보진 못했습니다 ㅠㅠ). 핸드폰, 패드, 노트북

2021년 5월 21일
·
0개의 댓글

SCSS 미디어쿼리(Media Query)

SCSS를 이용해서 간편하게 미디어 쿼리를 적용하는 방법을 알아보자먼저, SCSS는 Sass의 상위호환으로 CSS와 호환될 수 있는 문법을 갖고 있다.CSS와 문법이 좀 다른 Sass에 비해 SCSS는 거의 완벽히 CSS 문법과 호환이 되어 편리하다.SCSS를 기반으로

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

TIL 7. CSS 길이 단위와 media query

반응형 단위 (뭐라고 불러야 되지) em, %, vh, vw, 등등 media query : CSS만을 이용해서 사용자의 스크린 사이즈에 반응할 수 있는 방법. 스크린 사이즈에 따라 CSS 스타일들을 바꿀 수 있다! > 난 초보자도 아닌데, 지금도 이게 정말 멋

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

반응형 웹 디자인

https://web.dev/responsive-web-design-basics/

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

TIL. 07 CSS - 미디어 쿼리(반응형 디자인)

미디어 쿼리를 이용한 반응형 디자인 학습반응형 디자인 화면의 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하게 된다.미디어 쿼리 CSS 문법 중 하나이며, 사이트에 접속하는 장치에 따라 특정한 조건에 맞는 CSS 스타일을 사용하도록 도와주는 모듈이다.style

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

CSS Media Query와 반응형

반응형 웹사이트를 만들기 위해 필요한 지식들📁

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

TIL - css(media query)

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라

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

CSS | Responsive Web (반응형 웹)

디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미Responsive Web 을 구현하는 CSS technique특정 조건에서는 어떤 CSS 를 적용 하라는 규칙 부여 가능CSS에 @media 라는 문법으로 작성예시해석@media — media

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

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

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

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

리액트 반응형 웹 (react-responsive)

리액트 반응형 웹 react-responsive 란?

2020년 11월 23일
·
2개의 댓글