반응형 웹 디자인 기초

웹 서핑을 위한 모바일 장치의 사용은 천문학적인 속도로 계속 증가하고 있으며 이러한 장치는 종종 디스플레이 크기의 제약을 받기 때문에 콘텐츠가 화면에 배치되는 방식에서 새로운 접근 방식이 요구됩니다.

A List Apart에서 Ethan Marcotte이 처음 정의한 반응형 웹 디자인은 사용자와 사용자가 사용하는 장치의 요구에 대응합니다. 장치의 크기와 기능에 따라 레이아웃이 달라집니다. 예를 들어, 전화 사용자는 하나의 열에 콘텐츠가 표시되는 모습을 볼 수 있지만, 태블릿은 동일한 콘텐츠를 두 개의 열에 표시할 수 있습니다.

휴대폰, "패블릿", 태블릿, 데스크톱, 게임 콘솔, TV, 심지어 웨어러블에 이르기까지 다양한 화면 크기가 존재합니다. 화면 크기는 계속해서 변하기 때문에 사이트가 현재 또는 미래의 모든 화면 크기에 적응할 수 있도록 하는 것이 중요합니다. 또한 장치에는 우리가 상호 작용하는 다양한 요소들이 있습니다. 예를 들어 방문자 중 일부는 터치스크린을 사용합니다. 현대적인 반응형 디자인은 이러한 모든 사항을 고려하여 모든 사람의 경험을 최적화합니다.

뷰포트 설정 #

다양한 장치에 최적화된 페이지는 문서 헤드에 메타 뷰포트 태그를 포함해야 합니다. 메타 뷰포트 태그는 페이지의 크기와 배율을 제어하는 방법에 대한 정보를 브라우저에 제공합니다.

최상의 경험을 제공하기 위해 모바일 브라우저는 페이지를 데스크톱 화면 너비(일반적으로 약 980px , 그러나 장치에 따라 다름)로 렌더링한 다음 글꼴 크기를 늘리고 화면에 맞게 콘텐츠 크기를 조정하여 콘텐츠를 더 보기 좋게 만듭니다. 즉, 사용자에게 글꼴 크기가 일관되지 않게 나타날 수 있어 콘텐츠를 보고 상호 작용하기 위해 사용자가 두 번 탭하거나 핀치하여 확대해야 할 수 있습니다.

< html lang = " en " >

< head >

…

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

…

…

메타 뷰포트 값 width=device-width 를 사용하면 장치 독립적인 픽셀로 화면 너비를 일치시킬 것을 페이지에 지시합니다. 고밀도 화면에서 많은 물리적 픽셀로 구성될 수 있는 단일 픽셀의 표현인 장치(또는 밀도) 독립 픽셀입니다. 이를 통해 페이지는 작은 휴대폰에서 렌더링하든 큰 데스크톱 모니터에서 렌더링하든 다양한 화면 크기와 일치하도록 콘텐츠를 리플로우할 수 있습니다. 뷰포트 메타 태그가 없는 기기에서 페이지가 로드되는 방식을 보여주는 예입니다. Glitch에서 이 예를 참조하세요. 뷰포트 메타 태그가 있는 기기에서 페이지가 로드되는 방식을 보여주는 예입니다. Glitch에서 이 예를 참조하세요.

일부 브라우저는 가로 모드로 회전할 때 페이지의 너비를 일정하게 유지하고 리플로우 대신 확대/축소를 통해 화면을 채웁니다. initial-scale=1 값을 추가하면 브라우저가 장치 방향에 관계없이 CSS 픽셀과 장치 독립적인 픽셀 사이에 1:1 관계를 유지하도록 지시하고 페이지에서 전체 가로 너비를 활용할 수 있습니다. 주의 이전 브라우저에서 속성을 제대로 구문 분석할 수 있도록 쉼표를 사용하여 속성을 구분하세요.

width 또는 initial-scale 가 있는 태그가 없습니까 Lighthouse 감사는 HTML 문서가 뷰포트 메타 태그를 올바르게 사용하고 있는지 확인하는 프로세스를 자동화하는 데 도움을 줄 수 있습니다.

액세스 가능한 뷰포트 확인 #

initial-scale 을 설정하는 외에 뷰포트에서 다음 속성을 설정할 수도 있습니다.

minimum-scale

maximum-scale

user-scalable

이러한 속성을 설정하면 사용자가 뷰포트를 확대/축소할 수 없게 되어 잠재적으로 접근성 문제가 발생할 수 있습니다. 따라서 이러한 속성을 사용하지 않는 것이 좋습니다.

뷰포트에 맞게 콘텐츠 크기 조정 #

데스크톱과 모바일 기기 모두에서 사용자는 웹사이트를 세로로 스크롤하는 데는 익숙하지만 가로는 그렇지 않습니다. 전체 페이지를 보기 위해 사용자가 가로로 스크롤하거나 축소해야 한다면 사용자 경험이 나빠집니다.

메타 뷰포트 태그가 있는 모바일 사이트를 개발할 때 실제로 지정된 뷰포트에 맞지 않는 페이지 콘텐츠를 제작하는 실수를 하기가 쉽습니다. 예를 들어, 뷰포트보다 넓은 너비로 표시되는 이미지가 있으면 뷰포트를 가로로 스크롤해야 할 수 있습니다. 사용자가 가로로 스크롤할 필요가 없도록 이 콘텐츠를 뷰포트 너비에 맞게 조정해야 합니다.

뷰포트에 맞게 콘텐츠 크기가 올바르게 지정되지 않았습니다. Lighthouse 감사를 통해 범위를 넘어가는 콘텐츠를 감지하는 프로세스를 자동화할 수 있습니다.

이미지의 크기는 고정되어 있으며 뷰포트보다 크면 스크롤바가 나타납니다. 이 문제를 처리하는 일반적인 방법은 모든 이미지에 100% 의 max-width 를 부여하는 것입니다. 이렇게 하면 뷰포트 크기가 이미지보다 작은 경우 이미지가 공간에 맞게 축소됩니다. 그러나 width 가 아닌 max-width 가 100% 이기 때문에 이미지가 원래 크기보다 크게 늘어나지 않습니다. 일반적으로 이미지가 스크롤바를 유발하는 문제가 발생하지 않도록 스타일시트에 다음을 추가하는 것이 안전합니다.

