# 미디어쿼리

8개의 포스트
post-thumbnail

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

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

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

[3] 미디어쿼리

생활코딩 web2 css-12, 13번째 강좌 미디어 쿼리 쓰기와 써먹기 였다.생활코딩 특성상 정확한 개념보다는 이게 어떻게 활용되는지에 더 중점을 두어서(뒤에 있는 강좌에서 설명해주실수도 있지만), 직접 찾아보기로 했다. @는 무슨뜻인지.mediaquery의 줄임말로

2020년 12월 19일
·
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개의 댓글

#TIL (May 9th, 스물네번째 이야기)

css3 Animation 미디어쿼리, 레이아웃,css 메뉴 만들기 에 대해 알아보자

2020년 5월 9일
·
0개의 댓글
post-thumbnail

뷰포트부터 반응형 웹까지 개념정리

웹 페이지내에서 브라우저 화면상에서 실제 표시되는 영역을 뷰포트라고 합니다.뷰포트는 장치에 따라 다릅니다.모바일 화면에서는 작고, 컴퓨터 스크린에서는 보다 큰 영역을 가지고 있습니다.스마트폰과 태블릿의 전성시대 이전의 기성 웹사이트들은 오직 컴퓨터 스크린에만 맞춰서 디

2020년 3월 31일
·
2개의 댓글

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

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

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

css레이아웃 float

float이란 -- 레이아웃을 잡는데 사용하는 CSS프로퍼티 이다. float은 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다. img { float: right; margin: 0 0 lem lem; } 스크린샷 2020-01-29 오전 12.11.27.png clear -- clear...

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

[CSS] Media Query

Media Qurey란 ? Responsive Web을 구현하는 CSS Technique '특정조건(주로 화면크기)에는 어떤 CSS를 적용해라 라'는 규칙을 줄 수 있음 Media Query 세부설명 @media : 미디어 쿼리를 시작하겠다 only (device종류) : 어떤 디바이스에서 적용하는지 알려준다 and (조건 max-width 혹은 m...

2019년 8월 29일
·
1개의 댓글