반응형 웹디자인

윤재열·2022년 1월 28일
CSS
0

CSS

목록 보기
18/19

뷰포트 지정하기

뷰포트는 <meta>태그를 이요하여 <head>와 </head>사이에 작성합니다.

  • 기본형식은 <meta name ="viewport" content="<속성1=값>,<속성2=값2>,... ">로 나타냅니다.
속성설명사용 가능한 값기본 값
width뷰포트 너비devicd-width 또는 크기브라우저 기본 값
height뷰포트 높이device-height 또는 크기브라우저 기본 값
user-scalable확대/축소 가능여부yes or noyes
initial-scale초기확대/축소 값1~101
minimum-scale최소 확대/축소 값0~100.25
maximum-scale최대 확대/축소 값0~101.6

가변 그리드 레이아웃

웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 '그리드 시스템'입니다.

  • 반드시 그리드 시스템을 따를 필요는 없지만 사이트 전체의 디자인이나 일관성을 유지하는데는 그리드 시스템이 편리합니다.

  • 그리드 시스템이란 화면을 몇 개의 칼럼으로 나누어 요소들을 배치하는 것으로 필요할 때마다 칼럼들을 묶어 배치할 수 있습니다.

  • 그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있어 대부분의 사이트들에서 사용됩니다.

  • 그리드 시스템은 화면 너비를 특정 값으로 고정해 놓고 그 안에 표시할 요소들의 너비 값을 지정하면 너비가 항상일정하게 표시되기 때문에 원하는 레이아웃을 쉽게 만들 수 있습니다.

  • 반면, 어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고정 값이 아니라 백분율과 같은 가변 값으로 지정하면 됩니다.

  • 이렇게 사이트의 레이아웃을 백분율로 지정하는 것을 '가변 그리드 레이아웃'또는 줄여서 '가변 레이아웃'이라고 합니다.

  • '가변'이란 '너비 값이 정해져 있지 않다'라는 뜼으로 브라우저 너비 값이 바뀔 때마다 웹 요소의 너비값도 함께 바뀐다는 뜻입니다.

  • 가변 그리드 레이아웃을 사용할 경우, 너비 값이 줄어들면 실제 콘텐츠를 확인하기 불편하므로 가능하면 간결한 디자인을 사용하는 것이 좋습니다.

가변 그리드 레이아웃 만들기

픽셀을 이용한 레이아웃을 만들어 놓았다면 간단한 계산법으로 만들 수 있습니다.

  • 다시 말해 고정 그리드 레이아웃을 만들고 가변 그리드 레이아웃으로 바꿀 수 있다는 말입니다.

고정 그리드 레이아웃
아래 예제는 고정 그리드 레이아웃을 이용해 만든 문서입니다. 문서의 맨 바깥 부분을 #wrapper 요소로 묶고 너비를 960px로 지정했습니다. 그리고 그 안에 헤더와 본문, 사이드바,푸터를 배치했습니다.
고정 그리드 레이아웃을 사용했기 때문에 브라우저 창을 너비를 조절하거나 크롬 개발자 도구의 디바이스 모드를 이용해 모바일 기기를 선택해 보면 문서 내용이 가려지면서 스크롤바가 생기는 것을 볼 수 있습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<style>
	#wrapper {
		width:960px;
		margin:0 auto;
	}
	header {  /* 헤더 */
		width:960px;
		height:120px;
		background-color:#066cfa;
		border-bottom:1px solid black;
	}
	.header-text{
		font-size:40px;
		color:white;
		text-align:center;
		line-height:120px;
	}
	.content {   /* 본문 */
		float:left;
		width:600px;
		height:400px;	
		padding:15px;
		background-color:#ffd800;
	}
	.right-side {  /* 사이드 바 */
		float:right;
		width:300px;
		height:400px;
		padding:15px;
		background-color:#00ff90;
	}
	footer {  /* 푸터 */
		clear:both;
		height:120px;
		background-color:#c3590a;
	}
</style>
</head>

<body>
	<div id="wrapper">
		<header>
			<h1 class="header-text">고정 그리드 레이아웃</h1>
		</header>
		<section class="content">
			<h4>본문</h4>
		</section>
		<aside class="right-side">
			<h4>사이드바</h4>
		</aside>
		<footer>
			<h4>푸터</h4>
		</footer>
	</div>
</body>
</html>

이렇게 고정 그리드 레이아웃은 화면 너비가 작아질 경우, 내용의 일부가 가려집니다.이 예제를 바탕으로 가변 그리드 레이아웃을 만들어 보겠습니다.

전체를 감싸는 요소 확인하기

