웹 사이트를 만들 때마다 데스크톱 버전이 표시되는 경우가 많지만 휴대 전화 나 태블릿과 같은 더 작은 화면 크기로 보면 웹 사이트의 디자인과 모양이 크게 바뀔 수 있습니다.

https://dev.to/dailydotdev/getting-started-with-responsive-web-design-1h39 

반응형 웹 디자인의 기본 아이디어는 이를 표시하는 데 사용되는 모든 장치에 적응할 수 있는 웹 사이트를 만드는 것입니다. 더 큰 화면 크기 뿐만 아니라 휴대폰 및 태블릿에서도 가능합니다.

귀하의 웹 사이트를 방문하는 대부분의 사용자는 휴대 전화를 사용하여 빠르게 이동할 것이므로 웹 사이트가 어느 쪽이든 괜찮아 보이는지 확인 해야 합니다. 그렇지 않으면 navbar가 다른 곳으로 이동하게 됩니다. , 메인 섹션이 다른 곳에 있으며 결국 사용자 경험이 크게 감소합니다.

따라서 웹 사이트를 만들 때 화면 크기에 관계없이 보기 좋게 만들 때 염두에 두어야 할 사항이 있습니다.

우선 가장 중요한 것은 웹 사이트가 기본적으로 반응한다는 것입니다. 웹 사이트를 반응하지 않게 만드는 것은 여러분입니다. 예를 들어, 화면 크기에 관계없이 텍스트를 추가 한 div를 만들면 자동으로 조정됩니다. 그러나 명확한 너비 또는 높이를 추가하는 순간 제한되어 일부 화면에서는 보기 좋게 보이고 다른 화면에서는 보기 흉하게 보입니다. 그러면 많은 중단 점을 적용하고 코드를 더 복잡하게 만드는 것이 이미지에서도 마찬가지입니다. 그리고 다른 모든 것.

이제 반응형 웹 사이트를 만들 때 염두에 두어야 할 사항부터 시작하겠습니다.

1) Viewport 

뷰포트는 웹 페이지를 표시하는 브라우저 내의 영역이며 화면 크기가 변경되면 뷰포트가 변경됩니다. 뷰포트 메타 태그 또는 기타 속성을 적용하지 않으면 모바일 브라우저가 페이지를 데스크톱 화면 너비로 렌더링 한 다음 사용자가 완벽하게 맞추기 위해 확대하고 축소해야 합니다. 

사이트 크기는 사용자마다 다르므로 나쁜 사용자 경험을 제공합니다.

할 수 있는 일은 이 메타 태그를 헤드 태그에 적용하는 것입니다.

<meta name="viewport" content="width=device-width, initial-scale=1"> 

이 메타 뷰포트 태그를 사용하면 width = device-width가 화면 너비와 일치하게 됩니다. 이렇게 하면 휴대폰이나 노트북에 상관없이 콘텐츠가 제대로 렌더링 됩니다.

2) The layout and flow 

이제 CSS에는 꽤 많은 레이아웃 디자인이 있으며 웹 사이트의 흐름을 이해하고 가장 적합한 레이아웃을 사용하는 것이 중요하므로 flexbox 또는 그리드 레이아웃을 사용할 수 있습니다. 일부 부작용을 일으킬 수 있으므로 플로트를 사용하지 않는 것을 선호하고 모든 것을 지워야 하지만 사이트에 가장 적합한 레이아웃을 선택하고 요소가 더 작은 화면 크기에 차례로 쌓일 수 있도록 웹 사이트를 디자인합니다. 원활한 사용자 경험을 얻을 수 있습니다.

3) Relative Units 

이것은 반응형 웹 디자인의 필수 요소입니다. 픽셀과 같은 단위의 문제는 명확하고 모바일 또는 노트북에서 보는 것과 상관없이 크기가 동일하게 유지되며 700px이기 때문에 부정적인 점입니다. 노트북의 경우 너비가 작을 수 있습니다. 그래도 휴대 전화에는 맞지 않을 것이며 콘텐츠가 여기 저기 넘칠 것입니다.

따라서 픽셀 단위의 값을 사용하는 대신 em, rem, vw, vh, %와 같은 단위를 사용하십시오. 이는 상대적인 단위이며 다른 화면에 적응하는 경향이 있습니다. 예를 들어 뷰포트 너비 인 vw는 화면의 뷰포트 너비에 상대적입니다. 웹 사이트가 표시되고 있으므로 이와 같은 단위를 사용하는 것이 좋지만 이러한 단위가 작동하는 방식과 사용 위치에 대한 기본 사항을 이해해야 합니다. 그렇지 않으면 문제가 발생할 수 있습니다.

4) Breakpoints 

이제 중단 점은 대부분의 시나리오에서 유용하지만 필요할 때 사용하고 여기저기서 불필요하게 사용하지 않도록 합니다.

당신이 할 수 있는 일은 몇 가지 미디어 쿼리를 정의하고 처음에는 더 큰 분류로 시작하여 크롬 개발 도구를 열고 장치 메뉴로 이동하면 뷰포트의 주어진 너비와 높이에서 웹 사이트의 응답 성을 확인할 수 있습니다. 주변에서 사이트의 응답 성을 잃는 영역을 찾고 중단 점을 표시하고 모든 화면 크기에서 완벽한 모양을 얻을 때까지 이 방법을 적용하십시오.

5) Mobile First or Desktop First 

웹 사이트를 구축하는 동안 모바일 우선 접근 방식을 사용할지 데스크톱 우선 접근 방식을 사용할 지에 대한 큰 논쟁이 계속되고 있습니다. 

귀하의 웹 사이트를 방문하는 대부분의 사람들이 귀하의 웹 사이트를 모바일로 통과 할 것이라고 믿습니다. 

따라서 모바일에서 완벽하게 보이는 웹 사이트를 얻은 다음 레이아웃을 쉽게 설정할 수 있도록 모바일 우선 접근 방식 웹 사이트를 고수하는 것이 좋습니다. 많은 사람들이 모바일 우선이 웹 사이트를 만드는 더 좋은 방법이라고 말하지만, 일부 사용 사례에서는 데스크톱 우선 웹 사이트가 좋게 보일 수 있으며 마침내 프로젝트 요구와 선호도에 따라 달라 지지만 응답 성이 최우선 순위라면 모바일 우선 접근 방식이 더 나은 결과를 제공 할 것입니다.

6) Frameworks 

좋아, 서두르고 반응 형 웹 사이트의 모든 고통을 처음부터 다룰 수 없다면 어떨까요? 그리드 시스템 또는 Bulma 등에서 작동하는 부트 스트랩과 같은 반응 형 프레임 워크를 사용할 수 있습니다.

부트 스트랩에서 사전 빌드 구성 요소를 사용할 수 있으며 문제 없이 멋진 반응 형 웹 사이트를 시작할 수 있습니다. 그러나 내부에서 작동하는 방식을 알고 있다는 조건에서 초보자를 위해 CSS에 대한 견고한 기반을 확보 할 때까지 프레임 워크로 바로 이동하지 않는 것이 좋습니다. 그렇지 않으면 프레임 워크 사용의 이점이 없으며 나중에 CSS로 어려움을 겪을 것입니다.

글쎄요, 반응 형 웹 디자인에는 훨씬 더 많은 것들이 있지만, 초급 수준의 경우 이러한 것부터 시작할 수 있으며 개념을 더 깊이 파고 들면 더 많은 것을 배울 수 있습니다.)