미디어 쿼리 사용하여 반응형 웹 만들기

HTML, CSS

미디어 쿼리 사용하여 반응형 웹 만들기

mellomello.made 2022. 7. 22. 00:10

🕊 반응형 웹이란?

반응형 웹 디자인이란 여러 장치의 다양한 특성에 대응하는 하나의 웹 문서 또는 사이트로써,
브라우저의 크기(스크린의 크기, 디바이스의 종류)에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다.

즉, 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론, 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정되는 것이다.
반응형 웹은 하나의 URL을 기반으로 화면이 바뀐다. 반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응할 수 있다.
특정 장치에 연결이 되는 별도의 URL은 모바일의 경우 대개 m.domainname.com 같은 식으로, 도메인 앞에 모바일을 의미하는 “m”을 붙임으로써 구분합니다. 특정 장치에 연결이 되는 별도의 URL과 화면이 구비된 웹 사이트의 경우, 데스크탑 버전의 웹 사이트를 띄운 브라우저를 줄였을 때 반응하지 않는다.

🕊 미디어쿼리

미디어 쿼리는 반응형 웹 디자인의 핵심 부분다.
뷰포트(브라우저 창)의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다.

미디어 쿼리 적용법

1. CSS 파일을 HTML 파일에 적용하던 것처럼 <head>태그 안에 <link>태그를 위치 시킨다.

다른 css 파일을 적용할 때와 다른 점은 미디어 속성을 사용하여 조건을 지정한다는 점이다.

미디어 속성 내 해당 조건을 만족할 때에만 해당 css 파일을 불러오게 된다.

<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">

2. HTML 파일 내 <head>태그 안에서 <style>태그를 열어 미디어 쿼리를 작성.

이 방법도 미디어 속성 내 해당 조건을 만족할 때에만 해당 스타일을 적용하게 된다.

<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
	/* 여기 css를 작성합니다. */
</style>

3. CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

--예제
@media screen (max-width: 400px) {
    body {
			color: red;
		}
}

미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려준다.
조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않는다.
CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용 된다.

미디어 타입(Media Type)

all : 모든 미디어 타입
print : 프린터
screen : 컴퓨터 화면
speech : 스크린 리더

조건(너비 및 높이)

width(혹은 height)는 브라우저의 창 크기에 사용할 수 있다.

@media screen and (width: 600px) {
	body {
		color : red;
	}
}

min- 혹은 max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다.

//뷰포트가 400px 보다 좁은 경우 색을 파란색으로 만들기 
@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

🕊 완성작

🕊 참조 사이트

http://www.lenclume.co.uk

1. MainArea 스타일드 컴포넌트

1. background-image URL은 이미지 주소 복사해서 넣기. (이미지 참조 : unsplash)

2. 사진 가운데 정렬

display: flex;

justify-content: center;

align-items: center;

3. 속성을 변경할 때 애니메이션 속도를 조절하는 방법

transition: 0.5s;

4. div.text

div의 text 변경. MainArea에 적용된다.

5. @media only screen and (max-width: ${BREAK_POINT_TABLET}px)

뷰포트의 너비가 최대 768 픽셀이면 쿼리 안의 CSS 스타일이 적용 된다.

6. 위의 div.text 를 쿼리 안에 넣어준다.

Render.js

import styled from "styled-components";
import "../App.css";

const BREAK_POINT_TABLET = 768;

const MainArea = styled.div`
  background-image: url(https://images.unsplash.com/photo-1610641818989-c2051b5e2cfd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2670&q=80);
  background-repeat: no-repeat;
  background-position: center;

  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 864px;
  height: 100vh;
  width: 100%;
  transition: 0.5s;

  div.text {
    p {
      transition: 0.5s;
      color: white;
      font-size: 150px;
    }
  }

  @media only screen and (max-width: ${BREAK_POINT_TABLET}px) {
    background-image: url(https://images.unsplash.com/photo-1551918120-9739cb430c6d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80);
    transition: 0.5s;
    div.text {
      p {
        transition: 0.5s;
        color: white;
        font-size: 60px;
      }
    }
  }
`;

