밸!하~

밸로그 여러분 안녕하세요!

오늘의 주제는 반응형 디자인에 대해서 이야기를 드려보려고 합니다!

요즘 가장 많이 들리는 말이죠?
여러 채용공고에서도 자주 보이는 내용인데요!
바로 반응형 웹입니다!
취업을 하기위해서 나아가 현 프론트엔드의 흐름을 알기위해서라도 꼭 알아야겠죠??
그럼 시작해 볼까요!

반응형 웹이란 무엇일까요??

반응형 웹이란??

간단하게 말하면 반응형 웹 디자인은 다양한 크기의 화면에서 일관되게 잘 작동하는 웹페이지를 제작하는 것입니다!조금 길게 설명을 드리자면 반응형 웹 디자인이랑 user의 화면에 따라서 화면이 바뀌는것을 이야기하는데요
제대로된 정의를 설명드리면
-반응형 웹 디자인은 다양한 디바이스, 창, 화면 크기에서 원활하게 렌더링되는 웹 페이지를 제작하는 을 말합니다. 웹 사이트를 반응형으로 설계하면, 어떤 디바이스에서 어떤 방식으로 접속하든지 웹 사이트의 일관성을 유지할 수 있습니다. 좋은 반응형 웹 디자인은 데스크탑과 모바일이 단순히 화면 크기만 다른 것이 아니라 둘을 이용하는 소비자의 태도도 다르다는 점을 인식하고 이를 반영한 디자인입니다.

그럼 다들 왜 반응형 반응형 이라고 할까요??

그 이유는

반응형 웹사이트는 소비자가 어떤 디바이스를 이용하든 시각적으로 아름답고 기능적이며 사용성이 높습니다!

세상의 많은 사용자들은 하루에도 몇번씩 핸드폰에서 시작하여 tablet 나아가 Desktop까지 다양한 디바이스를 오갑니다!

다양한 디바이스에서 사이트에 접속했을때 사이트가 느려지거나 또는 둘러보기 어렵거나 시각적으로 아름답지 않으면 소비자는 금세 관심을 잃도 그것은 결국엔 회사의 손해로 연결되기 때문인데요!

그렇기에 프론트엔드 개발자는 각 구성요소의 차원에서 반응형 디자인과 기능을 고민해야하고 반응성을 높일수있게 개발을 해야합니다!

반응형 웹 도대체 어떻게 개발하는것일까요?

저희가 퍼블리싱을 하였을때 width를 사용하여 스타일을 주는데요 이때 뷰포트라는것을 사용하면
사용자의 기기에따라 시시각각으로 변하게 됩니다!

조금더 상세히 들어가게 되면

@media를 뺴놓을수는 없는데요

@media는무엇일까요??

반응형 웹을 사용할때 항상 같이나오는 개념이죠 !
심지어 W3c에서 반응형 디자인을 검색하게되면 바로 나오는것이 Media query입니다!

이 미디어쿼리를 사용하게 되면 중단점을 추가할수가 있게되는데요
이것으로 인해 설계의 특정 부분이 중단점의 양쪽에서 다르게 작동하는 중단점을 추가할 수 있습니다.

이것을 사용해서 중단점을 한개만 추가할수있는것이 아니라 여러가지를 추가할수있는데요
이것을 통해 핸드폰 테블릿 그외의 여러가지 기기에 대한 접근성을 추가로 넣을수있다는 장점이 있습니다 !

자 오늘은 반응형 디자인을 보았는데요!

오늘도 지식한개 쌓았습니다!

그럼 오늘도 밸~바!