[반응형 웹]어떤 기기에서도 자유롭게!

우리는 평소 살아가면서 다양한 웹을 들어간다.

유트브라던지, 구글, 네이버등등등

하지만 우리은 웹에 접속할때 한가지의 기기로만 들어가지 않는다

핸드폰, 태블릿 PC, 노트북, 컴퓨터, 심지어 TV까지

정말 다양한 크기와 형태의 기기로 접속을 한다.

 

여기서 궁금증이 생긴다

 

'우리가 접속하는 모든 웹은 핸드폰용, 노트북용, 컴퓨터용으로 나뉘어져 있을까?'

'어떻게 형태도 크기도 제각각인데 알맞은 크기로 조절이 되는거지?'

 

이러한 궁금증을 해소 하려면 우리는 먼저 반응형에 대하여 알아볼 필요가 있다

---

반응형

사용자가 접속하는 기기의 화면 크기와 해상도에 맞게 웹사이트의 레이아웃과 콘텐츠가 자동으로 조정되는 웹 디자인 방식을 말한다. 이를 통해 동일한 웹사이트가 노트북, 태블릿, 스마트폰 등 다양한 기기에서 일관된 사용자 경험을 제공할 수 있다는 장점이 있다

 

우리가 노트북으로 유트브를 들어가서 영상을 보고 있다고 생각해보자

나는 내가 보고 있던 영상을 핸드폰으로 마저 이어서 보고싶은데 핸드폰으로 접속을 하자 화면이 바깥으로 

튀어 나가고, 댓글창이 세로로 길게 늘어져 있고, 그러면 우리는 마음이 뚝떨어 질것이다

 

이러한 경험을 방지하기 위해 우리는 반응형을 사용한다

 

대표적인 웹으로는 아마존, 유트브등이 있다

---

그러면 안쓰는 웹은 없어?

어......

요즘은 사라지는 추세인데 아직도 없는 것은 아니다

흔이 옛날에 제작되어 변경하기가 어려운 웹들이 종종 그러기도 한다

 

"어? 그러면 그런 웹들은 핸드폰이나 노트북으로 접속하면 이상하나?"

 

그렇다. 이상하다

 

뭔 그딴게 다있나 싶을 것이다.

그래서 그런 단점을 보완하기 위해 데스크톱용과 모바일용으로 사이트가 각각 2개씩 있다

 

대표적으로 NAVER이있다

네이버

네이버 모바일 메인

---

어떻게 구현하지?

퍼블리싱하면서 제일 어려운걸 꼽으라고 한다면 10에 5은 이 반응형 웹 이라 할것이다

css도, html도 데스크탑에서는 잘만 예쁘게 돌아가는데 모바일 기기로 접속만 하면 깨지기 일수이다

이렇듯, 다양한 화면 크기와 해상도에서 동일한 웹사이트가 적절하게 보이도록 디자인하고 구현하는 것은 매우매우 어렵고 복잡한 일이다

 

우리는 반응형 웹을 구현하기 위해 다향한 방법을 사용합니다 

• 미디어 쿼리 (Media Queries)
• Grid(그리드)

이렇게 나눠 놨지만 현실은 css의 방법이다.

미디어 쿼리 (Media Queries)

웹 페이지에서 특정 조건에 따라 다른 스타일을 적용할 수 있도록 해주는 CSS 기술이다.

@media (조건){
    /*조건이 충족됬을때 적용될 요소*/
}

@media로 연다

그후에 조건을 붙이는 식으로 

 

조건에는 화면이 가로인지 세로인지,

터치디스플레이일때, 마우스일때

화면전체의 크기가 780px이하일때

심지어 비트컬러나 비율로도 설정할 수 있다

 

이런장점으로 많은사람들이 미디어 쿼리를 채택하는 이유이다

 

하지만 복잡한 디버깅과 기능적한계라는 단점도 존재합니다

[CSS]미디어 쿼리

 

Grid

display:flex를 이해 한다면 쉬운 개념이다

flex는 하나의 행, 1차원에서 컨트롤하지만

grid는 열, 2차원에서 행과 열에 콘텥츠를 배치합니다

 

그리드는 뷰포트, 즉 화면의 크기에 따라 값을 쉽게 변경할 수 있고

열과 행을 관리 하기 때문에 반응형웹을 만들때 사용됩니다

 

주로 미디어 쿼리와 같이 사용됩니다

[CSS]Grid는 정말 Greed

 

---

견론

반응형은 사용자에가 훌룡한 사용경험을 제공합니다

그러니 어렵다고 공부하지 않고 미루는것 보다는 이렇게 라도 알아 보아서 

조금이라도 가까워 지는것이 좋다고 생각합니다