Html/Css
반응형 웹
- 각 기기의 디스플레이 종류에 반응해 그에 맞도록 UI요소들이 배치되도록 설계하는 것이다.
- 하나의 웹 문서 또는 사이트로써 브라우저의 크기에 실시간으로 반응하여 크기에 따라 레이아웃이 변하는 웹 사이트를 의미한다.
- 최초의 반응형 웹 사이트는 2002년 아우디닷컴이며, CSS 미디어 쿼리와 같은 핵심적 기술들이 2009년이 되어서야 정착되었다.
- 모바일일 경우에 최우선으로 초점을 맞춰 디자인하는 것이다.
- 반응형 웹은 특정 장치에 최적화된 페이지로 연결되는 별도의 URL이 있다면 반응형 웹이라고 부르지 않는다.
- 특정 장치에 연결이 되는 별도의 URL은 모바일 경우 대게
m.domainname.com같은 식으로 구분한다.
장점
- 효율적인 유지보수
- 하나의 콘텐츠에 오직 하나의 HTML 소스만 있기 때문에 하나의 소스를 수정하면 모든 스크린 사이즈에 맞춰 컨텐츠가 최적화되기 때문에 유지보수가 효율적이다.
- 하나의 소스코드로 관리가 가능하기 때문에 초기 개발 비용 및 유지 관리 비용의 절감 효과를 가져올 수 있다.
- 검색엔진 최적화 유리
- 검색엔진 최적화에 유리해 검색 결과에서 상위권에 나타나게 할 수 있다.
- 반응형 웹은 하나의 URL을 기반으로 화면이 바뀌므로 PC용과 모바일용 URL가 동일하기 떄문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있다.
단점
- 사이트 속도 저하
- 반응형 웹은 모바일을 전용하는 사이트에 비해 무겁기 때문에 읽어 들여야 할 소스가 많아 불필요하게 많은 데이터를 소비하기 때문에 사이트 속도가 저하된다.
- 로딩의 속도나 이미지 리사이징의 문제로 성능이 떨어질 수 있으며, 사용하지 않은 자원을 전송받거나 실제 사용되는 이미지보다 더 큰 이미지를 사용할 수 있다.
- 웹브라우저 호환성 문제
- 현재 존재하는 웹 브라우저는 스펙 및 사양이 제각기 다르기 때문에 하나의 웹 브라우저에서는 잘 반응하던 HTML 소스가 다른 웹 브라우저에서는 디자인이 깨지는 경우가 발생할 수 있다.
- CSS3의 특성상 인터넷 익스플로러 8버전 이하에서는 사용이 불가하다.
- 이러한 문제로 디자인의 자유도가 떨이지며 100%맞춤 디자인이 어렵다는 점이 발생한다.
미디어 쿼리
적용법
- CSS파일을 HTML파일에 적용하던 것처럼
<head>태그 안에<link>태그를 위치 시킨다. - HTML 파일 내
<head>태그 안에서<style>태그를 열어 미디어 쿼리를 작성할 수도 있다.
1 2 3 4 5
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet"> <styled type="text/css" media="screen and (min-width:400px) and (max-media: 1000px)"> css를 작성한다. </style>
- CSS파일을 HTML파일에 적용하던 것처럼
CSS파일 혹은 태그 안에서 직접 미디어 쿼리 작성
- CSS파일 안 또는 태그 안에서 직접 미디어 쿼리를 작성하여 해당 미디어 쿼리의 조건을 만족할 때 스타일을 적용시키는 방법이 있다.
미디어 쿼리 구문
1
2
3
4
5
6
7
8
9
@media 미디어 타입 (조건(너비 및 높이)){
css 입력하는 부분
}
@media screen (max-width: 400px){
body{
color: red;
}
}
미디어 타입: 코드가 어떤 미디어를 위한 것인지 브라우저에 알려준다.- all : 모든 미디어 타입
- print : 프린터
- screen : 컴퓨터 화면
- speech : 스크린 리더
조건(너비 및 높이): 지정한 창의 너비나 높이를 기준으로 기준이 만족되면 스타일이 적용되고, 만족되지 않으면 적용되지 않습니다.- 반응형 디자인을 만들기 위해 가장 많이 사용하는 기능은 뷰포트 너비이며,
min-width와max-width등의 미디어 기능을 활용해 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용할 수 있다.
- 반응형 디자인을 만들기 위해 가장 많이 사용하는 기능은 뷰포트 너비이며,
css 입력하는 부분: 조건문을 통과하고, 미디어 타입이 올바른 경우 스타일이 적용된다.방향성: 세로 모드인지 가로 모드인지 검사하여 CSS 스타일을 주고 싶은 경우,orientation으로 검사할 수 있다.orientation : landscape
복잡한 미디어 쿼리
논리곱 미디어 쿼리
1 2 3 4 5
@media screen and (min-width: 400px) and (orientation: landscape) { body { color: blue; } }
논리합 미디어 쿼리
1 2 3 4 5
@media screen and (min-width: 600px), screen and (orientation: landscape) { body { color: blue; } }
부정 미디어 쿼리
1 2 3 4 5 6
@media not all and (orientation: landscape) { body { color: blue; } } // 가로가 아닌 경우에 색상이 적용된다.