S4) Unit 2. [HTML/CSS] 반응형 웹

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
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

Tags more

Archives

Today

Total

관리 메뉴

Jieunny의 블로그

S4) Unit 2. [HTML/CSS] 반응형 웹 본문

CodeStates/learning contents

S4) Unit 2. [HTML/CSS] 반응형 웹

Jieunny 2023. 3. 16. 14:00

📣 반응형 웹 이란?

𝟭. 반응형 웹

✔️ 기기의 디스플레이 종류에 반응해 그에 맞도록 적절히 UI 요소들이 배치되도록 설계된 웹 브라우저

➰ 모바일 퍼스트 : UX를 디자인할 때 모바일일 경우에 최우선으로 초점을 맞춰 디자인 하는 것

➰ 현재 데스크탑보다 모바일 유저가 공유하는 정보가 많기 때문에 모바일 유저를 겨냥한 서비스가 많아지고 있다.

𝟮. 반응형 웹의 특징

1️⃣ 하나의 URL을 기반으로 화면이 바뀐다.

✔️ m.domainname.com 처럼 앞에 모바일을 의미하는 'm'이 붙은 경우 특정 장치에 연결되는 별도의 URL이 존재하는 것이므로 반응형 웹이라고 부르지 않는다.

2️⃣ 효율적인 유지보수

✔️ 하나의 콘텐츠에 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 컨텐츠가 최적화된다.

➰ 하나의 소스코드로 관리 가능하기 때문에 초기 개발 비용과 유지 관리 비용의 절감 효과가 있다.

➰ 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수 있다.

3️⃣ 검색엔진(SEO) 최적화 유리

✔️ 검색 결과에서 상위권에 나타나게 할 수 있다.

➰ PC용 URL과 모바일용 URL이 동일하기 때문에 컴색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리 가능하다.

4️⃣ 사이트의 속도 저하

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

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

➰ 실제로 사용하지 않은 자원을 전송받거나 실제 사용되는 이미지보다 더 큰 이미지를 사용할 수도 있다.

5️⃣ 웹브라우저 호환성 문제

✔️ 현재 존재하는 웹 브라우저는 스펙 및 사양이 각기 다르기 때문에 잘 작동하던 HTML 소스가 다른 웹 브라우저에서는 깨질 수 있다.

➰ 이 때문에 디자인의 자유도가 떨어지며 100% 맞춤 디자인이 어렵다.

📣 미디어 쿼리란?

𝟭. 미디어 쿼리

✔️ 미디어 타입을 개선하여 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있는 기법

➰ 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문에 반응형 웹 디자인의 핵심 부분이다.

𝟮. 미디어 쿼리 적용법

1️⃣ 미디어 속성 내 해당 조건을 만족할 때만 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>

𝟯. 미디어 쿼리 구문

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

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

✔️ 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려준다.

➰ all : 모든 미디어 타입

➰ print : 프린터

➰ screen : 컴퓨터 화면(화면을 출력하는 디스플레이가 있는 미디어)

➰ speech : 스크린 리더

✔️ 조건(너비 및 높이) : 지정한 창의 너비나 높이를 기준으로 만족되면 스타일이 적용되고, 아니면 적용되지 않는다.

➰ min-width, max-width, width 등의 미디어 기능을 활용해 뷰포트의 크기에 따라 CSS를 적용할 수 있다.

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

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

✔️ CSS 입력 부분 : 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용된다.

✔️ 방향성 : 세로 모드인지 가로 모드인지 검사하고 싶은 경우, orientation으로 검사할 수 있다.

➰ portrait : 세로

➰ landscape : 가로

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

𝟰. 복잡한 미디어 쿼리

1️⃣ 논리곱(and) 미디어 쿼리

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

2️⃣ 논리합(or) 미디어 쿼리

@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

3️⃣ 부정(not) 미디어 쿼리

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

저작자표시

'CodeStates > learning contents' 카테고리의 다른 글

S4) Unit 3. [React] 번들링과 웹팩 (0)	2023.03.20
S4) Unit 2. [HTML/CSS] CSS 애니메이션 & Canvas (0)	2023.03.17
S4) Unit 2. [HTML/CSS] 브라우저 &렌더링 (0)	2023.03.16
S4) Unit 1. [자료구조/ 알고리즘] Tree & Graph (0)	2023.03.15
S4) Unit 1. [자료구조/ 알고리즘] 자료구조 & Stack & Queue (2)	2023.03.14

'CodeStates/learning contents' Related Articles

Jieunny의 블로그

S4) Unit 2. [HTML/CSS] 반응형 웹 본문

S4) Unit 2. [HTML/CSS] 반응형 웹

📣 반응형 웹 이란?

𝟭. 반응형 웹

𝟮. 반응형 웹의 특징

📣 미디어 쿼리란?

𝟭. 미디어 쿼리

𝟮. 미디어 쿼리 적용법

𝟯. 미디어 쿼리 구문

𝟰. 복잡한 미디어 쿼리

'CodeStates > learning contents' 카테고리의 다른 글

티스토리툴바

S4) Unit 2. [HTML/CSS] 반응형 웹 본문

S4) Unit 2. [HTML/CSS] 반응형 웹

📣 미디어 쿼리란?