응답식 설계 소개
다음 비디오를 보거나 확장된 성적표를 첨부할 수 있습니다.
Review the source code >
본 수업을 시작하려면 1회부터starter project, 또는 15회부터review the source files를 열어 주십시오.
이 수업을 시작하려면 VSCode에서 우리의 프로젝트를 열어 주십시오.
만약 저희에 방금 가입하셨다면, starter 프로젝트를 다운로드하여 진도를 따라잡을 수 있습니다. 동영상 설명의 링크를 참고하십시오.
터미널에서 프로젝트를 실행하려면 시작 명령
npm run start을 입력합니다.우리는 감독실을 개방하는 것부터 시작할 것이다.
그리고 핸드폰처럼 보이는 아이콘으로 장치 도구 모음을 열 것입니다.
현재 크롬 브라우저의 내부가 업데이트되었습니다. 웹 페이지를 제한된 창에 포장합니다.
상단에서 새 도구막대를 볼 수 있습니다. 일반적인 장치의 미리 설정된 크기에서 선택하거나 응답으로 설정한 다음 구석에서 드래그해서 크기를 조정할 수 있습니다.아니면 자신의 차원을 입력할 수 있습니다.조정이 필요하다면, 백분율은 관람 백분율이다.다음은 아날로그 대역폭이나 다운로드 속도의 능력, 마지막으로 아날로그 회전 장치의 아이콘, 이것은 사실상 회전 차원이다.
iPhone 모델을 선택하겠습니다. iPhone 6/7/8을 선택하겠습니다.
보시다시피 우리의 내용은 읽기가 매우 어렵습니다.왜냐하면 차원이 매우 작을 뿐만 아니라, 우리는 HTML에 특수한 표시를 추가해야 하기 때문이다.
VSCode로 이동하여 파일
index.html을 엽니다.<head> 에서 뷰포트 메타 태그를 추가해야 합니다. <meta name="viewport" content="width=device-width, initial-scale=1">
뷰포트 표시는 대형 데스크톱 모니터에 표시되든 이동 전화에 표시되든 크기를 적절하게 조정할 수 있는 사이트에 필요한 것이다.
content 속성을 통해 행동을 정의할 수 있는 몇 가지 방법이 있다.브라우저 창 폭과 일치하도록 HTML 문서 폭을 설정하는 것이 가장 권장되며 기본적으로 페이지의 항목 배율에는 영향을 주지 않습니다.저장, 이제 장치 시뮬레이터에 있는 외관을 봅시다.
많이 좋아졌어!뷰포트 메타 태그는 응답성 설계를 작성하는 첫 번째 단계입니다.
Responsive design is a term coined by Ethan Marcotte to describe the behavior of content adapting to the resolution of the rendering device.
viewport 메타데이터를 추가하기 전에 보았듯이 장치는 내용을 조정해야 한다는 것을 깨닫지 못했습니다.따라서 반대로 데스크톱 환경을 가정하면 관중들이 내용을 읽을 수 있도록 축소되고 축소될 수 있다.
계속하기 전에viewport 메타태그를 나머지 HTML 파일에 추가합니다.
본 수업에서 우리는 블로그와 카드 레이아웃을 업데이트함으로써 응답식 디자인을 실현하는 기초 지식을 배울 것이다.
블로그부터 시작하겠습니다. 우선, 메타 표시를 추가한 효과를 볼 수 있습니다.포함 브라우저 URL을 업데이트합니다
/blog-layout.html.
우리가 이 페이지의 대부분 시간 동안 기본적인 텍스트 내용만 제공한 덕분에, 이것은 이상에서 그리 멀지 않다.조정해야 할 주요 일은 이미지 정렬과 블로그 내용의 첫 번째 부분이다.
장치 도구 모음에서 Responsive 옵션으로 전환하고 크기를 천천히 수동으로 조정합니다.창의 확장에 따라 내용이 어떻게 변하는지 볼 수 있습니다.
도구막대에서 정확한 픽셀 폭을 볼 수 있습니다. 이 정보를 사용하여 첫 번째 CSS 미디어 조회를 만들 것입니다.
A media query is a CSS method to attach to characteristics such as viewport width, as well as a few selected device preferences and features.
VSCode에서
blog-layout.css 클래스를 정의한 후 파일의 끝으로 스크롤합니다.현재,
img--align-left 값은 비교적 큰 데스크톱 뷰포트에서 이상적이지만, 우리가 본 바와 같이, 이동 뷰포트에서는 이상적이지 않다.float 기호로 정의된 첫 번째 미디어 조회를 추가합니다. 뒤에 단어'media'가 붙어 있습니다.그리고 괄호에서 우리는 미디어 조회의 목표를 정의했다. @media ()
사전 설정된 장치 치수 목록을 내려다보면 320-414 범위가 됩니다.그러나 우리도 우리의 내용의'편안도'를 고려해야 하기 때문에 460을 좋은 짝수로 삼자.
This number has a term in responsive design which is called "breakpoint", as in the point at which the layout breaks.
현재, 우리는 미디어 조회에서 이 숫자를 사용하여 괄호에 다음과 같은 내용을 정의할 것이다.
@ 이것은 우리가 정의한 규칙이 460px 이하의 너비에 적용된다는 것을 의미한다.그리고 일반적인 CSS 규칙을 정의하는 것처럼 괄호를 열고 이미지 클래스를 다시 정의해야 합니다.
@media (max-width: 460px) {
.img--align-left {
}
}
float: none;
display: block;
margin-left: auto;
margin-right: auto;
(max-width: 460px) 로 전환합니다. 기본적으로 이미지가 내연 요소이기 때문에 내연으로 유지하면 여백이 올바르게 적용되지 않습니다.그리고 우리는 자동 여백을 응용하여 이미지를 가운데에 놓는다. 이것은 우리가 최초의 블로그 CSS에서 배운 기술이다.저장한 다음 응답 모드로 전환합니다.미디어 조회가 이미지를 어떻게 스타일로 바꾸는지 천천히 크기를 조정합시다.아주 좋아요!
장치 도구 모음을 닫고 브라우저 URL을
block 로 업데이트합니다.검사기는 브라우저 창의 한쪽에 있기 때문에 뷰포트의 크기를 조정할 수도 있습니다.우리가 시간이 바뀌자 카드는 내용보다 합리적인 값으로 수축되기 시작했고 심지어는 가격이 카드에 넘치기 시작했다.
우리의 블로그 제목과 유사하게 우리는 제품 제목이 얼마나 길지 예측할 수 없기 때문에 우리는 가능한 한 빨리 카드 폭을 조정하고 카드 제목 텍스트의 크기를 약간 조정하여 우리의 조정을 더욱 증명할 수 있기를 희망할 수 있다.아이패드 초상화 모드에서 일반적으로 추천하는 단점은 768px이기 때문에 미디어 검색에서 이 단점을 사용할 것입니다.
VSCode에서
/card-layout.html 를 열려면 먼저 card-layout.css 클래스에 미디어 조회를 추가해야 합니다. 왜냐하면 카드의 폭을 제어하기 때문입니다.현재 우리의 블로그 구조에 대해 우리는
card-row의 사상을 사용하여 미디어 조회를 추가했지만 max-width로'이동 우선 디자인'의 사상을 보급할 수 있다."Mobile-first design" is when you define your initial rule assuming the smallest, or mobile sized, viewport, and then above a certain width, you define desktop rules within your media queries.
가장 작은 시야에서 우리는 카드 열을 원하지 않고 카드가 쌓이기만을 바란다.따라서 우리는 미디어 조회에서 아래와 같이 전체 기존 규칙을 실제적으로 포장할 것이다.
@media (min-width: 768px)
이제 모든 내용을 한 열에 올리기에는 좀 이르다. 따라서 이 규칙을 현재 규칙에 복사하고 너비를
min-width 로 조정한 다음 460px 으로 업데이트하고 저장하자. @media (min-width: 460px)
미디어 쿼리는 CSS 종속 연결에 의해 제한되므로 첫 번째 규칙의 규칙을 계승하기 때문에 두 번째 미디어 쿼리에서
grid-template-columns: 48% 48% 및 display 규칙을 실제로 삭제할 수 있습니다.장치 도구 모음으로 전환하여 미리 설정된 이동 뷰포트를 확인합니다.단일 카드 뷰포트는 상당히 괜찮은데, 단지 카드 사이의 거리가 너무 가깝다.우리는 약간의 이윤을 늘려야 하지만, 우리는 이 가장 작은 사이즈만 원한다.
하나의 정책은 응답 간격 유틸리티 클래스를 만드는 것입니다. 추가 간격이 필요할 때 별도의 규칙을 만드는 것이 아니라 클래스에 추가할 수 있습니다.예를 들어 모든 카드가 아닌 카드에 간격을 적용하는 것도 유용하다.
CSS 파일의 하단에서 다음을 추가합니다.
@media (max-width: 460px) {
// `m` = margin, `t` = top
// `xs` to denote this is applied at the "extra small" viewport
.m-t-xs {
margin-top: 24px;
}
}
justify-content 중의 두 번째와 세 번째 카드에 추가해야 한다.우리는 그것을 첫 번째로 추가하지 않을 것이다. 왜냐하면 이것은 우리가 진정으로 필요로 하지 않는 추가 공간을 증가시킬 수 있기 때문이다.
저장, 이게 더 좋아 보여요.그러나 만약 우리가 응답 설정으로 돌아가서 두 개의 열 카드가 있을 때까지 크기를 조정한다면, 세 번째 카드는 현재 추가 공간을 필요로 한다.따라서 유틸리티 미디어 쿼리 클래스를 하나 더 추가할 수 있지만, 이번에는 이 클래스를 최소 너비와 최대 너비에 추가하여 적용 범위를 다음과 같이 설정합니다.
// Apply between our xs breakpoint and our "medium" breakpoint
@media (min-width: 460px) and (max-width: 768px) {
.m-t-sm {
margin-top: 24px;
}
}
우리는 크기를 수동으로 조정하여 볼 수 있다. 이것은 매우 좋지만, xs 뷰포트로 떨어지기 전에, 가격은 상당히 편안하게 시작되며, 제목은 대략 520픽셀이다.Inspector를 사용하면 크기가 글로벌 스타일시트에서 20px로 상속되는 것을 볼 수 있습니다.우리는 그것의 크기를 과도하게 조정하고 싶지 않다. 왜냐하면 우리는 그것이 여전히 본문 텍스트보다 크기를 원하기 때문에, 우리는 18px로 낮출 수 있다.
card-layout.html에 대한 미디어 조회를 추가합니다. 이 규칙의 바로 아래에 놓을 것입니다.소시구에서 우리는 비교적 작은 글꼴 크기를 필요로 하기 때문에
h3 미디어 조회를 실행하여 미디어 조회를 더욱 작게 할 것이다. @media (max-width: 520px) {
.card h3 {
font-size: 18px;
}
}
만약 당신이 이 시리즈에 관심을 가지고 있다면, 당신은 이미 HTML과 CSS의 기초 지식을 배웠습니다. 축하합니다!🎉
Stay tuned for the capstone project series where you will build and publish your first complete website!
Reference
이 문제에 관하여(응답식 설계 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/5t3ph/intro-to-responsive-design-40n3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
