모바일 우선 반응형 디자인에 초점을 맞추게 만드는 또 다른 요인은 대부분의 사람들이 모바일 장치를 통해 인터넷에 접속한다는 것입니다(60%). 반면 데스크톱에서 인터넷을 사용하는 사람은 20%에 불과합니다.
이 문서에서는 모바일 우선 반응형 디자인을 만드는 지침을 다룹니다.
모바일 우선 반응형 디자인을 설정하는 방법은 무엇입니까?
모바일 우선 반응형이든 더 큰 화면을 위한 반응형 디자인이든 아래 방법에 따라 반응형 디자인을 만들 수 있습니다.
방법 1: 모바일 우선 반응형 디자인 만들기
먼저, 모바일 우선 디자인 접근 방식을 만드는 것부터 시작하세요. 이를 위해 아래 제공된 단계별 지침을 따르십시오.
1단계: HTML 구조 만들기
먼저 HTML 구조를 만들고 ' 부트스트랩 '에서 <머리> 부분. HTML 섹션에 스타일시트를 추가하는 방법을 알아보려면 여기를 클릭하세요. 링크 . 다음과 같은 기본 웹사이트 구조를 만든 후, <없음> , <헤더> 그리고 <바닥글> 아래와 같이 제공됩니다:
< 몸 ><헤더>
<없음>
< 울 >
< 저것 >< ㅏ href = '#' > 집 < / ㅏ >< / 저것 >
< 저것 >< ㅏ href = '#' > 회사 소개 < / ㅏ >< / 저것 >
< 저것 >< ㅏ href = '#' > 우리의 서비스 < / ㅏ >< / 저것 >
< 저것 >< ㅏ href = '#' > 문의하기 < / ㅏ >< / 저것 >
< / 울 >
< / 아니>
< / 헤더>
<메인>
<섹션>
< h1 > Linux 힌트에 오신 것을 환영합니다 < / h1 >
< 피 > 튜토리얼 웹사이트. < / 피 >
< / 섹션>
< / 메인>
<바닥글>
< 피 > 리눅스 힌트 저작권 < / 피 >
< / 바닥글>
< / 몸 >
2단계: CSS 적용
본문 섹션에서 “ 글꼴 모음 ' 에게 ' 산세 리프 '. 패딩, 여백, 배경색도 설정합니다. 그런 다음 머리글, 바닥글 및 탐색에 CSS를 적용합니다.
몸 {글꼴 모음 : 산세 리프 ;
여유 : 0 ;
심 : 0 ;
배경색 : #808080 ;
}
머리글 {
배경색 : 보라 ;
색상 : 하얀색 ;
심 : 8px ;
}
탐색 {
목록 스타일 유형 : 없음 ;
심 : 0 ;
여유 : 0 ;
}
그들의 배 {
여유 : 4px 0 ;
}
nav ul li a {
색상 : 하얀색 ;
텍스트 장식 : 없음 ;
}
기본 {
심 : 18px ;
}
보행인 {
배경색 : 분홍색 ;
색상 : 하얀색 ;
텍스트 정렬 : 센터 ;
심 : 8px ;
}
관찰할 수 있듯이 아래 출력에서는 디자인이 모바일 우선 반응형임을 확인했습니다.
방법 2: 미디어 쿼리를 사용하여 더 큰 화면에 대한 반응형 디자인 만들기
위 디자인은 태블릿, 데스크톱 등 더 큰 화면에도 제작할 수 있습니다. 이를 위해 사용자는 CSS에 미디어 쿼리를 포함해야 합니다. 태블릿의 너비는 “ 786px ” 그리고 데스크탑의 경우는 “ 1024px '.
미디어 쿼리를 적용하려면 먼저 ' @미디어 ” 태그를 CSS 파일에 추가하세요. 그런 다음 'min-width' 속성을 ' 768px '. 즉, 최소 화면 크기 “768px” 이상이 충족될 때마다 다음 CSS가 적용됩니다.
@미디어 ( 최소 너비 : 768px ) {몸 {
글꼴 크기 : 14px ;
}
머리글 {
심 : 18px ;
}
탐색 {
표시하다 : 몸을 풀다 ;
}
그들의 배 {
여유 : 0 8px ;
}
기본 {
표시하다 : 몸을 풀다 ;
정당화 내용 : 공백 사이 ;
항목 정렬 : 센터 ;
}
보행인 {
심 : 18px ;
}
}
아래 출력은 디자인이 더 큰 화면에서도 반응한다는 것을 보여줍니다.
결론
모바일 우선 반응형 디자인을 설정하려면 먼저 HTML 구조를 만들고 뷰포트를 추가하세요. 그런 다음 head 태그에 CSS 파일을 연결합니다. 그런 다음 모바일 우선 반응형 디자인을 기반으로 CSS를 적용합니다. 또한 사용자는 CSS 미디어 쿼리를 추가하여 모바일 장치에서 조정할 수 있습니다. 이 글에서는 모바일 우선 반응형 디자인을 설정하는 자세한 절차를 보여주었습니다.