img {

max-width : 100% ;

display : block ;

}

img 요소에 이미지 크기 추가 #

max-width: 100% 를 사용하는 경우 이미지의 자연적인 치수를 무시하는 것이지만 태그에서 width 및 height 속성을 계속 사용해야 합니다. 이는 최신 브라우저가 이 정보를 사용하여 이미지가 로드되기 전에 해당 공간을 예약하기 때문에 콘텐츠가 로드될 때 레이아웃이 변경되는 것을 방지하는 데 도움이 됩니다.

CSS 픽셀의 화면 크기와 너비는 기기(예: 휴대폰과 태블릿, 심지어 휴대폰 간에도)에 따라 크게 다르기 때문에 콘텐츠가 잘 렌더링되기 위해 특정 뷰포트 너비에 의존해서는 안 됩니다.

과거에는 레이아웃을 생성하는 데 사용되는 요소를 백분율로 설정해야 했습니다. 아래 예에서 픽셀을 사용하여 크기가 조정된 부동 요소가 있는 2-열 레이아웃을 볼 수 있습니다. 뷰포트가 열의 전체 너비보다 작아지면 콘텐츠를 보기 위해 가로로 스크롤해야 합니다. 픽셀을 사용하는 부동 레이아웃. Glitch에서 이 예제를 참조하세요.

너비에 백분율을 사용하면 열이 항상 컨테이너의 특정 비율로 유지됩니다. 즉, 스크롤바를 만드는 대신 열이 좁아집니다.

Flexbox, Grid Layout 및 Multicol과 같은 최신 CSS 레이아웃 기술을 사용하면 이러한 유연한 그리드를 훨씬 쉽게 만들 수 있습니다.

이 레이아웃 방법은 크기가 다른 항목 집합이 있고 작은 항목은 더 적은 공간을 차지하고 큰 항목은 더 많은 공간을 차지하여 한 행 또는 여러 행에 항목이 보기 좋게 놓이도록 하려는 경우에 이상적입니다.

.items {

display : flex ;

justify-content : space-between ;

}

반응형 디자인에서 Flexbox를 사용하여 항목을 단일 행으로 표시하거나 사용 가능한 공간이 줄어들면 여러 행으로 래핑할 수 있습니다.

Flexbox에 대해 자세히 알아보기

CSS 그리드 레이아웃 #

CSS 그리드 레이아웃을 사용하면 유연한 그리드를 간단하게 생성할 수 있습니다. 백분율로 열을 만드는 대신 이전의 부동 예제를 고려하면 그리드 레이아웃, 그리고 컨테이너에서 사용 가능한 공간 부분을 나타내는 fr 단위를 사용할 수 있습니다.

.container {

display : grid ;

grid-template-columns : 1fr 3fr ;

}

그리드를 사용하여 수용 가능한 만큼 많은 항목을 사용하여 일반 그리드 레이아웃을 만들 수도 있습니다. 화면 크기가 줄어들면 사용 가능한 트랙 수가 줄어듭니다. 아래 데모에는 각 행에 들어갈 수 있는 만큼의 카드가 있으며 최소 크기는 200px 입니다.

CSS 그리드 레이아웃에 대해 자세히 알아보기

다중 열 레이아웃 #

일부 형태의 레이아웃에는 column-width 속성으로 여러 개의 반응형 열을 생성할 수 있는 다중 열 레이아웃(Multicol)을 사용할 수 있습니다. 아래 데모에는 또 다른 200px 열을 위한 공간이 있는 경우 열이 추가되는 것을 볼 수 있습니다.

Multicol에 대해 자세히 알아보기

빠른 응답을 위해 CSS 미디어 쿼리 사용 #

위에 표시된 기술이 허용하는 것보다 특정 화면 크기를 지원하기 위해 레이아웃을 더 광범위하게 변경해야 할 때가 있습니다. 이 때 미디어 쿼리가 유용합니다.

미디어 쿼리는 CSS 스타일에 적용할 수 있는 간단한 필터입니다. 콘텐츠를 렌더링하는 장치 유형 또는 해당 장치의 특징(예: 너비, 높이, 방향, 호버링 가능 여부, 장치를 터치스크린으로 사용 중인지 여부)에 따라 스타일을 쉽게 변경할 수 있습니다.

다양한 인쇄 스타일을 제공하려면 다음과 같이 인쇄 스타일이 있는 스타일시트를 포함할 수 있도록 출력 유형을 지정해야 합니다.

< html lang = " en " >

< head >

…

< link rel = " stylesheet " href = " print.css " media = " print " >

…

…

또는 미디어 쿼리를 사용하여 기본 스타일시트에 인쇄 스타일을 포함할 수 있습니다.

@media print {

}

@import 구문, @import url(print.css) print; 를 사용하여 기본 CSS 파일에 별도의 스타일시트를 포함할 수도 있지만 이러한 사용은 성능상의 이유로 권장되지 않습니다. 자세한 내용은 구문,를 사용하여 기본 CSS 파일에 별도의 스타일시트를 포함할 수도 있지만 이러한 사용은 성능상의 이유로 권장되지 않습니다. 자세한 내용은 CSS 가져오기 방지 를 참조하세요.

반응형 웹 디자인의 경우 일반적으로 더 작은 화면에 다른 레이아웃을 제공하기 위해, 또는 방문자가 터치스크린을 사용하는 것으로 감지될 때 장치의 특징을 쿼리합니다.

뷰포트 크기에 따른 미디어 쿼리 #

미디어 쿼리를 사용하면 작은 화면, 큰 화면 및 그 중간 화면에 특정 스타일이 적용되는 반응형 경험을 만들 수 있습니다. 따라서 여기에서 감지하는 특징은 화면 크기이며 다음 사항을 테스트할 수 있습니다.

width ( min-width , max-width )

( , ) height ( min-height , max-height )

( , ) orientation

aspect-ratio

이러한 모든 특징은 뛰어난 브라우저 지원을 제공합니다. 브라우저 지원 정보를 포함한 자세한 내용은 MDN의 너비, 높이, 방향 및 종횡비를 참조하세요. 사양에는 device-width 및 device-height 에 대한 테스트가 포함되었습니다. 이러한 테스트는 더 이상 사용되지 않으며 피해야 합니다. device-width 및 device-height 는 실제로 유용하지 않은 장치 창의 실제 크기를 테스트합니다. 예를 들어 사용자가 브라우저 창의 크기를 조정한 경우, 이것은 보고 있는 뷰포트와 다를 수 있기 때문입니다.

