무거운 CSS 프레임워크에 의존할 필요가 없도록 반응형 레이아웃을 만드는 기술

반응형 레이아웃을 구축하는 데 무거운 CSS 프레임워크는 필요하지 않습니다.

Tailwind 및 Bootstrap과 같은 CSS 프레임워크는 정말 강력하지만 소규모 웹사이트에는 너무 과할 때도 있습니다. 순수한 CSS 코드로 제공되는 모든 기능을 얻을 수 있습니다. 내부적으로는 모두 반응형 웹사이트에 동일한 기본 기술을 사용합니다.

사실 이러한 프레임워크와 반응형 웹사이트가 어떻게 작동하는지 알고 싶다면 5가지 기본 기술을 이해해야 합니다.

반응형 웹사이트를 만드는 5가지 기술은 다음과 같습니다.

기술 #1: 뷰포트 구성

단일 메타 태그로 모든 화면 크기에서 웹사이트의 크기를 제어할 수 있다는 사실을 알고 계셨나요?

예, 그 메타태그는 Viewport입니다.

뷰포트가 무엇인지 모르는 경우 뷰포트는 휴대폰, 태블릿, 데스크톱 등 기기의 웹페이지에 표시되는 영역입니다. 당신은 그것이 무엇을하는지 물어볼 수 있습니다. 기기의 화면 크기에 따라 콘텐츠의 크기가 조정되고 표시되는 방식을 결정합니다.

화면의 크기가 다양하기 때문에 뷰포트는 반응형 웹사이트를 만드는 데 중요한 역할을 합니다.

이제 어떻게 사용할까요?

HTML 파일에서 Viewport 메타 태그를 사용하기만 하면 됩니다.

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

기법 #2: 모바일 우선 접근 방식 채택

모바일 중심으로 디자인하지 않는다면 잘못하고 있는 것입니다.

오늘날 웹 트래픽의 절반 이상이 모바일 기기에서 발생하기 때문입니다. 이것이 바로 Tailwind가 채택한 접근 방식입니다. 그리고 그들은 당신에게도 똑같이 하라고 요구하고 있습니다. 여기서는 프레임워크 대신 순수 CSS를 사용하는 것에 대해 이야기하고 있지만 접근 방식은 여전히 ​​동일합니다.

다양한 유형의 기기에 대해 동일한 코드의 여러 버전을 작성해야 하므로 모바일 우선 접근 방식은 장기적으로 도움이 됩니다.

기법 #3: CSS 그리드와 Flexbox 활용

아직 웹사이트에 Float 기반 레이아웃을 사용하고 계십니까?

그렇지 않기를 바랍니다. 아직 사용하고 계시다면 유연한 레이아웃을 생성하기 위한 강력한 도구인 Flexbox 및 CSS Grid로 전환해야 할 때입니다.

1차원 레이아웃을 만들어야 한다면 Flexbox를 사용하세요

그리고 2차원 레이아웃을 만들어야 한다면 그리드를 선택하세요

기술 #4: 유동 레이아웃 생성

웹사이트 어디에서나 고정 픽셀 값을 사용하고 있나요?

대부분의 개발자는 화면의 다양한 레이아웃을 개발할 때 픽셀(px) 값을 선택합니다. 픽셀 값은 고정 레이아웃에는 적합하지만 반응형 레이아웃에는 그리 좋지 않습니다. 백분율 기반 값과 같은 유동 레이아웃을 사용하면 모든 뷰포트 크기에서 레이아웃 크기가 원활하게 조정됩니다.

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

기법 #5: 미디어 쿼리를 현명하게 사용하세요

미디어 쿼리는 반응형 레이아웃을 만드는 데 유용한 또 다른 기술입니다

하지만 현명하게 사용해야 합니다. 다양한 레이아웃에 대해 서로 다른 중단점을 사용하고 있습니다. 대부분의 개발자는 이를 잘못 생각합니다. 가능한 모든 화면 크기에 맞게 만들기 시작하므로 관리하기 어려운 코드가 생성됩니다.

제가 제안하는 바는 기기 카테고리 간의 주요 전환에 대해 미디어 쿼리를 작성해야 한다는 것입니다. 예를 들어 모바일에서 태블릿으로, 태블릿에서 데스크톱으로.

~

알겠습니다. 보시다시피 웹사이트를 반응형으로 만드는 데 사용할 수 있는 여러 가지 기술이 있습니다. 서류상으로는 5가지 기술을 사용할 수 있는 것처럼 보이지만 실제로는 프로덕션 웹사이트에서 작업을 시작하면 이러한 모든 기술의 사용 사례를 보게 될 것입니다.

이제 반응형 사이트를 구축하고 어떤 것이 가장 좋았는지 알려주세요.

이 글을 재미있게 읽으셨다면 Twitter/X에서 저를 팔로우하여 자세한 내용을 읽어보세요.

위 내용은 무거운 CSS 프레임워크에 의존할 필요가 없도록 반응형 레이아웃을 만드는 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!