적응형 디자인을 수행하는 방법. 기성품 디자인을 찾아보세요. 반응형 디자인이란 무엇인가
안녕하세요 여러분! 최근 내 프로젝트 중 하나의 통계를 살펴본 후 반응형 웹 사이트 디자인, 즉 데스크톱 컴퓨터와 노트북, 모바일 장치 모두에서 잘 보이는 디자인을 만드는 방법을 배워야 할 때라는 것을 깨달았습니다. Metrica는 자신을 살펴보십시오.
이 사진은 어때요? 아마도 일부 주제에서는 모바일 트래픽의 비율이 더 낮을 수도 있고 다른 주제에서는 더 높을 수도 있지만 어떤 경우에도 스마트폰이나 태블릿에서 귀하의 글을 읽는 방문자를 더 이상 무시할 수 없습니다.
모바일 장치 사용자가 귀하의 사이트를 어떻게 보는지 알고 계십니까? 다행히도 훌륭한 확인 서비스가 있습니다 - responsinator.com
여기에 있는 모든 것은 엄청나게 간단합니다. 사이트 주소를 입력하고 모바일 장치에서 어떻게 보이는지 확인하세요. 모두가 잘 알고 있는 블로그의 예를 들어보겠습니다.
Alexander Borisov는 아름다운 템플릿을 가지고 있으며 디자인과 레이아웃에 많은 돈이 투자되었음을 즉시 알 수 있습니다. 하지만 휴대폰으로 블로그를 읽는 것은 매우 불편하고, 모바일 장치 사용자의 실패율이 컴퓨터에서 사이트에 접속하는 사용자보다 훨씬 높다고 해도 놀랄 일이 아닙니다.
무엇을 해야 할까요? 두 가지 방법이 있습니다. 모든 것을 그대로 두고 다른 프로젝트가 검색 엔진 결과에서 귀하의 프로젝트를 어떻게 우회하는지 살펴보거나 웹 사이트 디자인을 적응형으로 만드는 것입니다.
반응형 디자인이란 무엇인가처음에는 화면 너비에 따라 블록 크기가 변경되는 적응형 레이아웃과 "유동적" 레이아웃의 차이를 알지 못했습니다. 그러나 차이점이 있습니다.
반응형 디자인은 너비만 늘리거나 줄이는 것이 아니라 화면 크기에 적응하며 때로는 블록의 스타일을 완전히 변경합니다.
가장 간단한 예: 콘텐츠 영역이 화면의 전체 너비에 걸쳐 늘어나고 사이드바가 아래로 이동하거나 페이지에서 완전히 사라집니다. 또는 메뉴가 일반 수평 메뉴에서 드롭다운 목록으로 전환됩니다.
예산과 CSS/HTML 지식에 따라 몇 가지 옵션이 있을 수 있습니다.
프리랜서에게 적응형 레이아웃 주문제 생각에는 가장 정확한 옵션이 가장 인기가 없는 옵션이기도 합니다. 즐거움은 값싼 것이 아니기 때문이다. 그러나 자금이 허용되고 레이아웃의 복잡성을 이해하려는 욕구가 없다면 템플릿을 모바일 장치에 맞게 조정하거나 새 템플릿을 만들 스튜디오나 프리랜서를 찾는 것이 좋습니다. 그리고 해상도가 다른 장치에서 작동을 확인하는 방법을 이미 알고 계십니다. responsinator.com이 도움을 드릴 수 있습니다.
기성 디자인을 찾아보세요최근에는 거의 모든 디자이너가 자신의 템플릿을 모바일 장치에 맞게 조정하려고 노력하고 있습니다. 예를 들어 다음과 같은 기성 디자인을 찾을 수 있습니다.
- www.templatemonster.com은 다양한 CMS 및 HTML 사이트에 대한 가장 인기 있는 유료 템플릿 컬렉션 중 하나입니다.
- www.templatemo.com - 다양한 무료 현대 디자인 옵션.
이 옵션은 독점적인 디자인을 추구하지 않거나 템플릿을 고유하게 만들기 위해 코드를 직접 변경할 수 있는 사용자에게 적합합니다.
프레임워크 사용프레임워크 - 템플릿의 프레임워크, 기본 파일 및 블록 그리드라고 말할 수 있습니다. 기성 "물고기" 템플릿을 사용하면 일상적인 작업에 시간을 낭비하지 않아도 되므로 디자이너는 사용 편의성과 시간 절약을 좋아합니다. 프레임워크를 사용하여 작업하는 방법을 알고 있다면 프레임워크를 사용하여 반응형 디자인을 만드는 것이 훌륭한 솔루션입니다.
Habré에서는 모든 취향에 맞는 다양한 적응형 프레임워크 목록을 찾을 수 있습니다. 그러나 대부분은 사용하기가 매우 어렵고 용량이 무겁습니다. 따라서 미니멀리즘을 사랑하는 사람들에게는 Beloweb.ru의 또 다른 경량 적응형 프레임워크 목록을 추천합니다. 동시에 블로그를 자세히 살펴보면 디자이너와 레이아웃 디자이너에게 유용한 "좋은 정보"가 많이 있습니다.
레이아웃을 직접 만들어 보세요.이 방법은 쉬운 방법을 찾지 않고 모든 것을 스스로 해결하고 싶은 사람들을 위한 것입니다. 기본적으로 템플릿을 반응형으로 만들려면 다음 두 가지를 사용해야 합니다.
뷰포트 메타 태그
방문자가 사이트에 액세스한 장치 유형을 결정하고 올바른 화면 너비를 설정합니다. 이 코드를 사이트 헤드에 복사하세요.
@미디어 규칙
덕분에 CSS 파일의 동일한 블록에 대해 서로 다른 스타일을 작성할 수 있습니다. 다음과 같이 보입니다.
#left( width: 600px; float: left; margin-right: 10px; ) #right( width: 400px; float: right; ) @media 전용 화면 및 (max-width: 1010px)( #left, #right( width : 98%; 부동: 없음; 여백: 10px 자동;
이 예에서 #left 블록은 너비가 600픽셀이고 너비가 400픽셀인 #right 블록의 왼쪽에 배치됩니다. 그러나 모니터 해상도가 1010픽셀 미만인 경우 두 블록 모두에서 래핑을 제거하고 화면 너비의 98%로 늘립니다.
다음은 다음 화면 크기에 대한 규칙을 작성하는 방법입니다.
- iPhone 3-5(세로 위치)의 경우 320px
- 가로 위치의 iPhone 3-4용 480px
- iPhone 5의 경우 가로 568px
- 수직 위치의 스마트폰의 경우 384px
- 가로 위치 스마트폰의 경우 600px
- iPad의 경우 가로 768px
- 수직 위치의 iPad용 1024px
전체 해상도 목록은 responsinator.com 또는 사이트에 대한 Yandex.Metrica 보고서(기술/디스플레이 해상도 섹션)에서 확인할 수 있습니다. 한마디로 웹사이트 레이아웃에 익숙한 사람이라면 이 문제를 이해하는 것은 어렵지 않을 것이다.
아시다시피 저는 유료 강좌에 대한 링크를 거의 제공하지 않지만(직접 사용해 본 적이 없는 것을 추천하지 않기 때문입니다), 이것은 제가 본 레이아웃 교육 자료 중 정말 최고의 것입니다. 내 블로그 템플릿이 이제 다양한 화면 해상도에 맞게 조정되었을 뿐만 아니라 이전 버전보다 가벼워지고 검색 엔진에 더 잘 최적화된 것은 Mikhail 덕분입니다.
그건 그렇고, 휴대 전화로 기사를 읽고 있다면 모든 것이 제자리에 있는지 쓰십시오. 모든 것이 편리합니까? 오늘은 그게 다야. 질문이나 추가 사항이 있으면 언제나처럼 댓글을 환영합니다. 댓글은 누구에게나 열려 있습니다.
안녕하세요, 일반 방문자 및 블로그 사이트의 일반 독자 여러분!
이 사이트가 존재하는 동안 저는 템플릿을 여러 번 변경했고 심지어 처음부터 나만의 템플릿을 만들었습니다.
새 템플릿을 선택할 때 주요 작업 중 하나는 모든 화면 해상도에 대한 사이트의 적응형 레이아웃입니다.
기사의 간략한 개요:
이전 기사에서 나는 이것이 왜 필요한지에 대해 이미 썼습니다. 하지만 이러한 적응성을 어떻게 달성할 수 있을까요?
이를 수행하는 방법에는 여러 가지가 있습니다. 일부는 자바스크립트를 사용하고 일부는 다른 것을 사용합니다. 하지만 가장 간단하고 정확한 방법은 CSS를 사용하는 적응형이라고 생각합니다.
반응형 웹사이트 레이아웃을 만드는 방법
첫째로,반응형 웹사이트 디자인을 만들기로 결정한 경우 태그 사이에 다음 코드를 삽입하세요.
적응형 웹사이트 레이아웃을 만들려고 할 때 바로 이 작업을 수행하지 않았다는 것이 얼마나 어리석은 일입니까!!!
모바일 브라우저의 문제는 웹사이트 레이아웃의 확장성, 심지어 적응형 레이아웃의 확장성입니다.
내가 디자인을 그린 다음 필요한 스타일과 쿼리를 모두 기록하고 다양한 해상도에서 사이트의 적응성을 확인한다고 상상해 보세요. 모든 것이 괜찮은 것 같습니다! 그런데 스마트폰으로 블로그를 열어보니 사이트가 단순히 축소되어 있는 것을 볼 수 있습니다. 모바일 기기에 적응하지 못하고 단순히 폰트나 그림 등의 크기를 줄였습니다.
어떻게요? 나는 클래스를 올바르게 작성했는지 알아보기 위해 모든 스타일을 다시 확인하기 시작했고 결국 자바스크립트를 사용하여 브라우저 창의 너비를 px 단위로 확인하는 지점에 이르렀습니다. 나는 충격 받았다. 노트북으로 확인해보니 1024px라는 결과가 나왔고, 스마트폰으로 사이트를 열어봐도 거의 같은 결과가 나왔어요!
그러나 그럴 수는 없습니다!
위에 표시된 코드를 작성하지 않으면 모바일 브라우저는 사이트가 적응형이라는 것을 이해하지 못하고 단순히 휴대폰의 작은 화면에 맞도록 사이트 페이지를 줄이려고 시도하는 것으로 나타났습니다.
저의 어리석음과 무능력으로 인해 많은 시간을 허비했습니다. 하지만 이제 나는 그것을 영원히 기억합니다))).
적응형 레이아웃 CSS 미디어 쿼리
CSS를 사용하여 반응형으로 만들려면 미디어 쿼리를 사용해야 합니다.
방법 것입니다? 예, 매우 간단합니다. CSS 파일에서 다음과 같은 쿼리를 작성해야 합니다.
@media 화면 및 (최소 너비: 1440px) 및 (최대 너비: 1599px)( )
이 코드는 "( )"로 묶인 스타일이 최소 너비 1440px, 최대 1599px의 화면에서 작동함을 의미합니다.
즉, 화면 해상도에 따라 조정되어야 하는 사이트 요소의 스타일은 가능한 각 화면 너비에 대해 별도로 작성되어야 합니다.
적응형 레이아웃에 가장 중요한 화면 해상도- 320px - 모바일 장치(세로 방향);
- 480px - 모바일 장치(가로 방향);
- 600px - 소형 태블릿;
- 768px - 태블릿(세로 방향);
- 1024px - 태블릿(가로 방향)/넷북;
- 1280px 이상 - PC.
적응형 레이아웃을 만들 때 집중하고 특별한 주의를 기울여야 하는 것은 바로 이러한 해결 방법입니다. 이는 가장 일반적인 유형의 화면 해상도입니다.
부트스트랩 반응형 디자인
적응형 레이아웃을 생성하려면 부트스트랩을 사용하는 것이 매우 편리합니다. 블록, 버튼, 테이블 등을 적용하기 위한 모든 스타일이 편리하다는 점입니다. bootstpap에 이미 등록되어 있습니다. 어떤 클래스를 어떤 요소에 할당할지 파악하면 됩니다.
시작하려면 최신 버전의 부트스트랩을 다운로드하여 사이트에 연결하세요. WordPress에 스타일과 스크립트를 연결하는 데는 고유한 특성이 있습니다.
Bootstrap의 레이아웃은 블록이나 화면의 너비가 12개의 동일한 부분으로 나누어진다는 점에서 다릅니다. 그리고 블록에 특정 클래스를 할당함으로써 블록의 너비를 필요한 부품 수와 동일하게 설정할 수 있습니다.
예를 들어, 이 디자인을 사용하면 너비가 8부분인 콘텐츠에 넓은 블록 하나를 할당하고 너비가 4부분인 사이드바에 좁은 블록 하나를 할당할 수 있습니다.
블록의 너비는 화면 너비에 따라 자동으로 계산됩니다. 그리고 모바일 장치에서 볼 때 이러한 블록은 서로 아래로 이동합니다.
가장자리에서 블록까지의 거리를 필요한 부품 수만큼 조정할 수도 있습니다. 예를 들어 다음 디자인은 다음과 같습니다.
화면의 1부분을 왼쪽 들여쓰기하여 10부분 너비의 블록이 생성됩니다.
살펴보면 부트스트랩으로 작업하면 작업 속도가 매우 빨라집니다. 또한 이러한 스타일은 확실히 올바르게 작동하며 사이트에 비뚤어진 부분이 없습니다.
앞으로 나는 부트랩 작업에 대한 몇 가지 강의를 게시할 계획입니다. 그러므로 이 순간을 놓치지 말라고 조언합니다.
웹사이트 적응성 확인
하지만 질문이 생깁니다. 웹 사이트의 적응성을 어떻게 확인합니까? 이제 CSS로 미디어 쿼리를 작성하고 부트스트랩을 연결했으며 필요한 클래스를 사용했습니다. 사이트가 모든 화면 해상도에서 올바르게 조정되는지 어떻게 확인할 수 있나요?
적응형 웹사이트 레이아웃을 다루는 웹마스터와 레이아웃 디자이너로부터 존경과 감사를 받을 만한 매우 정확하고 가장 중요한 무료 서비스입니다.
글쎄요, 기사가 마음에 드시나요? 공습 경보 신호? 그렇지 않은 경우 댓글을 작성해 주시면 함께 알아 보겠습니다.
그렇습니다. 반응형 웹사이트 디자인을 만들려면 열심히 노력해야 합니다. 그러나 이러한 노력은 검색 엔진, 그리고 가장 중요하게는 귀하의 사이트 방문자로부터 귀하의 사이트에 대한 호의적인 태도로 보상받을 것입니다.
적응형 레이아웃은 사용자 행동, 플랫폼, 화면 크기 및 장치 방향에 따라 페이지 디자인을 변경하며 현대 웹 개발의 필수적인 부분입니다. 이를 통해 비용을 크게 절약할 수 있으며 각 해상도에 대해 새로운 디자인을 그릴 필요 없이 개별 요소의 크기와 위치를 변경할 수 있습니다.
이 기사에서는 사이트의 주요 요소와 이를 적용하는 방법을 살펴보겠습니다.
화면 해상도 조정원칙적으로 장치를 서로 다른 카테고리로 나누고 각각에 대해 별도로 디자인할 수 있지만 시간이 너무 많이 걸리며 5년 후에 어떤 표준이 있을지 누가 알겠습니까? 게다가 통계에 따르면 우리는 매우 다양한 해결책을 갖고 있습니다.
각 장치를 개별적으로 계속해서 설계할 수는 없다는 것이 분명해졌습니다. 그러면 어떻게 해야 할까요?
부분적인 해결책: 모든 것을 유연하게 만드세요물론 이것은 완벽한 방법은 아니지만 대부분의 문제를 제거합니다.
Ethan Marcotte는 반응형 레이아웃 사용을 보여주는 간단한 템플릿을 만들었습니다.
언뜻 보면 모든 것이 쉬운 것처럼 보이지만 그렇지 않습니다. 로고를 살펴보세요:
전체 이미지를 축소하면 비문을 읽을 수 없게 됩니다. 따라서 로고를 저장하기 위해 사진을 두 부분으로 나누어 첫 번째 부분(일러스트)을 배경으로 사용하고 두 번째 부분(로고)의 크기를 비례적으로 변경합니다.
h1 요소에는 배경 이미지가 포함되어 있으며 이미지는 컨테이너(헤더)의 배경에 맞춰 정렬됩니다.
유연한 이미지이미지 작업은 반응형 디자인 작업 시 가장 중요한 문제 중 하나입니다. 이미지 크기를 조정하는 방법에는 여러 가지가 있으며 대부분 구현이 매우 간단합니다. 한 가지 해결책은 CSS에서 max-width를 사용하는 것입니다.
Img(최대 너비: 100%;)
이미지의 최대 너비는 화면이나 브라우저 창 너비의 100%이므로 너비가 작을수록 이미지도 작아집니다. IE에서는 max-width가 지원되지 않으므로 width: 100% 를 사용하세요.
제시된 방법은 적응형 이미지를 생성하는 데 좋은 옵션이지만 크기만 변경하면 이미지의 가중치를 동일하게 유지하므로 모바일 장치에서 로딩 시간이 늘어납니다.
또 다른 방법: 반응형 이미지필라멘트 그룹이 선보인 이 기술은 이미지 크기를 조정할 뿐만 아니라 작은 화면에서 이미지 해상도를 압축해 로딩 속도를 높이는 기술이다.
이 기술을 사용하려면 Github에서 사용할 수 있는 여러 파일이 필요합니다. 먼저 JavaScript 파일( rwd-images.js), 파일 .htaccess그리고 rwd.gif(이미지 파일). 그런 다음 일부 HTML을 사용하여 크고 작은 해상도를 연결합니다. 먼저 접두사가 있는 작은 이미지입니다. .아르 자형(이미지가 반응해야 함을 보여주기 위해) data-fullsrc를 사용하여 큰 이미지에 연결합니다.
480px보다 넓은 화면의 경우 더 높은 해상도의 이미지가 로드됩니다( 큰 해상도.jpg), 작은 화면에서는 로드됩니다( 작은 해상도.jpg).
iPhone과 iPod Touch에는 큰 화면용으로 만들어진 디자인이 스크롤이나 추가 모바일 레이아웃 없이 저해상도 브라우저에서 간단히 축소되는 기능이 있습니다. 그러나 이미지와 텍스트는 표시되지 않습니다.
이 문제를 해결하려면 메타 태그를 사용하십시오.
initial-scale이 1이면 이미지의 너비는 화면의 너비와 같아집니다.
사용자 정의 가능한 페이지 레이아웃 구조페이지 크기가 크게 변경되면 요소의 전체 배열을 변경해야 할 수도 있습니다. 이는 별도의 스타일 파일을 통해 편리하게 수행할 수 있으며, CSS 미디어 쿼리를 통해 보다 효율적으로 수행할 수 있습니다. 대부분의 스타일은 동일하게 유지되고 일부만 변경되므로 문제가 없어야 합니다.
예를 들어 색상, 배경 및 글꼴과 함께 #wrapper , #content , #sidebar , #nav 를 지정하는 기본 스타일 파일이 있습니다. 마스터 스타일로 인해 레이아웃이 너무 좁거나 짧거나 넓거나 길면 이를 식별하고 새 스타일을 포함할 수 있습니다.
style.css(기본):
/* 하위 스타일 시트에 상속될 기본 스타일 */ html,body( background...font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* 구조적 요소 */ #wrapper( width: 80%; margin: 0 auto; background: #fff; padding: 20px; ) #content( width: 54%; float: left; margin-right: 3%; ) # 사이드바-왼쪽( 너비: 20%; 부동: 왼쪽; 여백-오른쪽: 3%; ) #사이드바-오른쪽( 너비: 20%; 부동: 왼쪽; )
mobile.css(하위):
#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%;clear:both; /* 새 디자인을 위한 추가 스타일 */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( width: 100%;clear:both; /* 새 레이아웃을 위한 추가 스타일 */ border-top: 1px solid #ccc; margin-top: 20px; )
넓은 화면에서는 왼쪽과 오른쪽 사이드바가 측면에 잘 맞습니다. 더 좁은 화면에서는 편의성을 높이기 위해 이러한 블록이 서로 아래에 배치됩니다.
CSS3 미디어 쿼리CSS3 미디어 쿼리를 사용하여 반응형 디자인을 만드는 방법을 살펴보겠습니다. min-width는 특정 스타일이 적용될 브라우저 창이나 화면의 최소 너비를 지정합니다. 값이 min-width보다 작으면 스타일이 무시됩니다. max-width는 그 반대입니다.
@media 화면 및 (min-width: 600px) ( .hereIsMyClass ( width: 30%; float: right; ) )
미디어 쿼리는 최소 너비가 600px 이상인 경우에만 작동합니다.
@media 화면 및 (최대 너비: 600px) ( .aClassforSmallScreens (clear: 모두; 글꼴 크기: 1.3em; ) )
이 경우 클래스( 작은 화면을 위한 클래스)는 화면 너비가 600px 이하일 때 작동합니다.
min-width 및 max-width는 화면 너비와 브라우저 창 너비 모두에 적용할 수 있지만 장치 너비에만 작업해야 할 수도 있습니다. 예를 들어, 작은 창에서 열린 브라우저를 무시합니다. 이를 위해 min-device-width 및 max-device-width를 사용할 수 있습니다.
@media 화면 및 (최대 장치 너비: 480px) ( .classForiPhoneDisplay ( 글꼴 크기: 1.2em; ) ) @media 화면 및 (최소 장치 너비: 768px) ( .minimumiPadWidth ( 지우기: 둘 다; margin-bottom : 2px 솔리드 #ccc ) )
특히 iPad의 경우 미디어 쿼리에는 다음과 같은 속성이 있습니다. 정위, 그 값은 다음 중 하나일 수 있습니다. 풍경(수평) 또는 초상화(수직의):
@media 화면 및 (방향: 가로) ( .iPadLandscape ( 너비: 30%; 부동: 오른쪽; ) ) @media 화면 및 (방향: 세로) ( .iPadPortrait ( 지우기: 둘 다; ) )
미디어 쿼리 값을 결합할 수도 있습니다.
@media 화면 및 (최소 너비: 800px) 및 (최대 너비: 1200px) ( .classForaMediumScreen ( background: #cc0000; width: 30%; float: right; ) )
이 코드는 너비가 800~1200픽셀 사이인 화면이나 브라우저 창에 대해서만 실행됩니다.
다음과 같이 다양한 미디어 쿼리 값에 대한 스타일이 포함된 특정 시트를 로드할 수 있습니다.
자바스크립트
브라우저가 CSS3 미디어 쿼리를 지원하지 않는 경우 jQuery를 사용하여 스타일 교체를 수행할 수 있습니다.
$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // 너비가 600px 미만인 경우 모바일 스타일시트가 사용됩니다. if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // 너비가 600px보다 크면 데스크톱 스타일시트가 사용됩니다. $("link").attr((href: "style.css")); ) ) ));
선택적 콘텐츠 표시작은 화면에 맞게 요소를 축소하고 재배열하는 기능은 훌륭합니다. 그러나 이것이 최선의 선택은 아닙니다. 모바일 장치는 일반적으로 간소화된 탐색, 더욱 집중된 콘텐츠, 열 대신 목록 또는 행 등 더 광범위한 변경 사항을 제공합니다.
마크업은 다음과 같습니다.
주요 내용 A 왼쪽 사이드바 A 오른쪽 사이드바
style.css(기본):
#content( 너비: 54%; float: 왼쪽; margin-right: 3%; ) #sidebar-left( 너비: 20%; float: 왼쪽; margin-right: 3%; ) #sidebar-right( 너비: 20 %; 부동: 왼쪽; ) .sidebar-nav( 표시: 없음; )
mobile.css(간체):
#content( 너비: 100%; ) #sidebar-left( 디스플레이: 없음; ) #sidebar-right( 디스플레이: 없음; ) .sidebar-nav( 디스플레이: inline; )
예를 들어 화면 크기가 줄어들면 스크립트나 대체 스타일 파일을 사용하여 공백을 늘리거나 탐색 기능을 대체하여 편의성을 높일 수 있습니다. 따라서 요소를 숨기거나 표시하고, 그림, 요소의 크기 등을 변경하는 기능을 사용하면 모든 장치와 화면에 맞게 디자인을 조정할 수 있습니다.
반응형 웹 사이트 템플릿을 만드는 것은 충분히 쉽지만 템플릿 전체의 모든 지점에서 요소의 균형을 유지하는 것은 진정한 예술입니다. 이 튜토리얼에서는 반응형 템플릿을 위해 CSS에서 사용할 수 있는 5가지 기술을 소개합니다. 최소 너비, 최대 너비, 오버플로 및 상대 값과 같은 매우 간단한 CSS 속성이 있지만 모두 반응형 디자인을 개발하는 데 중요한 역할을 합니다.
1. 적응형 비디오이 CSS 트릭을 사용하면 삽입된 비디오를 지정된 경계까지 늘릴 수 있습니다.
비디오( 위치: 상대; 패딩 하단: 56.25%; 높이: 0; 오버플로: 숨김; ) .video iframe, .video 객체, .video 삽입( 위치: 절대; 상단: 0; 왼쪽: 0; 너비: 100% ; 높이: 100% )
2. 최소 및 최대 너비max-width 속성을 사용하면 요소의 최대 너비를 설정할 수 있습니다. 요소가 특정 프레임 이상으로 확장되는 것을 방지하는 데 사용해야 합니다.
최대 너비 속성이 있는 컨테이너아래 예에서는 컨테이너 크기를 800px로 정의하지만 크기 제한을 90%로 설정합니다.
컨테이너(너비: 800px; 최대 너비: 90%; )
적응형 이미지max-width:100% 및 height:auto 속성을 사용하면 이미지 크기가 자동으로 최대 크기로 조정되도록 할 수 있습니다.
Img(최대 너비: 100%; 높이: 자동; )
위의 반응형 이미지 코드는 IE7 및 IE9에서는 작동하지만 IE8에서는 작동하지 않습니다. 상황을 수정하려면 width:auto 속성을 추가해야 합니다. IE8에는 CSS 조건부 규칙을 사용하거나 IE에는 아래 트릭을 사용할 수 있습니다.
@media \0screen ( img ( width: auto; /* for ie 8 */ ) )
최소 너비 속성min-width 속성은 max-width 속성과 반대입니다. 요소의 가능한 최소 너비를 설정합니다. 다음은 축소 시 입력 필드가 너무 작아지는 것을 방지하기 위해 min-width 속성을 사용하는 예입니다.
3. 상대값반응형 템플릿에서 상대 값을 사용하면 CSS 코드를 크게 단순화하고 디자인의 모양을 향상시킬 수 있습니다.
상대 필드다음은 왼쪽 여백의 상대적 너비를 사용하여 트리 구조에 들여쓰기를 생성하는 주석의 예입니다. 목록의 다음 수준에는 px 단위의 절대값 대신 백분율 값이 사용됩니다. 그림의 왼쪽을 보면 모바일 장치에서 절대값을 사용하는 경우 목록 항목에 사용 가능한 공간이 일반 표시에 충분하지 않을 수 있음을 알 수 있습니다.
글꼴 크기에 대한 상대 값(em 또는 %)을 사용하면 템플릿을 장치 화면 크기에 맞출 때 줄 높이와 들여쓰기 크기를 적절하게 변경할 수 있습니다. 예를 들어 상위 요소에 대해 새 글꼴 크기 크기를 설정하면 모든 관련 요소의 크기가 자동으로 조정됩니다.
아래 그림은 패딩에 상대 % 값을 사용할 때의 이점을 보여줍니다. 왼쪽 블록은 절대 px 값을 적용할 때 공간이 불균형합니다. 오른쪽 블록은 비례적인 내용으로 외관이 우수합니다.
오버플로 속성을 사용하면 텍스트가 요소 주위를 감싸는 것을 방지할 수 있습니다. 매우 간단하고 유용한 방법입니다. 이전 요소 주위의 텍스트 줄 바꿈을 풀고 콘텐츠의 구조를 유지할 수 있습니다.
max-width 속성은 깨지지 않는 텍스트(예: 긴 URL)를 한 줄이 아닌 여러 줄에 맞추는 데 도움이 됩니다.
Break-word ( word-wrap: break-word; )
최근, 말 그대로 10년 전만 해도 웹 디자이너는 웹사이트를 만들 때 사용자 모니터의 특정 평균 화면 너비를 기준으로 삼았습니다. 처음에는 가장 일반적인 해상도가 800*600이더니 나중에는 1024*768로 늘어났습니다. 인터넷에서 다음과 같은 단어를 접할 수 있습니다. "이 사이트는 이러한 해결 방법에 최적화되어 있습니다." 화면 크기가 커지면서 웹 사이트의 고무 레이아웃이 인기를 얻었고, 이에 대해서는 같은 이름의 기사에서 썼습니다. 이러한 유형의 레이아웃 덕분에 다양한 해상도의 모니터에서 사이트를 볼 수 있었습니다.
그러나 최근 몇 년 동안 고무 레이아웃은 더 이상 "만병 통치약"이 아닙니다. 한편으로는 화면 크기가 큰 모니터가 등장한 반면, 모바일 혁명이 일어났습니다. 모바일 장치(노트북, 스마트폰, 태블릿)의 인터넷 연결 수가 데스크톱 컴퓨터 수보다 많아졌습니다. 모바일 트래픽이 증가하고 있으며 다양한 장치의 화면에 사이트를 올바르게 표시해야 할 필요성이 있습니다. 사이즈 범위가 너무 넓습니다.
작은 화면에서 사이트가 좋지 않으면 방문자는 단순히 사이트를 떠나고 트래픽이 감소하며 행동 요인이 악화됩니다.
다른 장치에서 볼 때 사이트가 어떻게 보이는지 확인하려면 Screenfly 서비스를 사용할 수 있습니다. 이렇게 하려면 사이트 주소를 입력하고 상당히 큰 목록에서 원하는 장치를 선택하십시오. 데스크톱 컴퓨터, 다양한 유형의 태블릿, 휴대폰이 될 수 있습니다. 화면 방향을 가로에서 세로로 또는 그 반대로 변경할 수 있습니다.
다양한 기기에서 정상적인 웹사이트가 표시되는 문제를 해결하는 방법은 무엇입니까? 두 가지 방법이 있습니다.
- 데스크톱 컴퓨터용 일반 버전과 모바일 버전의 두 가지 버전의 사이트를 사용하세요.
- 반응형 디자인을 사용하세요.
물론 어떤 옵션을 적용할지 결정하는 것은 사이트 소유자나 고객에게 달려 있습니다. 사이트가 오래 전에 만들어졌고 브랜드의 일부인 손으로 그린 디자인이 있다면 모바일 버전을 만들고 이전 버전은 그대로 두는 것이 좋습니다. 물론 새로운 웹사이트의 경우 반응형 디자인을 선택해야 합니다.
반응형 디자인이란 무엇입니까?이것은 어떤 디자인이고, 고무와는 어떻게 다른가요?
고무 템플릿은 화면 너비가 변경될 때 구조를 변경하지 않고 크기만 변경합니다. 예를 들어, 웹 페이지에는 세 개의 열이 있습니다. 왼쪽에는 창 너비의 25% 너비가 있는 메뉴가 있고, 중앙에는 콘텐츠(50%), 오른쪽에는 사이드바(25%)가 있습니다. 창 너비가 1000픽셀이면 각각 250, 500, 250픽셀의 크기를 가지며 이는 매우 일반적인 현상입니다. 하지만 320px 너비의 작은 화면이 있는 휴대폰을 사용하면 열 크기가 80, 160, 80px로 줄어들어 읽을 수 없게 됩니다.
해결책은 무엇입니까? 여기에는 웹페이지를 근본적으로 변경하는 작업이 포함됩니다. 이 변경 사항은 열 너비가 점진적으로 감소한 후 페이지 구조가 다시 작성되어 하나의 열로 확장된다는 사실로 구성됩니다. 그러나 이것이 유일한 차이점은 아닙니다.
반응형 디자인 요구 사항- 대형 데스크탑 모니터부터 휴대폰까지 화면 크기와 방향에 맞게 조정됩니다.
- 화면 해상도를 변경할 때 이미지 크기를 조정합니다. "유동적" 디자인의 사이트에서도 이미지 크기는 변하지 않으며 특정 화면 너비에서는 가로 스크롤 막대가 나타나 이미지를 볼 수 있습니다. 반응형 디자인을 사용하면 이미지도 화면 크기에 맞게 "맞춤"됩니다.
- 중요하지 않은 템플릿 요소를 제거합니다. 모바일 장치에서 작동하지 않는 장식 요소이거나 소프트웨어일 수 있습니다.
- 높은 다운로드 속도. 모바일 인터넷의 속도는 여전히 상대적으로 느리기 때문에 모바일 장치에서 볼 수 있도록 설계된 웹사이트를 개발할 때 이 점을 고려해야 합니다.
- 상대적으로 큰 버튼 사용. 모바일 기기는 터치 입력을 사용하므로 디자인 개발 시 커서가 없다는 점을 고려해야 합니다.
- 위치정보와 같은 모바일 기능을 사용하여 작업합니다.
이 디자인은 CSS 미디어 쿼리 사용을 기반으로 합니다. 이러한 요청 덕분에 방문자가 사용하는 장치의 매개변수가 먼저 결정되고, 이 선택에 따라 적절한 스타일이 연결됩니다. 즉, 적응형 디자인을 통해 하나의 사이트가 다양한 스타일 세트와 함께 사용됩니다. 장치. 예를 들어, 방문자가 일반 컴퓨터에서 사이트에 접속하면 하나의 스타일 시트가 연결되고, 크고 화려한 헤더, 가로 메뉴, 여러 열의 콘텐츠가 있는 사이트가 표시되고, iPad를 사용하면 다른 스타일이 표시됩니다. 적용되며, 큰 헤더 대신 작은 로고와 메뉴가 세로 목록으로 바뀌어 표시되고, 내용이 한 열로 모아집니다.
기존 웹사이트 템플릿을 반응형 버전으로 변환할 수 있나요? 물론 HTML과 CSS에 대한 지식이 충분하다면 가능합니다. 그러나 WordPress, Joomla!, Drupal과 같은 콘텐츠 관리 시스템을 사용하는 경우 이미 만들어진 템플릿을 찾는 것이 더 좋습니다. 이제 많은 적응형 템플릿이 개발되었습니다. 그건 그렇고, 내 기사 "WordPress용 템플릿을 선택하는 방법"에서 이제 "템플릿의 응답성 확인" 항목을 추가해야 합니다.
따라서 적응형 디자인은 현재 웹 사이트 개발의 가장 현대적인 방법이며 상대적인 복잡성에도 불구하고 미래라고 말할 수 있습니다. 진보는 멈추지 않고 새롭고 더 복잡한 장치가 등장하며 해당 장치의 소프트웨어도 더욱 복잡해집니다.
그런데 Andrei Kudlay의 독특한 코스가 방금 나타났습니다. Bootstrap 프레임워크를 사용하면 오늘날 레이아웃에 대한 전문 지식이 없어도 아름답고 쾌적하며 전문적인 디자인의 웹사이트를 만들 수 있습니다. 프레임워크를 사용하면 웹 사이트 구축의 가장 초보자라도 페이지 레이아웃을 만들고, 한 페이지짜리 웹 사이트나 랜딩 페이지를 만들 수 있습니다. 또한 사이트는 매우 전문적이며 생성에 소요되는 시간은 최소화됩니다.
이 모든 것은 매우 심각하지만 휴식을 취하기 위해 퍼즐을 맞추고 러시아 인민 예술가 N.P.의 또 다른 그림을 보는 것이 좋습니다.
반응형 디자인에 대한 여러분의 의견을 댓글로 남겨주세요.