장치 기능에 따른 미디어 쿼리 #

사용 가능한 장치가 늘어남에 따라 모든 대형 장치가 일반 데스크톱 또는 랩톱 컴퓨터라거나, 사람들이 작은 장치에서만 터치스크린을 사용할 것이라고 가정할 수는 없습니다. 미디어 쿼리 사양에 몇 가지 새로운 추가 기능을 사용하여 장치와 상호 작용하는 데 사용되는 포인터 유형 및 사용자가 요소 위로 마우스를 이동할 수 있는지 여부와 같은 기능을 테스트할 수 있습니다.

hover

pointer

any-hover

any-pointer

일반 데스크톱 컴퓨터, 휴대폰 또는 태블릿과 같은 다양한 장치에서 이 데모를 보세요.

이러한 새로운 기능은 모든 최신 브라우저에서 잘 지원됩니다. MDN 페이지에서 호버, 임의의 호버, 포인터, 임의의 포인터에 대해 자세히 알아보세요.

any-hover 및 any-pointer 사용하기 #

any-hover 및 any-pointer 기능은 사용자가 마우스를 가져갈 수 있는지 여부를 테스트하거나, 장치와 상호 작용하는 기본 방식이 아닌 경우에도 해당 유형의 포인터를 사용하는지 여부를 테스트합니다. 사용자가 터치스크린을 사용하고 있을 때 마우스로 전환하도록 만드는 것은 그다지 친절하지 않습니다! 그러나 any-hover 및 any-pointer 는 사용자가 가지고 있는 장치의 종류를 파악하는 것이 중요한 경우 유용할 수 있습니다. 예를 들어, 터치스크린과 트랙 패드가 있는 노트북은 호버링 기능 외에도 거친 포인터와 미세한 포인터를 일치시켜야 합니다.

중단점을 선택하는 방법 #

장치 클래스를 기반으로 중단점을 정의하지 마세요. 현재 사용 중인 특정 장치, 제품, 브랜드 이름 또는 운영 체제를 기반으로 중단점을 정의하면 유지 관리에서 큰 어려움에 봉착할 수 있습니다. 대신, 콘텐츠 자체에 따라 레이아웃이 컨테이너에 맞게 조정되는 방식이 결정되어야 합니다.

작게 시작하여 주요 중단점을 선택하고 점차 확대 #

먼저 작은 화면 크기에 맞게 콘텐츠를 디자인한 다음 중단점이 필요할 때까지 화면을 확장합니다. 이를 통해 콘텐츠를 기반으로 중단점을 최적화하고 중단점의 수를 가능한 한 최소화할 수 있습니다.

처음에 본 예제인 날씨 예보를 계속 작업해 보겠습니다. 첫 번째 단계는 작은 화면에서 예보가 잘 보이도록 하는 것입니다. 너비가 좁은 앱.

그런 다음, 요소 사이에 공백이 너무 많아 예보가 시각적으로 이상해 보일 때까지 브라우저 크기를 조정합니다. 결정은 다소 주관적이지만 위의 600px 는 확실히 너무 넓습니다. 디자인을 조정해야 한다고 느껴지는 시점까지 이른 앱.

600px 에 중단점을 삽입하려면 구성요소의 CSS 끝에 두 개의 미디어 쿼리를 만듭니다. 하나는 브라우저가 600px 이하일 때 사용하고 다른 하나는 600px 보다 넓을 때 사용합니다.

@media ( max-width : 600px ) {

}

@media ( min-width : 601px ) {

}

마지막으로, CSS를 리팩토링합니다. 600px 의 max-width 에 대한 미디어 쿼리 내부에 작은 화면만을 위한 CSS를 추가합니다. 601px 의 min-width 에 대한 미디어 쿼리 내부에는 더 큰 화면을 위한 CSS를 추가합니다.

필요한 경우 부수적인 중단점 선택 #

레이아웃이 크게 변경될 때 주요 중단점을 선택하는 외에도 부수적인 변경에 맞게 조정하는 것도 도움이 됩니다. 예를 들어, 주요 중단점 사이에 요소의 여백 또는 패딩을 조정하거나 레이아웃에서 더 자연스럽게 느껴지도록 글꼴 크기를 늘리는 것이 도움이 될 수 있습니다.

작은 화면 레이아웃을 최적화하는 것부터 시작하겠습니다. 이 경우, 뷰포트 너비가 360px 이상일 때 글꼴을 키워보겠습니다. 둘째, 공간이 충분할 때 고온과 저온을 분리하여 서로 위, 아래로 놓이지 않고 같은 라인에 있도록 할 수 있습니다. 날씨 아이콘도 좀 더 크게 만들어 보겠습니다.

@media ( min-width : 360px ) {

body {

font-size : 1.0em ;

}

}

@media ( min-width : 500px ) {

.seven-day-fc .temp-low,

.seven-day-fc .temp-high {

display : inline-block ;

width : 45% ;

}

.seven-day-fc .seven-day-temp {

margin-left : 5% ;

}

.seven-day-fc .icon {

width : 64px ;

height : 64px ;

}

}

마찬가지로 대형 화면의 경우 전체 화면 너비를 사용하지 않도록 예보 패널의 최대 너비로 제한하는 것이 가장 좋습니다.

@media ( min-width : 700px ) {

.weather-forecast {

width : 700px ;

}

}

읽기 좋게 텍스트 최적화 #

고전적인 가독성 이론에 따르면 이상적인 열은 한 줄에 70~80자(영어의 경우 약 8~10단어)를 포함해야 합니다. 따라서 텍스트 블록의 너비가 약 10단어를 초과할 때마다 중단점을 추가하는 것이 좋습니다. 모바일 장치에서 읽혀지는 텍스트. 줄 길이를 제한하기 위해 중단점이 추가된 데스크톱 브라우저에서 읽혀지는 텍스트.

위의 블로그 게시물 예를 자세히 살펴보겠습니다. 작은 화면에서 1em 의 Roboto 글꼴은 한 줄에 10단어를 제공하여 완벽하게 작동하지만 큰 화면에서는 중단점이 필요합니다. 이 경우 브라우저 너비가 575px 보다 크면 이상적인 콘텐츠 너비는 550px 입니다.