가변 그리드는 웹 콘텐츠 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산합니다.

  • 앞에서 살펴본 예제의 경우,#wrapper요소가 전체를 감싸고 있습니다.만약 이런 요소가 없다면 <div id="wrapper">나 <div id="container">처럼 직접 추가하빈다.(id이름은 무엇이든 상관없습니다.)
  • 그리고 #wrapper의 너비 값 960px을 백분율 갑승로 변환합니다.여기서는 화면 양옆에 여백을 두기 위해 너비를 96%로 지정해 보겠습니다.(하지만 사이트 디자인이 모니터 화면에 가득차게 표시하고 싶다면 100%로 지정해도 됩니다.)
#wrapper{
	width:96%;
    margin:0 auto;
    }
<div id="wrapper">...</div>

각 요소의 너비 값 계산하기

기준이 되는 요소를 찾았다면 그 요소의 너비 값으로 각 요소의 너비 값을 계산합니다.

  • (요소의너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100
  • 요소의 너비 값을 %로 지정할 때 소숫점 이하 숫자가 많다면 소숫점 이하 3~4자리까지 표시하는 것이 좋습니다.
  • 그리고 요소들의 너비와 함께 padding과 marigin도 백분율 값으로 조절하는것이 자연스럽습니다.
요소고정 그리드가변 그리드
header960px100%
.content600px62.5%
padding15px1.5625%
.right-side300px31.25%
padding15px1.5625%
footer960px960px

가변 그리드 레이아웃
이 방법을 적용해 앞에서 살펴본 예제를 가변 그리드로 바꾸어 봅시다.
이렇게 바꾸면 브라우저 창의 너비를 줄일 때 각 요소의 너비 값도 줄어들어 스크롤바 없이 한눈에 볼수 있습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
	#wrapper {
		width:96%;
		margin:0 auto;
	}
	header {  /* 헤더 */
		width: 100%;
		height: 120px;
		background-color: #066cfa;
		border-bottom: 1px solid black;
	}
	.header-text{
		font-size:32px;
		color:white;
		text-align:center;
		line-height:120px;
	}
	.content {  /* 본문 */
		float:left;
		width:62.5%;
		height:400px;	
		padding:1.5625%;
		background-color:#ffd800;
	}
	.right-side {  /* 사이드 바 */
		float:right;
		width:31.25%;
		height:400px;
		padding:1.5625%;
		background-color:#00ff90;
	}
	footer {  /* 푸터 */
		clear:both;
		width:100%;
		height:120px;
		background-color:#c3590a;
	}
</style>
</head>

<body>
	<div id="wrapper">
		<header>
			<h1 class="header-text">가변 그리드 레이아웃</h1>
		</header>
		<section class="content">
			<h4>본문</h4>
		</section>
		<aside class="right-side">
			<h4>사이드바</h4>
		</aside>
		<footer>
			<h4>푸터</h4>
		</footer>
	</div>
</body>
</html>

가변 레이아웃과 가변 요소

가변 그리드를 사용하면 사이트에 접속하는 브라우저의 너비에 따라 너비가 유동적으로 바뀝니다.이때 웹 요소 중 너비 값을 가진 요소들도 브라우저 너비가 바뀔 때마다 함꼐 바뀌어야 자연스럽게 표현됩니다.

가변 글꼴

  • 텍스트 크기를 px단위로 지정하면 크기가 고정되기 때문에 화면 크기가 작은 기기에서는 매우 작게 표시됩니다.
  • 따라서 반응형 웹 디자인을 위해 가변 그리드 레이아웃을 사용할 때는 글자 크기도 유동적으로 바뀌어야 합니다.
  • 이것을 가변 글꼴이라고 합니다.
  • 가장 많이 사용하는 단위는 em과 rem입니다.

em단위

em단위는 부모 요소에서 지정한 폰트의 대문자M의 너비를 1em으로 지정한 것으로 1em은 16입니다.

  • 따라서 이미 Px로 표시한 글자의 크기를 16px로 나누면 em값으로 계산할 수 있습니다.
<style>
		.header-text{
			font-size:2em;
			color:white;
			text-align:center;
			line-height:120px;
		}
		.content {
			float: left;
			width: 62.5%;
			height: 400px;
			padding: 1.5625%;
			background-color: #ffd800;
			text-align: center;
			line-height: 380px;
			font-size: 1.5em;
		}
		.right-side {
			float: right;
			width: 31.25%;
			height: 400px;
			padding: 1.5625%;
			background-color: #00ff90;
			text-align: center;
			line-height: 380px;
			font-size: 1.5em;
		}
		footer {
			clear: both;
			width: 100%;
			height: 120px;
			background-color: #c3590a;
			text-align:center;
			line-height:120px;
			font-size: 1.5em;
		}
