드림코딩 by 엘리_Responsive Web
Responsive Web
반응형 웹, 웹개발 할때 꼭 알아야 하는 Responsive Web
예전에는 모든 웹사이트들이 데스크탑 용도로만 만들어 졌었다.
하지만 요즘 시대에는 반응형으로 웹사이트를 만들지 않으면 여러 기기에 제대로 보이지 않는다.
반응형으로 신경써서 만들면
사이즈에 따라서 content들이 유동적으로 바뀌기 때문에 사용자들이 웹사이트를 쉽게 이용 가능하다.
이때 content를 물과 같이 만들어야 한다.
Responsive Web design 이란
웹 디자인 초기에 페이지는 특정 화면 크기를 대상으로 작성되었다.
사용자가 디자이너가 예상한 것보다 크거나 작은 화면을 사용하는 경우 원치 않는 scroll에서 지나치게 긴 줄 길이 및 빈약한 공간 사용에 이르기까지 다양한 결과가 나타난다.
화면 크기가 다양해지면서 반응형 웹 디자인(RWD) 개념이 등장했다.
이는 웹 페이지가 다양한 화면 너비, 해상도 등에 맞게 레이아웃과 모양을 변경할 수 있도록 하는 것이다.
반응형 웹 디자인은 별도의 기술이 아님을 이해하는 것이 중요하다.
웹 디자인에 대한 접근 방식 또는 일련의 모범 사례를 설명하는 데 사용되는 용어로,
예시대로 장치에 응답할 수 있는 레이아웃을 만드는 데 사용된다.
Marcotte는 원래 탐색에서 이것은 유연한 그리드(플로트 사용)와 미디어 쿼리를 의미했지만
해당 기사가 작성된 후 거의 10년 동안 반응형 작업이 기본이 되었다.
최신 CSS 레이아웃 방법은 본질적으로 반응형이며 반응형 사이트를 더 쉽게 디자인할 수 있도록 웹 플랫폼에 새로운 기능이 내장되어 있다.
content를 물과같이 유동적으로 만들어서 어떤 container에 담기던 상관없이
이 content가 잘 container에 맞게 보여져야 한다는 의미 이다.
이렇게 디자인 하는것은 Responsive web design 이라고 한다.
웹사이트를 만들 때 고정된 사이즈로 레이아웃을 하는 것보다 유동적으로 레이아웃을 만드는 것이 중요하다.
요세는 px, flaot 대신에 flex box, flex grid, %, vw, vh을 이용해서 사이즈를 구성하게 된다.
이런 속성과 속성값들을 활용하면 content가 자동적으로 줄어들거나 늘어나는 것을 확인 가능하다.
하지만 어느정도 point에 도달하면 레이아웃이 재배치 되는데
이것은 CSS의 media queries를 사용한다.
Media Queries
반응형 디자인이 나올 수 있었던 것은 미디어 쿼리 때문이었다.
The Media Queries Level 3 사양은 2009년 후보 권장 사항이 되었으며,
이는 브라우저에서 구현할 준비가 된 것으로 간주되었음을 의미한다.
미디어 쿼리를 사용하면 일련의 테스트(예: 사용자의 화면이 특정 너비 또는 특정 해상도보다 큰지 여부)를 실행하고 CSS를 선택적으로 적용하여 사용자의 요구에 적절하게 페이지 스타일을 지정할 수 있다.
다양한 화면 크기에 가장 적합하도록 전체 레이아웃 또는 일부를 조정하여 style sheet 내에 여러 미디어 쿼리를 추가할 수 있다. 미디어 쿼리가 도입되고 레이아웃이 변경된 지점을 중단점이라고 합니다.
미디어 쿼리를 사용할 때 일반적인 접근 방식은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 레이아웃을 만든 다음 더 큰 화면을 확인하고 처리하기에 충분한 화면 너비가 있다는 것을 알게 되면 다중 열 레이아웃을 구현하는 것이다.
이것은 종종 모바일 퍼스트 디자인으로 설명된다.
데스크탑에는 공간이 많기 때문에 section 하나에 많은 content를 보여줄 수 있다면
태블릿과 모바일로 갈수록 보여줄 수 있는 content양이 점점 줄어든다.
그리고 조금 더 강조하고 싶은 내용들을 위로 배치해서 유동적으로 내용을 재배치해서 보여줄 수 있다.
그래서 우리가 웹사이트를 만들 때
어디 스크린 사이즈까지 데스크탑 형태로 보여주고 어디까지 태블릿 형태로 보여주며 어디까지 모바일 형태로 보여줄 것인지를 조금 더 감안해서 거기에 맞게 웹사이트를 변화해서 만들어야 한다.
예전에는 어디서 부터 어디까지가 데스크탑이고 어디서부터 어디까지가 태블릿인지 조금 더 명확하게 정해져 있었다면
요즘에는 확실히 구분짓는 포인트가 정해져 있지 않다.
하지만 굳이 나누자면 위 이미지와 같다.
위 이미지대로 나누면 무난하게 반응형으로 만들 수 있다.
Media Queries 문법
media 라고 prefix를 쓰고 screen이 최소너비가 800px 이면 container의 styling을 해주세요 라는 의미이다.
min-width 니까 적어도 screen이 800 이상일 때만 container가 50% 되게 해달라는 의미이다.
max-width 는 0~해당사이즈 까지 전체적으로 적용된다.
min-width 와 max-width
min-width와 max-width는 CSS property 이다.
이 중 min-width는 요소의 최소 너비를 설정한다.
너비 속성의 사용 값이 최소 너비에 지정된 값보다 작아지는 것을 방지한다.
(for example min-width: 800px 이라면, 800px보다 작아지는 것을 방지한다.)
element's width 는 min-width가 max-width 또는 width 보다 클 때마다 min-width 값으로 설정된다.
max-width CSS 속성은 요소의 최대 너비를 설정한다.
너비 속성의 사용 값이 max-width에 지정된 값보다 커지는 것을 방지한다.
(for example max-width: 800px 이라면, 800px보다 커지는 것을 방지한다.)
Summery :)
반응형 디자인은 보는 환경에 반응하는 사이트 또는 응용 프로그램 디자인을 말한다.
여러 CSS 및 HTML 기능과 기술을 포함하며 이제 기본적으로 웹 사이트를 구축하는 방법이다.
휴대전화로 방문하는 사이트를 생각해 보자.
데스크톱 버전이 축소되었거나 항목을 찾기 위해 옆으로 스크롤해야 하는 사이트를 만나는 것은 상당히 드문 일이다.
웹이 이러한 반응형 디자인 방식으로 이동했기 때문이다.