@media ( min-width : 575px ) {

article {

width : 550px ;

margin-left : auto ;

margin-right : auto ;

}

}

단순히 콘텐츠를 숨기지 말 것 #

화면 크기에 따라 숨기거나 표시할 콘텐츠를 선택할 때 주의하세요. 단순히 화면에 맞출 수 없다는 이유로 콘텐츠를 숨기지 마세요. 사용자가 원하는 것이 화면 크기에 의해서만 결정되는 것은 아닙니다. 예를 들어, 일기 예보에서 꽃가루 수를 없애면 봄철에 외출할지 여부를 결정하기 위해 이 정보가 꼭 필요한 알레르기 환자에게 심각한 문제가 될 수 있습니다.

미디어 쿼리 중단점을 설정했으면 이로 인해 사이트가 어떻게 표시되는지 확인하고 싶을 것입니다. 브라우저 창의 크기를 조정하여 중단점을 트리거할 수 있지만 Chrome DevTools에는 다양한 중단점에서 페이지가 어떻게 보이는지 쉽게 확인할 수 있는 기능이 기본적으로 제공됩니다. 더 넓은 뷰포트 크기에서 볼 때 날씨 앱을 보여주는 DevTools. 더 좁은 뷰포트 크기에서 볼 때 날씨 앱을 보여주는 DevTools.

다른 중단점에서 페이지를 보려면 다음 단계를 따르세요.

DevTools를 연 다음 Device Mode를 켭니다. 기본적으로 반응형 모드에서 열립니다.

미디어 쿼리를 보려면 장치 모드 메뉴를 열고 미디어 쿼리 표시를 선택하여 중단점을 페이지 위에 컬러 막대로 표시합니다.

해당 미디어 쿼리가 활성화되어 있는 동안 막대 중 하나를 클릭하여 페이지를 봅니다. 막대를 마우스 오른쪽 버튼으로 클릭하면 미디어 쿼리의 정의를 볼 수 있습니다. CSS레이아웃모바일UX

마지막 업데이트: May 14, 2020 — 기사 개선하기

[css] 반응형 웹을 만들어보자(모바일,테블릿,데스크탑,미디어쿼리..)

반응형

반응형 웹이란

하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 디스플레이 종류에

따라 화면 크기가 자동으로 변하게 만드는 기법이다

개인적으로 애플 공식홈페이지가 멋있는것 같다

요새 사이트에서 반응형웹은 필수이다.

알아보자

반응형 웹 디자인을 체크할 수 있는 가장 쉬운 방법은 크롬 브라우저를 사용하는 것이다

F12를 누르면 다음과 같이 html css 정보 및 모바일 화면을 볼 수 있다

일반인이라면 허겁지겁 꺼야되는 화면이지만 개발자는 유용하게 사용할 수 있다

가장 먼저 해주어야 할 것은

HTML파일 내부의 ... 안에 다음과 같이 설정해 주어야 한다

@import로 미디어 쿼리 적용하기

@import url(cssscreen.css) screen; @import url(csspprint.css) print;

@media로 미디어 쿼리 적용하기

@media screen{ CSS 속성 }

여기서 스크린과 프린트 모든 속성에 똑같이 적용하고 싶다면 media="all" 또는 media 부분 생략하면

된다

예)

@import url("main.css") only screen and (min-width:200px) and (max-width:480px); @media only screen and (min-width:200px) and (max-width:480px) { css속성 }

(min-width:200px) and (max-width:480px) 라는 부분이 있는데 해상도에 따른 CSS파일을 따로 지정해

줄 수 있다

이미지 크기 조절하기

모바일 기기의 가로 사이즈는 최대 768px이다 만약 크기가 1000px이 넘어간다면 잘려서 보일 것이다

