# media query

39개의 포스트

Media Query

미디어 쿼리는 화면 해상도, 뷰포트 너비, 단말기의 유형 등에 따라 스타일을 수정할 수 있는 CSS3의 문법 중 하나이다.

2022년 7월 19일
·
0개의 댓글
·
post-thumbnail

미디어 쿼리 - 생활코딩

screen width > 800px = @media(min-width : 800px)screen width < 800px = @media(max-width : 800px)

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

CSS _ media query

media query는 화면의 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS의 기능입니다. 특히 최근의 트랜드인 반응형 디자인의 핵심 기술이라고 할 수 있습니다. !youtubey3Zx-nVH25s!youtubeXkdUfxLI374

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

instagram 로그인 클론

2주차 첫 미션으로 인스타그램 클론코딩이 주어졌다. 깜박 하고 블로그 작성용 잘못 만든 코드를 저장해놓지 못했다. 박스 자체가 단순해서 금방 끝날 줄 알았으나 삽질의 시작이었다. 이유로는 사전스터디때 공부한 absolute와relative 때문이었다. 이 속성의 특징은

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

Media Query

미디어 쿼리는 CSS문법 중 하나이며 , 반응형 디자인을 사용할 수 있도록 도와준다.

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

미디어 쿼리

미디어 쿼리는 특정 미디어에서 어떤 css를 적용할 것인지 지정한다.기본형태 : @media only | not 미디어 유형 and 조건 \* and 조건 미디어 유형 : all, print, screen, tv, aural, braille, handheld, pr

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

CSS - 4(media query)

media query media query 는 웹 페이지의 내용이 모니터, 스마트폰 또는 태블릿과 같은 화면에서 페이지가 화면에 맞게 조정될 수 있도록 @media min-width, max-width 를 사용하여 화면 가로 사이즈에 따라 조정될 수 있도록 설정합니

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

[CSS] Media Query

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

CSS 미디어 쿼리 (반응형 페이지)

프로젝트를 배포 후 접속했을 때 모든 기능이 의도한대로 동작하게 되면 상당한 뿌듯함을 느꼈다. 추가로 컴퓨터가 아닌 iOS, Android 스마트폰에서 접속했을 때 보기 좋은 반응형 페이지를 작성하게 되면 뿌듯함이 더해졌다.부스트캠프에서 처음 프로젝트를 수행할 때는 반

2022년 2월 14일
·
0개의 댓글
·

[CSS] Media Query

알아야 할 새로운 미디어 쿼리애플에 의해 다크모드 같은 기능들이 추가되고 사용자의 시간 때나 밝고 어두움에 따른 많은 미디어쿼리들이 생겨나고 있습니다.그중에서 'light-level'은 밝기에 대한 것입니다.쉽게 말해 화면 밝기에 따라 반응하는 미디어 쿼리입니다.dim

2022년 2월 11일
·
0개의 댓글
·

React 에 Styled Component 끼얹기

기본 세팅은 역시 공식 홈페이지에 나와 있다. 그래도..! 기록을 남겨 두려고 한다. > styles/styled.d.ts

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

[CSS] 미디어 쿼리 (모바일 퍼스트 / 데스크톱 퍼스트)

반응형 웹에는 두 가지 CSS 작성 방법을 적용할 수 있다. 데스크톱이나 뷰포트가 가장 큰 디바이스를 우선적으로 작성한 뒤 축소하면서 분기점을 추가하는 방식인 데스크톱 퍼스트. 가장 작은 디바이스를 우선으로 작성한 뒤 뷰포트를 확대하면서 분기점을 추가하는 방식은 모바일

2022년 1월 5일
·
1개의 댓글
·
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

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

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

2021년 9월 28일
·
0개의 댓글
·
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개의 댓글
·