# 반응형 웹

11개의 포스트

(CSS) 반응형 웹 : 미디어 쿼리(media query)

Media Query의 지정방법 미디어 쿼리를 이용해서 CSS에 적용하는 방법은 3가지가 있습니다. 1. HTML의 HEAD의 LINK 태그에 media속성에 지정하기 2. CSS 파일내에서 @media 지정하기 3. CSS 파일내에서 import하기 미디어 쿼리 적용방법 이제 위에서 알아본 3가지 meia query의 적용방법의 형식 1. HTM...

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

[TIL] CSS: media queries

요즘에는 레이아웃(박스)를 만들 때 고정된 픽셀을 사용하지 않고FLEX grid, Flex box, %, vh, vw 를 이용하여 사이즈를 구성한다.이런속성값을 잘 활용하고 있지만주로 mobile: 320px~480pxtablet: 768px~1024pxdesktop:

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

CSS | Responsive Web (반응형 웹)

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

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

[코드잇]웹 퍼블리싱 3

다음 내용은 코드잇 웹 퍼블리싱 토픽3 강의를 기반으로 정리한 내용입니다.

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

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

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

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

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

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

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

[TIL]react, styled-component를 활용해 반응형 웹사이트 만들기 -2(styled-components 맛보기)

Styled-components 맛보기 이 전 게시글에서 react 세팅을 다 마쳤습니다. 이제 본격적으로 styled-components를 활용해 웹 사이트 만들기에 돌입하겠습니다. 마크업 먼저 저희가 만들고자 하는 반응형 웹 사이트는 다음과 같은 구조를 갖고 있습니다. PC 환경에서는 버튼들이 한눈에 보이고, 모바일 환경에서는 contlor박스가 숨...

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

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

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

2020년 11월 23일
·
1개의 댓글
post-thumbnail

[HTML, CSS, Javascript]개인 포트폴리오 사이트 만들기 1 - UI 디자인

개발자로 취업하기 위해선 깃허브와 기술블로그 정도만 있어도 된다고는 하지만 욕심이 나서 개인 포폴 사이트를 반응형으로 만들어 보려고 한다.

2020년 11월 4일
·
1개의 댓글
post-thumbnail

모바일 우선 반응형 웹 디자인

모바일 우선 반응형 웹 디자인을 위해 알아야 할 개념 총 정리

2020년 7월 2일
·
0개의 댓글