*사담 타임) 토이프로젝트에서 바닐라 자바스크립트만 이용해서 반응형 웹을 만들어보기로 했다.
반응형 웹은 프론트엔드 개발자라면 꼭! 알아야 할 기술이라고 생각해서, 붙캠 외에 강의를 추가로 들으면서 반응형 웹을 구현하는 방법에 대해서 공부하고 이를 토이프로젝트에 직접 적용해보기로 함! 카테고리를 만들어 공부 + 토이프로젝트 여정을 기록할 예정!! 새로운 걸 배우는건 언제나 신나 ㅎㅁㅎ
반응형 웹 디자인 (Responsive web design, RWD)이란?
다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해가며 반응하는 웹문서 또는 이를 위해 사용하는 기법
-> 웹을 PC용 / 모바일용으로 각각 별개로 개발하지 않고, 하나의 공용 웹을 만들어 다양한 디바이스에 대응할 수 있음.
-> 동일한 URL을 사용하게 되어, 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있음.
-> 웹 내용을 수정할 경우, 하나의 페이지만 수정하면 다양한 디바이스에 동일하게 반영됨. 개꿀?
<-> 적응형 웹 (adaptive web): 디바이스별 별도의 웹사이트 제작
반응형 웹의 핵심 기술
: 가변 그리드 (fluid grid), 유연한 이미지 (flexible images), 미디어 쿼리 (media query)
* 최초의 반응형 웹?
2002년의 아우디 웹 페이지로 추측...!
https://experiencinginformation.com/2012/07/22/the-first-responsive-design-website-audi-circa-2002/
The First Responsive Design Website: Audi (circa 2002)
“Developing fixed-size Web pages is a fundamentally flawed practice. Not only does it result in Web pages that remain at a constant size regardless of the user’s browser size, but it fa…
experiencinginformation.com
현재의 반응형 웹 페이지 기준에는 미치지 못하지만, 당시에는 획기적인 아이디어였고, 현재의 반응형 웹 페이지의 시조새 같은 격인듯하다.
그때 당시에는 스마트폰 등 디바이스가 다양하지는 않았기 때문에, 자바스크립트로 small / medium / large 에 맞추어 각각 구현해놓은 페이지별 레이아웃으로 렌더링되게 만들었다고 한다.
반응형 웹 자주 들어만 봤지 뭔지 제대로 몰랐었는데, 시조새까지 알고나니 더 잘 알게된 기분...! 앞으로 친해져보자~~