.img_responsive{ width: 100%; //주목 height: auto; }

요로면 어떤 모바일 기기라도 정확하게 보일 것이다

이미지를 먼저 반응형으로 처리하면 매우 편리하다

max-width와 min-width를 이용하여 처리를 한다

예를 들어 박스의 크기를 max-width: 500px로 지정하면 최대 크기가 500px이고 min-width: 500px이면 최소 크기가 500px이 된다

==

min같은 경우 브라우저 크기가 작아지면 박스의 크기가 500px밑으로 줄어들지 않고 max는 500px이상으로 늘어나지 않는다

미디어 쿼리로 웹 페이지 처리하기

미디어 쿼리는 실제 적용하는 기기에 맞게끔 CSS 내부에 별도의 처리를 해주는 것이다

스마트폰 , 테블릿, 데스크탑 이렇게 세 종류이고 스마트폰과 테블릿의 경우 가로로 볼 때도 있고 세로로 볼 때도 있다

그래서 스마트폰은 세로 해상도를 기본, 테블릿은 가로를 세로를 기본으로 하고 가로를 추가 한다, 데스크탑은 가로를 기본으로 한다

스마트폰은 가로 ~768px(최대), 테블릿 세로인 경우 (최소)768px~992px(최대) , 가로화면은 (최소) 992px~1200px(최대), 데스크탑은 최소 1200px~ 로 나누자

@media (max-width: 767px){ //모바일 } @media (min-width: 768px) and (max-width: 991px) { // 테블릿 세로 } @media (min-width: 992px) and (max-width: 1199px) { // 테블릿 가로 } @media (min-width: 1200px) { // 데스크탑 일반 }

↑ 요것을 기준으로 나누어 css를 짜자

예) 다음과 같은 웹 페이지를 모바일 화면에서 봐 보자

.container{ //전체를 담는 박스 width: 100%; height: 1000px; } .itembox{ //그림과 텍스트가 들어있는 칸 width: 100%; display: flex; justify-content: space-around; align-items: center; } .imgbox{ //이미지 들어있는 박스 width: 100%; height: auto; margin: 2%; } .image{ //이미지 width: 100%; } .textbox{ //텍스트 들어있는 박스 padding: 20px; }

@media 를 사용해서 모바일화면(~767px) css를 만들자

다음과 같은 속성을 주었다

@media (max-width: 767px){ .itembox{ display: block; // block으로 만들어 텍스트가 밑에 내려오게 만든다 } .imgbox{ //현재 가로크기에 맞게 꽉차게 width: 90%; padding: 20px; } .textbox{ //양쪽 정렬 padding: 20px 20px 10px 20px; text-align: justify; } }

결과: 모바일화면에서 세로로 보여진다 이게 바로 반응형

잘 익혀두자

참조: '백견불여일타HTML5&CSS3'

반응형

CSS] 반응형 구현해보기

스틱코드라는 플러그인을 이용해 반응형 예제를 구현해봅시다.

스틱 코드에 등록된 코드를 간편하게 불러와서 사용해봅시다.

* 반응형 웹 예제

https://stickode.com/detail.html?no=2195

====================================================================

반응형 웹 디자인이란?

하나의 웹사이트에서 PC, 스마트폰, 태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법을 말합니다.

반응형을 하면 무엇이 좋은가?

웹사이트를 PC용과 모바일용으로 각각 별개로 제작하지 않고, 하나의 공용 웹사이트를 만들어 다양한 디바이스에 대응할 수 있습니다. PC용 URL과 모바일용 URL이 동일하기 때문에 검색 포털 등 광고를 통한 사용자 접속을 효율적으로 관리할 수 있습니다. 또한 웹 페이지 내용을 수정할 경우, 하나의 페이지만 수정하면 PC와 모바일 등 다양한 디바이스에서 동일하게 반영됩니다.

- 위키백과

====================================================================

반응형 웹의 핵심 기술은 가변 그리드(fluid grid), 유연한 이미지(flexible images), 미디어 쿼리(media query)가 있습니다.

이중에서 오늘은 미디어쿼리를 이용하여 반응형을 구현하겠습니다!

미디어 쿼리란?

간단히 말해서 화면에 종류와 크기에 따라서 디자인을 달리 줄 수 있는 CSS기능

@media (max-width:600px){ /*가로 너비가 600px 이하일 때 아래 스타일 적용*/ }

미디어 쿼리에 대해서 더 공부 하고 싶다면?

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

====================================================================

반응형 웹 예제

전체코드

호출태그 : 반응형(html)

반응형 웹 구현하기

1

2

호출태그 : 반응형(css)

h1 { text-align:center; } div { font-size: 30px; text-align: center; } #main { display: grid; grid-template-columns: 3fr 1fr; } #main .contents { background-color:#b4b8ff; } #main .sidebar { background-color: #ffbecb; } footer { font-size: 30px; text-align: center; background-color: #c2ebf9; } /*미디어 뭐리!!!!!!!!!!*/ @media (max-width:600px){ /*가로 너비가 600px 이하일 때 아래 스타일 적용*/ #main { display: block; } #main .sidebar { min-height: 0; } }

<결과물>

기본 브라우저의 크기를 줄였을 때

반응형 웹사이트를 제작한다면 꼭 봐야할 사이트 모음

스마트폰이 나오면서 반응형 디자인 설계는 이제 필수가 되었습니다. 반응형 웹사이트는 어떤 구조와 디자인을 가지는지, 패턴과 아이디어를 얻을 수 있는 사이트들을 정리해보았습니다.

반응형 디자인 패턴알기

반응형 웹디자인은 몇가지 패턴이 있습니다. 구글 디벨로퍼에서는 유동형, 콜룸 드롭, 레이아웃 시프터 등 다양한 패턴에 대한 설명과 실제 구현가능한 코드까지 제공하고 있습니다.

국내 어워즈, 웹사이트 모음

좌 지디웹, 우 디비컷

해외 어워즈, 웹사이트 모음

좌 RWDB, 우 미디어쿼리

웹디자인 아이디어

좌 CSS가든, 우 라파닌자

반응형 템플릿

반응형 웹사이트 템플릿을 제공하는 사이트는 아래 사이트 말고도 다양하게 있습니다. 대부분 유료 템플릿을 판매하는 사이트인데, 무료로 제공하는 템플릿도 있으니 찾아보시면 도움이 되실 것 입니다.

국내 에이전시 홈페이지

국내 에이전시 사이트들을 찾아보면서, 웹사이트 디자인이나 구현에 참고하면 좋겠다고 생각한 부분을 괄호안에 적어서 정리해보았습니다.

에이전시 홈페이지와 포트폴리오는 현업에서 활약하시는 분들의 작품이니, 해외의 실험적인 디자인이 현실성없다고 느끼시는 분들은 주목해주세요.

모바일 UI, UX

마지막으로 반응형은 아니지만, 모바일 화면을 디자인할 때 참고하면 좋은 사이트도 안내하겠습니다.

이상으로 반응형 웹사이트를 제작한다면 꼭 봐야할 사이트 소개글을 마무리하겠습니다. 제작하시는 사이트가 수많은 웹사이트들 중에서도 빛나는 사이트가 되면 좋겠습니다.

읽어주셔서 감사합니다.

반응형

반응형 웹을 위한 CSS 레이아웃 플렉스박스

이미지, 텍스트 등의 요소 위치는 블록/인라인 레벨 요소로 변경할 수 있습니다. 그런데 과연 블록/인라인 레벨 요소만 알면 모든 요소를 원하는 곳에 위치시킬 수 있을까요? 화면 크기가 다양하지 않았던 예전에는 가능했습니다. 고급 기법을 사용한 디자인으로 감싸진 웹 페이지가 많지 않았거든요. 하지만 지금은 다릅니다. 반응형 디자인이 필요할 만큼 화면 해상도가 다양해졌고, 편하고 화려한 디자인으로 제작된 웹 페이지가 많아졌습니다.

더 다양한 레이아웃을 만들고자 고안된 기법이 플렉스박스 (flexbox) 입니다. 플렉스는 ‘유연한’이란 뜻을 가지고 있어요. 이름만큼이나 화면 레이아웃을 유연하게, 자유자재로 배치할 수 있게 해줍니다. 기존에 사용했던 블록 레벨 요소, 인라인 레벨 요소 방식보다 훨씬 강력하고 편리한 기능이 많죠. 지금부터 신세대 레이아웃, 플렉스박스를 알아보겠습니다.

1 플렉스가 필요한 순간 확인하기

플렉스는 언제 필요할까요? 다음과 같이 body 안에 div로 정사각형 세 개를 만드는 코드가 있습니다.

예제 9-1 div box 3개 만들기

div box 3개 만들기 chapter09/01/index.html

chapter09/01/style.css

div { width: 200px; /* ❸ */ height: 200px; background-color: tomato; /* ❹ */ } #second { background-color: seagreen; /* ❺ */ }

HTML 코드에서 ❶ body를 부모로, ❷ 3가지 div를 그 자식으로 설정합니다. CSS 파일에는 div 태그에 ❸ 가로 (width) , 세로 (height) 길이를 정해주고 ❹ 배경색 (background-color) 을 넣어줬습니다. 또한 div 박스 사이의 구별이 쉽도록 가운데 박스에 id값을 주어 ❺ 배경색을 초록색으로 설정합니다.

div 박스가 나란히 있지 않고 줄바꿈이 되는 이유는 div가 블록 레벨 요소여서 그래요. 검사 기능으로 체크해봅시다.

❶ 제일 위에 있는 주황색 div 박스에 마우스를 갖다대고 우클릭→ ❷ [검사(N)] 클릭→ ❸ 우하단에서 margin 영역에 마우스 갖다대주세요.

margin값이 자리를 차지하고 있습니다. 이 마진을 어떻게 없앨 수 있을까요? 그렇습니다. 바로 플렉스박스를 사용하면 됩니다! 물론 display 값을 인라인으로 바꿔도 가능하지만 이번에는 플렉스박스만를 활용해봅시다.

2 플렉스박스로 정렬하기

플렉스박스는 사용자 인터페이스 디자인에 최적화된 레이아웃을 정의하는 CSS입니다. 이미지, 텍스트 같은 요소를 원하는 곳에 배치하는 데 사용합니다. 인라인이 단순히 여백을 없애는 데 사용한다면, 플렉스박스는 여백을 없앨 뿐만 아니라 축을 변경한다든지, 자식 간의 정렬을 가운데로 맞출 때도 사용합니다. 즉 유연하게 박스 레이아웃을 변경할 수 있다는 장점이 있습니다.

플렉스박스 제1 원칙은 ‘부모만이 플렉스할 수 있다’입니다. 플렉스박스를 사용하려면 부모자식 관계에서 부모에 적용해야 자식이 영향을 받습니다. 플렉스박스의 사용 방법은 다음과 같습니다.

꼭! 부모 태그를 선택자로 지정해주세요. 그럼 이제부터 플렉스박스 특징 (장점) 3가지를 다뤄보겠습니다.

1 공간에 맞추기 : display flex

2 주축 정렬하기

3 교차 축 정렬하기

2.1 공간에 맞추기 : display flex

display 속성은 block, inline, flow, grid, flex가 있습니다. 우리는 그 중 flex를 배워보겠습니다. flex는 자식 요소를 원하는 방향으로 유연하게 배치할 수 있어 자주 사용하는 속성입니다.

예제 9-2 body에 플렉스박스 적용

body { display: flex; /* ❶ */ } div { width: 200px; height: 200px; background-color: tomato; } #second { background-color: seagreen; } body에 플렉스박스 적용 chapter09/02/style.css

어때요? ❶ body 태그에 display 값을 flex로 선언했더니 감쪽같이 마진이 사라져 모든 div가 한 줄에 놓이게 되었죠? 다시 한 번 말씀드리면 플렉스박스의 첫 번째 규칙은 자식에 명시하지 않고 부모에 명시한다는 겁니다. 즉 부모의 display 값을 기본 설정인 block에서 flex로 바꾸는 겁니다. 이렇게 플렉스박스를 사용하면 추가적인 속성을 지정할 수 있습니다. 그중에 하나가 justify-content 속성입니다.

2.2 주축 정렬하기 : justify-content

justify-content 속성은 웹 페이지의 축을 따라 요소 사이에 공간을 만드는 방법을 정의합니다. 여기서 말하는 축이란 주축과 교차축을 말합니다. 별도의 설정이 없다면 주축은 가로를, 교차축은 세로를 기본값으로 가집니다. 하지만 이 둘은 flex-direction이라는 속성을 사용하여 축을 변경 해줄 수 있기 때문에 가로, 세로 대신 주축, 교차축이라고 지칭합니다. 따라서 기본값에서 주축이었던 가로 방향을 flex-direction을 사용해서 세로로 바꾸면 주축은 세로 방향이 되는 겁니다.

다시 말해 flexbox는 두 축 (주축, 교차축) 을 기준으로 움직이기 때문에 축 방향을 기준으로 요소를 움직일 줄 알아야 합니다. 우선 주축 정렬을 담당하는 justify-content를 알아보겠습니다. justify-content 속성에는 다음과 같은 값이 올 수 있습니다.

❶ flex-start : 시작 부분에 정렬

❷ flex-end : 끝에 정렬

❸ center : 중앙에 정렬

❹ space-between : 요소가 축을 따라 펼쳐집니다 (각 요소 사이에 공간이 있음) .

❺ space-around : 요소가 축을 따라 펼쳐지지만 가장자리 주변에도 공간이 있습니다.

이해를 돕는 그림으로 속성별 배치를 확인해봅시다.

이번에는 주축을 가운데로 정렬하는 예제를 살펴보겠습니다. flex를 적용한 코드에서 body 태그의 주축을 가운데로 정렬해보겠습니다.

예제 9-3 justify-content 중앙 정렬

body { display: flex; justify-content: center; /* 1 */ } div { width: 200px; height: 200px; background-color: tomato; } #second { background-color: seagreen; } justify-content 중앙 정렬 chapter09/03/style.css

❶ CSS에 body 태그의 주축을 가운데로 지정합니다. 그러면 자식인 div 박스가 가운데로 정렬됩니다. 특히 justify-content를 이용한 가운데 정렬이 좋은 이유는 반응형이기 때문이에요. 화면 크기를 바꿔도 div 박스는 가운데를 유지합니다.

이번에는 justify-content값을 center에서 space-between으로 변경해보겠습니다.

예제 9-4 justify-content 일정한 간격으로 정렬

body { display: flex; justify-content: space-between; /* ❶ */ } div { width: 200px; height: 200px; background-color: tomato; } #second { background-color: seagreen; } justify-content 일정한 간격으로 정렬 chapter09/04/style.css

❶ body 태그의 justify-content 값을 space-between으로 지정합니다. 자식인 div 박스가 균 등한 간격으로 떨어집니다. 역시 반응형이기 때문에 화면 길이를 변경하면 박스도 함께 움직여 간격이 계속 균등하게 유지됩니다. space-between은 유용하게 쓰이니 기억해둡시다. 이렇게 하나씩 시도해보면 각 값이 어떤 역할을 하는지 알 수 있습니다.

이제 flex-start, flex-end를 사용하는 방법도 아시겠죠? 간단하게 결과만 보여드릴 테니 한번 시도해보세요!

justify-content: flex-start;

justify-content: flex-end;

그럼 여기서 div 박스를 세로축으로 가운데 정렬하고 싶으면 어떻게 해야 할까요? 그땐 align-items라는 교차축 정렬 속성을 사용하면 됩니다.

2.3 교차축 정렬하기 : align-items

align-items 속성은 교차축을 정렬합니다 (flex-direction으로 축 방향을 변경해주지 않는 한 기본값인 세로축을 정렬합니다) . align-items에는 다음과 같은 속성값이 올 수 있습니다.

❶ stretch : 요소의 길이와 교차축의 길이를 같게 함

❷ flex-start : 시작 위치에 정렬

❸ flex-end : 끝 정렬

❹ center : 중앙 정렬

그림으로 속성별 배치를 확인해봅시다.

align-items를 이용한 교차축 가운데 정렬 예제를 살펴봅시다.

예제 9-5 align-items를 이용한 세로축 가운데 정렬

html, body { height: 100%; /* ❶ */ } body { display: flex; align-items: center; /* ❷ */ } div { width: 200px; height: 200px; background-color: tomato; } #second { background-color: seagreen; } align-items를 이용한 세로축 가운데 정렬 chapter09/05/style.css

❷ 부모인 body에 align-itmes: center를 입력합니다. ❶ html과 body의 height 값을 100%로 지정합니다.

html과 body에 height값을 100%로 주어야 합니다!

높이를 지정하지 않으면 화면의 높이는 요소 중 가장 긴 길이를 가진 요소를 기준으로 높이를 정합니다. 예제를 통해 알아봅시다. 화면의 높이를 알아보기 위해 div 태그를 직사각형으로 만들고 테두리를 주겠습니다.

이렇듯 ❶ 화면의 높이는 가장 큰 요소를 기준으로 지정됩니다. 중요한 것은 우리가 보는 화면의 ❷ 흰 여백은 ❶ HTML이 제공하는 영역 (높이) 에 속하지 않는다는 점입니다. 이 상태 에서 가로, 세로 중앙 정렬을 하면 어떻게 될까요?

가로축은 화면 길이만큼 지정됐기 때문에 우리가 바라는 모습의 중앙 정렬이 되었지만, 세로축은 가장 큰 요소의 높이를 기준으로 중앙 정렬되어 우리가 의도한 ❸ 브라우저 전체 화면에서의 정렬이 되지 않았습니다.

이를 해결하기 위해 직접 높이를 지정하는 방법이 있습니다. 비율 (%) 을 이용하여 높잇값을 100%로 지정해주는 방법입니다. 이때 주의할 점은 html 태그와 body 태그 모두 높잇값을 100%로 지정해주어야 한다는 점입니다 (50%면 가장 긴 요소보다 border 영역이 줄어들고 200%면 훨씬 길어집니다) . 우선 적용해볼까요?

우리가 의도한 대로 가로, 세로 중앙 정렬이 되었습니다. 그럼 높이를 100%로 지정해줘야 한다는 건 알겠는데 왜 html과 body 태그 모두 지정해주어야 할까요? 왜냐하면 %는 부모 요소에 대해 상대적으로 길이가 정해지기 때문입니다. 즉, div 태그는 부모인 body 태그와 최상위 부모인 html 태그의 높이에 대해 상대적으로 100%라는 값을 가지는 거예요.

이번에는 stretch를 실습해보겠습니다. 스트레칭할 때 몸을 쭉 늘리잖아요. 그러니까 stretch도 교차축 기준으로 화면 길이에 맞게 요소를 늘리지 않을까 예상해봅니다. 함께 예제를 실행해보겠습니다.

예제 9-6 align-items stretch

html, body { height: 100%; } body { display: flex; align-items: stretch; /* ❶ */ } div { width: 200px; background-color: tomato; /* ❷ */ } #second { background-color: seagreen; } align-items stretch chapter09/06/style.css

❶ 부모인 body에 align-items 속성값으로 stretch를 입력하고 ❷ div 태그에 height값을 삭제합니다.

div의 높잇값을 삭제하지 않은 align-items에서 stretch만 바꾸면 아무런 반응이 일어나지 않을 수 있습니다. 여기 해당되는 분들은 div의 높이를 지정하는 코드가 display: stretch 코드보다 아래에 적혀 있을 가능성이 높습니다. 코드는 위에서 아래로 읽으며 실행되기 때문에 아래 코드가 최종 반영됩니다. stretch로 늘렸지만 이후에 높이를 고정했기 때문에 변하지 않는 겁니다. 하지만 높잇값을 지정하지 않으면 자동으로 높잇값에 맞춰 div 박스 길이가 늘어납니다.

지금까지 교차축으로 정렬하는 두 가지 속성값을 다뤘습니다. flex-start와 flex-end는 어디에 위치할지 감이 오시죠? 맞습니다. flex-start는 교차축 (여기선 세로축) 을 기준으로 하여 상단에, flex-end는 하단에 위치합니다. 각자 코드를 수정해서 확인해주세요. 결과는 다음과 같습니다.

flex-end에서는 마찬가지로 html과 body 높이에 100%를 주어야 적용됩니다. 왜냐하면 html 과 body의 높잇값이 가장 큰 요소의 길이를 기준으로 정의되기 때문입니다.

예제 9-6 align-items stretch

html, body { height: 100%; } align-items stretch chapter09/06/style.css

3 플렉스 축 방향 바꾸기 : flex-direction

justify-content가 주축을 정렬하고, align-items가 교차축을 정렬합니다. 별도의 속성 지정이 없다면 주축은 가로를, 교차축은 세로를 의미하지만 앞서 말씀드렸듯이 이 축은 flex-direction에 의해 바뀔 수 있습니다. direction이 방향이라는 의미를 가지고 있는데 flex-direction이니까 플렉스의 축 방향을 바꿔주는 속성이라고 생각하시면 됩니다. flex-direction은 축 방향을 지정합니다. 지정하는 방식은 다음과 같습니다.

flex-direction 속성에는 다음과 같은 값이 올 수 있습니다.

❶ row (기본값) : 가로 방향(행) 배치

❷ row-reverse : 역순으로 가로 방향(행) 배치

❸ column : 세로 방향 (열) 배치

❹ column-reverse : 역순으로 세로 방향 (열) 배치

그림으로 속성별 배치 방향을 확인해봅시다.

flex-direction을 사용하여 축 방향을 지정하는 예제를 살펴봅시다.

예제 9-7 flex-direction 사용하기

html, body { height: 100%; } body { display: flex; flex-direction: column; /* ❶ */ justify-content: center; /* ❷ */ } div { width: 100px; height: 100px; background-color: tomato; } #second { background-color: seagreen; } flex-direction 사용하기 chapter09/07/style.css

❶ flex-direction: column을 입력해서 주축을 세로 방향으로 변경합니다.

❷ justify-content: center를 입력해서 주축 기준 가운데로 옮깁니다.

flex-direction을 지정해주지 않고 justify-content를 사용하면 요소가 주축이 기본값인 가로 방향을 기준으로 가운데에 위치합니다. 하지만 flex-direction으로 주축을 세로 방향으로 지정해주었기 때문에 세로 방향을 기준으로 가운데에 위치했습니다. 이렇듯 주축과 교차축은 무조건적으로 가로, 세로를 담당하는 것이 아닌 flex-direction에 의해 자유롭게 바뀔 수 있습니다.

이번엔 align-items에 flex-end를 줘보겠습니다.

예제 9-8 align-items 위치 변경

html, body { height: 100%; } body { display: flex; flex-direction: column; justify-content: flex-end; /* ❶ */ } div { width: 100px; height: 100px; background-color: tomato; } #second { background-color: seagreen; } align-items 위치 변경 chapter09/08/style.css

❶ justify-content에 flex-end를 입력합니다. 주축이 세로 방향이기 때문에 세로축 기준 맨 밑으로 이동합니다. 헷갈릴 겁니다. 처음이니 괜찮습니다. 그런 의미에서 정리를 해 볼까요?

3.1 축 방향 바꾸기 정리

justify-content와 align-items는 각각 주축과 교차축을 의미하며 가로축, 세로축을 기본값으로 가지고 있습니다. 하지만 flex-direction으로 주축과 교차축을 바꿀 수 있습니다. 즉, flex-direction에 row, column 중 어떤 값을 주는지에 따라 주축과 교차축이 변하게 됩니다. 그리고 이 방법을 사용하면 div 태그를 비롯한 모든 요소의 축을 자유롭게 움직일 수 있게 되는 거예요.

예를 들어 가로로 정렬되어 있는 텍스트를 세로로 정렬하고 싶을 때 사용할 수 있습니다.

플렉스박스는 이 외에도 많은 속성과 기능을 제공합니다. 하지만 다 알려드리면 너무 어렵다고 느끼실 거예요. 플렉스박스라는 것이 무엇인지 알고 기본 속성을 사용할 수 있으면 충분합니다. 지금은요!

학습 마무리

지금까지 플렉스박스를 알아봤습니다. 원하는 대로 display 속성을 바꾸고 축 방향을 정렬해 디자인을 할 수 있게 된 겁니다. 오늘 내용은 굉장히 중요하니까 핵심 요약으로 다시 복습해봅시다.

핵심 요약

justify-content와 align-items는 각각 주축과 교차축을 의미하며 가로축, 세로축을 기본값으로 가지고 있습니다. 하지만 flex-direction으로 주축과 교차축을 바꿀 수 있습니다. 즉, flex-direction에 row, column 중 어떤 값을 주는지에 따라 주축과 교차축이 변하게 됩니다. 그리고 이 방법을 사용하면 div 태그를 비롯한 모든 요소의 축을 자유롭게 움직일 수 있게 되는 거예요.

1 플렉스박스는 사용자 인터페이스 디자인에 최적화된 CSS입니다. CSS 박스 모델과 유사한 방식으로 레이아웃을 정의할 수 있습니다.

2 플렉스박스에서 사용할 수 있는 속성은 다음과 같습니다. 부모 태그를 선택자로 지정해야 한 다는 점에 유의해주세요.

공간 맞추기 display: flex

주축 정렬하기 justify-content

교차축 정렬하기 align-items

키워드에 대한 정보 반응 형 css

다음은 Bing에서 반응 형 css 주제에 대한 검색 결과입니다. 필요한 경우 더 읽을 수 있습니다.

이 기사는 인터넷의 다양한 출처에서 편집되었습니다. 이 기사가 유용했기를 바랍니다. 이 기사가 유용하다고 생각되면 공유하십시오. 매우 감사합니다!

사람들이 주제에 대해 자주 검색하는 키워드 웹사이트 따라만들기, 반응형 헤더편 | 프론트엔드 개발자 입문편: HTML, CSS, Javascript

• 웹 사이트 만들기
• 웹 사이트 따라 만들기
• 웹사이트 따라만들기
• 웹사이트 클론코딩
• 클론코딩
• 홈페이지제작
• 웹퍼블리셔
• html5
• css3
• 강의
• 웹표준
• 웹접근성
• 웹호환성
• 반응형웹
• 모바일웹
• 웹사이트구축
• html
• css
• 코딩
• 웹디자인
• 웹
• 웹개발
• 개발
• 디자인
• 웹퍼블리싱
• 프론트엔드
• 자바스크립트
• javascript
• CSS
• HTML
• 웹사이트
• 반응형 웹
• 반응형 다지안
• Responsive web
• responsive design
• 반응형 사이트
• 프론트엔드 강의
• 웹 튜토리얼
• 웹 강의
• 반응형 헤더
• 반응형 네비
• HTML 강의
• CSS강의
• Javascript
• 웹사이트 만들기
• 프론트엔드 개발
• css 강의
• 코딩 기초
• 코딩 독학
• 코딩 입문
• 웹사이트 코딩
• 웹 포트폴리오
• 프론트엔드 공부
• 프론트엔드 공부순서
• 프론트엔드 튜토리얼

웹사이트 #따라만들기, #반응형 #헤더편 #| #프론트엔드 #개발자 #입문편: #HTML, #CSS, #Javascript

YouTube에서 반응 형 css 주제의 다른 동영상 보기