const Render = () => {
  return (
    <>
      <MainArea>
        <div className="text">
          <p>Enjoy Hawaii</p>
        </div>
      </MainArea>
    </>
  );
};

export default Render;

2. App.css

1. 구글 폰트에서 import하기

+ 버튼으로 폰트 선택한 뒤 Use on the web @import 라디오 버튼 클릭. 스타일 태그 안에 있는 구문 css 파일 상단에 입력한다.

CSS rules to specify families 에서 font-family: 'Satisfy' 를 * 전체 선택자에 입력한다.

App.css

@import url("https://fonts.googleapis.com/css2?family=Concert+One&family=Satisfy&display=swap");

* {
  font-family: "Satisfy";
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style: none;
  text-decoration: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
*::-webkit-scrollbar {
  display: none;
}

body {
  height: 100%;
  overflow: scroll;
}

뷰포트에 따라 이미지 사이즈가 바뀌는 것 만으로도 안정감있는 반응형 웹 페이지가 됐다.

레퍼런스 사이트에서 배경 트렌지션 하는게 간단해보여 도전했는데 아직 적용법이 어색해서 은근히 시간이 많이 걸렸다.

코드를 새로 작성하는것도 어렵지만 스프린트 코드를 리팩토링하면서 적재적소에 넣고 태그 지우면서 하는 스킬이 더 필요하다.

다음 시간에는 조금 더 디벨롭해 캔버스 태그를 이용해 완성도 높은 반응형 웹 페이지를 구현해봐야겠다.

저작자표시 비영리 변경금지 (새창열림)

'HTML, CSS' 카테고리의 다른 글

FrontEnd 기술 면접 질문 리스트 (0)	2022.10.26
HTML/CSS 심화 브라우저 (0)	2022.07.21
HTML 태그 구별하기 (0)	2022.05.05
HTML 시맨틱 태그, 중요한 태그들 모음 (0)	2022.05.04
Visual Studio Code HTML 문서 작성하면서 모양 확인하기 좋은 확장도구 (0)	2022.04.29

현재글미디어 쿼리 사용하여 반응형 웹 만들기

프론트엔드 개발자가 되기 위한 과정을 기록합니다.

til, 알고리즘, js, 회고, 프로그래머스, TodayILearned, 컴퓨터자료구조, 힙, 피그마, 깃허브, 리액트, 피그마클론, 순수함수, JavaScript, vscode, 코드스테이츠, REACT, 자바스크립트, 자료구조, UIUX,

Today :
Yesterday :

jyoon dev log

미디어 쿼리 사용하여 반응형 웹 만들기

🕊 반응형 웹이란?

🕊 미디어쿼리

미디어 쿼리 적용법

1. CSS 파일을 HTML 파일에 적용하던 것처럼 <head>태그 안에 <link>태그를 위치 시킨다.

2. HTML 파일 내 <head>태그 안에서 <style>태그를 열어 미디어 쿼리를 작성.

3. CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

🕊 완성작

🕊 참조 사이트

'HTML, CSS' 카테고리의 다른 글

'HTML, CSS'의 다른글

티스토리툴바

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

미디어 쿼리 사용하여 반응형 웹 만들기

🕊 반응형 웹이란?

🕊 미디어쿼리

미디어 쿼리 적용법

1. CSS 파일을 HTML 파일에 적용하던 것처럼 <head>태그 안에 <link>태그를 위치 시킨다.

2. HTML 파일 내 <head>태그 안에서 <style>태그를 열어 미디어 쿼리를 작성.

3. CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성

🕊 완성작

🕊 참조 사이트

'HTML, CSS' 카테고리의 다른 글

'HTML, CSS'의 다른글

관련글

티스토리툴바