[HTML&CSS]반응형 웹
반응형 웹이란?
반응형 웹은 데스크탑에 한정되지 않고, 어떠한 기기라도 그 기기의 디바이스 환경에 맞추어 해상도나 화면이 동적으로
변환되는 기법을 말한다.
반응형 웹을 만드는 이유?
반응형 웹을 만드는 이유로는 유지보수의 간편, 검색 엔진의 최적화, 마케팅 효과가 있다.
반응형 웹의 기법
1.유동형 그리드
유동형 그리드는 고정된 단위가 아니라 상황에 맞게 변할 수 있는 em이나 % 등의 단위를 사용하는 기법을 말한다. 즉 웹브라우저 창 크기를 늘이거나 줄이면 페이지를 구성하는 요소의 크기도 그에 맞게 변한다는 뜻이다. 미디어 쿼리와 같이 이용하면 특정 범위의 스크린에 따른 고정형 그리드/반응형 그리드의 구현도 가능하다.
2.반응형 레이아웃
반응형 웹 디자인의 결과물로 볼 수 있다. 여러가지 패턴이 있으며, 일부는 HTML, CSS만으로 구현이 불가능한 것들도 있다.
3.미디어 쿼리
CSS2.1 부터 미디어 타입으로 단말기 종류에 따라 각각 다른 스타일을 적용 시키는게 가능했다.
하지만 미디어 타입만으로는 해당 기기의 특성을 정확히 판단하기가 어려워 많이 사용되지 않았다.
CSS3은 위 미디어 타입을 개선하여, 좀 더 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장하였는데 이를 미디어 쿼리라고 한다. 즉 화면의 크기와 환경 감지 및 웹사이트를 변경하는기술을 뜻한다.
미디어 쿼리 기본문법
-> @media [only또는not][미디어유형][and또는,](조건문){실행문}
only | not의 위치에는 말 그대로 only키워드 또는 not키워드가 들어가게 되는데 only키워드는 뒤의 조건 만, not키워드는 뒤의 조건을 제외한 조건을 뜻함 미디어 쿼리를 지원하지 않는 브라우저는 only키워드가 쿼리 안의 내용이 무시되어 실행 되지 않는다.
only키워드는 큰 의미는 없지만 미디어 쿼리를 지원하는 브라우저를 대상으로 할경우 적어주는 것이 좋다.
그리고 and는 and의 앞뒤 조건 둘다 맞을때 실행한다/,(콤마)는 앞뒤 조건 중 하나만 맞아도 실행함
미디어 쿼리 적용방법
-><link rel="stylesheet" href="mediaqueries.css">
<link>태그는 <head>태그 안에 위치하여 media 속성 안 조건에 만족할 때 해당 CSS파일을 불러온다.
4.뷰포트
화면을 제어하는 기술(스마트 기기는 기본 설정값이 보이는 영역으로 설정되기 때문에, 미디어 쿼리를 사용해도 스마트 기기의 실제화면
크기를 감지못하기 때문에 필요함)
뷰 포트 기본문법
-><meta name="viewport", content="width=device-width, initial-scale=1, minimium-scale=1, maximum-scale=1, user-scalable=no">
5.플렉서블박스
플렉서블박스는 가변적인 박스를 만들어서 박스의 배치 순서를 바꿔 줌으로써 박스들을 중앙으로 배치하거나, 여러개의 박스가 나란히 있을때는 가장 높은 크기의 박스에 맞춰 모든 박스의 높이를 확장하는 등 유연하게 작동하는 박스를 간단히 만들수 있다.
즉 화면에 보이는 영역들의 위치나 배치의 순서를 바꿀 수 있다.