티스토리 뷰

코딩/코드스테이츠

[HTML / CSS] - 반응형 웹

김기지 2023. 3. 17. 16:55

🌐 반응형 웹

브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미
  • 하나의 소스 코드로 모든 스크린에 최적화된 웹 사이트를 구축할 수 있는 방법론
    • 디바이스 종류에 따라 웹 페이지의 크기가 자동으로 재조정됨
  • 모바일 퍼스트
    • 사용자 경험을 디자인할 때 모바일인 경우에 최우선으로 초점을 맞춰 디자인하는 것

반응형 웹의 탄생 배경

더보기

과거의 웹 사이트들은 데스크탑 컴퓨터를 통해서 이용하는 경우가 대부분이였기에 개발자들은 데스크탑에 최적화된 화면만 구성했었다.

이후 전자기기의 발전으로 태블릿, 스마트폰 등의 전자기기에서 웹에 접속할 수 있게 되어 전자기기들의 화면의 크기가 다양해져 여러 가지 버전의 웹 페이지를 만들어야 하는 경우가 발생하게 되어 반응형 웹페이지가 나오게 되었다.

반응형 웹의 특징

  • 하나의 URL을 기반으로 화면이 바뀐다.
    • 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공
    → 다양한 스크린 사이즈를 지닌 디바이스에 적응할 수 있다.
  • 장점
    • 효율적인 유지보수웹 페이지 내용을 수정해야할 때도 하나의 페이지에서만 적용해도 동일하게 반영되고, 하나의 소스 코드로 관리가 가능하기 때문에 초기 개발 비용 및 유지 관리 비용의 절감 효과를 가져올 수 있다.
    • 또한 사용자의 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있게된다.
    • 하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 콘텐츠가 최적화된다.
    • 검색엔진(SEO) 최적화에 유리하나의 URL을 기반으로 하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다.
    • 검색 결과에서 상위권에 나타나게 할 수 있다.
  • 단점
    • 사이트의 속도 저하
더보기

모바일을 전용으로 하는 사이트에 비해 무겁다.

읽어 들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문에 사이트 속도가 느려진다.

로딩의 속도나 이미지 리사이징 문제로 성능이 떨어질 수 있으며, 실제로 사용하지 않는 자원을 전송받거나 실제 사용되는 이미지보다 더 큰 이미지를 사용할 수 있다.

 

    • 웹 브라우저 호환성 문제
더보기

현존하는 웹 브라우저는 스펙 및 사양이 제각기 다르기 때문에 하나의 웹 브라우저에서는 잘 반응하던 HTML 소스가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있다.

CSS3의 특성상 인터넷 익스플로러 8 버전 이하에서는 사용이 불가능하다. 따라서 디자인의 자유도가 떨어지며, 100% 맞춤 디자인이 어렵다.

 

미디어 쿼리

미디어 쿼리는 반응형 웹 디자인의 핵심 부분으로 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있다.

📍 미디어 쿼리 적용법

  • HTML 파일 내에서 작성
    • <head>태그 안에 <link>태그를 위치
      • 미디어 속성을 사용하여 조건을 지정→ 만족할 시에만 css파일을 불러옴
    <link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">
    • <head>태그 안에서 <style>태그를 열어 미디어 쿼리를 작성
      • 미디어 속성을 사용하여 조건을 지정 → 만족할 시에만 스타일 적용
    <style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
	/* 여기 css를 작성합니다. */
</style>
  • CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성
    • 직접 미디어 쿼리를 작성하여 해당 미디어 쿼리의 조건을 만족할 때 스타일을 적용시킴

미디어 쿼리 구문

  • 미디어 쿼리의 기본적인 구조
@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

--예제
@media screen (max-width: 400px) {
    body {
        color: red;
    }
}
  • 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에게 알려줌
  • 조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 만족→ 스타일 적용 / 불만족 → 적용x
  • CSS 입력하는 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용됨

 

📍 미디어 타입

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

 

📍 조건(너비 및 높이)

가장 많이 사용하는 기능은 뷰포트 너비

min-width와 max-width, width등의 미디어 기능을 활용해 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용한다.

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

 

📍 방향성

세로 모드인지 가로 모드인지 검사하여 CSS 스타일을 주고 싶은 경우, orientation으로 검사한다.

// 장치가 가로 방향인 경우
@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

복잡한 미디어 쿼리

📍 논리곱(and) 미디어 쿼리

and연산자를 사용해 미디어 기능을 합칠 수 있음
// 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우
@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

 

📍 논리합(or) 미디어 쿼리

콤마로 분리를 한다면 미디어 쿼리의 해당 조건 중 어느 하나를 만족시킬 때 CSS 스타일을 적용
// 뷰포트의 넓이가 600px 이상이거나, 장치가 가로 방향인 경우
@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

 

📍 부정(not) 미디어 쿼리

not연산자를 사용하게 되면 미디어 쿼리의 의미를 반대로 적용
// 방향이 세로인 경우에만 텍스트가 파란색으로 적용
@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

 

728x90

'코딩 > 코드스테이츠' 카테고리의 다른 글

[React] - 번들링과 웹팩  (0) 2023.03.20
[자료구조] - Tree , Graph  (0) 2023.03.15
[자료구조] - Stack , Queue  (0) 2023.03.15
[인증 / 보안] - OAuth  (0) 2023.03.09
[인증 / 보안] - Token  (0) 2023.03.08