</style>

rem단위

em단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기에 영향을 받습니다.

-즉 em단위를 사용하면 부모 요소의 크기에 따라 자식 요소의 글자 크기가 바뀌는 것입니다. 이렇게 하면 em수치가 계속 달라진다는 단점이 있습니다.

  • 이런 단점을 없애기 위해 만든 단위가 rem입니다.
  • rem에서 r은 루트를 뜻하며 rem은 처음부터 기본 크기를 지정하기 때문에 중간에 기본 값이 바뀌지 않습니다.

rem단위 사용하기

.header-text{
	font-size:2rem;
	text-align:center;
	}
.fluid-text {
      font-size:1.5rem;
        }

가변 이미지

이미지의 경우,웹 문서에 삽입할 때부터 이미지의 크기가 정해져 있기 때문에 브라우저 창의 크기가 변하더라도 이미지의 너비 값은 바뀌지 않습니다.

  • 그래서 가변 그리드 레이아웃에서 이미지의 너비가 브라우저 화면의 너비보다 클 경우, 브라우저 화면의 너비를 줄이면 이미지의 일부가 가려집니다.

  • CSS이용하기
    -이미지를 가변 레이아웃에 맞게 표시하려면 이미지를 감싸고 있는 부모 요소만큼만 커지거나 작아지도록 max-width 속성 값을 100%로 지정하면 됩니다.

가변이미지 사용하기
.content 요소 안에 포함된 이미지를 가변 이미지로 지정한 것으로 max-width:100%로 지정했기 떄문에 .content 요소 너비 값이 변할 때마다 이미지의 너비와 높이도 바뀝니다.

.content img {
		max-width:100%;
		height:auto;
	}

<img>태그와 srcset속성

이미지 너비 값을 max-width:100%로 지정하면 가변 이미지를 간단히 만들 수 있지만 모든 상황에서 쓸 수 있는 것은 아닙니다.

  • 고해상도 이미지를 크기만 줄여 모바일에 표시하더라도 파일 사이즈가 크기 때문에 모바일에서 다운로드하는데 시간이 오래걸립니다.
  • 또한 텍스트가 포함된 이미지일 경우, 모바일 화면에 맞게 줄여 표시하면 텍스트 내용을 알아보기 힘들 수도 있습니다.
  • <img>태그에서 srcset속성을 이용하면 화면 너비 값이나 픽셀밀도에 따라 고해상도의 이미지 파일을 지정할 수 있습니다.
  • <img src="somthing.img" srcset="이미지1.img"[이미지2,이미지3,...]">
  • 이 때 이미지 1,2,3은 화면 너비가 달라질 때 표시할 이미지들을 나열한 것으로 이미지 파일 경로와 함께 너비 값이나 픽셀 밀도도 함께 표시해야 합니다.
  • 예를들어 srcset 속성을 사용해 픽셀 밀도가 1일때 표시할 이미지와 픽셀 밀도가 2일 때 표시할 고해상도 이미지를 따로 저장할 수 있습니다.
`<img src="images/pentcil.jpg" srcset="images/pencil-hd.jpg 2x" alt="색연필 제품이미지">`

<picture>태그와<source>태그-상황별로 다른 이미지 표시하기

HTML5.1에는 <picture>태그가 표준으로 포함되면서 <picture>태그와 <source>태그를 함께 사용해 화면 해상도뿐만 아니라 화면 너비에 따라 다른 이미지 파일을 표시할 수도 있습니다.

  • <source>태그를 사용하는 방법은 <video>태그나 <audio>태그와 <source>태그를 이용해 여러 조건의 파일을 따로 지정하는 방법과 비슷합니다.
속성설명
srcset이미지 파일의 경로
mediasrcset에 지정한 이미지를 표시하기 위한 조건
type파일 유형
sizes파일의 크기

화면 해상도와 화면 너비에 따라 이미지 지정하기
다음 예제는 브라우저 창의 너비 값에 따라 pc와 블릿,스마트폰 화면에 표시할 이미지를 다르게 지정한 것입니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
	<picture>
		<source srcset="images/shop-large.jpg" media="(min-width:1024px)">
		<source srcset="images/shop-medium.jpg" media="(min-width:768px)">
		<source srcset="images/shop-small.jpg" media="(min-width:320px)">
		<img src="images/shop.jpg" alt="fill with coffee" style="width:100%;">
	</picture>
</body>
</html>
profile
윤재열
블로그 이전합니다! https://jyyoun1022.tistory.com/
이전 포스트

상품 페이지에 가격 떠오르게 만들기

다음 포스트

미디어 쿼리

0개의 댓글