[HTML/CSS] 반응형 웹

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다

반응형 웹

유튜브에 들어가서 화면의 크기를 줄였다 늘렸다하면 한 화면에 보이는 영상의 개수가 늘었다 줄었다 합니다.

이처럼, 여러 장치의 다양한 특징에 대응하는 하나의 웹 문서 또는 사이트로써 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미합니다. 즉, 하나의 소스코드로 모든 스크린에 최적화된 앱 사이트를 구축할 수 있는 방법론입니다.

위에 설명에도 써있지만, 하나의 웹 문서에서 동작이 됩니다.

instagram은 웹 모바일 둘다 instagram.com이라는 동일한 URL을 사용합니다.

하지만 naver는 웹에서는 naver.com이지만, 모바일에서는 m.naver.com입니다.

이처럼 별도의 URL이 있다면 반응형 웹이라고 부르지 않습니다

효율적인 유지 보수

검색엔진 최정화 유리

검색엔진 최적화(SEO)에 유리해 검색 결과에서 상위권에 나타나게 할 수 있습니다. 반응형 웹은 하나의 URL을 기반으로 화면이 바뀌므로 PC용 URL과 모바일용 URL이 동일합니다. 따라서 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있습니다.

사이트 속도 저하

그러나 이런 모바일 환경에서도 적응하게끔 만들어진 반응형 웹은 모바일을 전용으로 하는 사이트에 비해 무겁습니다. 반응형 웹 디자인은 읽어들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문에 이는 사이트 속도와 직결이 됩니다. 로딩의 속도나 이미지 리사이징의 문제로 성능이 떨어질 수 있으며, 실제로 사용하지 않은 자원을 전송 받거나 실제 사용되는 이미지보다 더 큰 이미지를 사용할 수 있습니다.

웹 브라우저 화환성 문제

웹 브라우저의 호환성의 문제가 있을 수 있습니다. 현재 존재하는 웹 브라우저는 스펙 및 사양이 제각기 다르기 때문에 하나의 웹 브라우저에서는 잘 반응하던 HTML 소스가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있습니다. 또한 CSS3의 특성상 인터넷 익스플로러(IE) 8 버전 이하에서는 사용이 불가능 해집니다. 이런 문제 때문에 디자인의 자유도가 떨어지며, 100% 맞춤 디자인이 어렵다는 점이 발생합니다.

미디어 쿼리는 반응형 웹디자인의 핵심적인 부분입니다.

뷰 포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문입니다.

링크로 적용시키는 방법으로 link 태그 방법과 style 태그 방법이 있습니다.

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

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

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

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

미디어 쿼리의 기본 구조는 다음과 같습니다

반응형 디자인을 만들기 위해 가장 많이 사용하는 기능은 뷰포트 너비 이며, min-width와 max-width, width 등의 미디어 기능을 활용해 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용시킬 수 있다.

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

orientation을 통해 세로모드인지 가로모드인지 확인 할 수 있습니다.

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

and, or, not연산자를 통해 좀더 복잡한 미디어 쿼리도 구현 가능합니다.

/* 논리곱 쿼리 */
@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

/* 논리합 쿼리 */
@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

/*부정 미디어 쿼리*/
@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}