[HTML5 & CSS3] 모바일 기기와 웹 디자인

▶ 반응형 웹

*반응형 웹이란?

PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게 바꾸어 보여주는 웹 디자인. 하나의 사이트를 제작해 여러 기기에서 볼 수 있도록 하는 것.

*반응형 웹의 장단점

-모든 스마트 기기에서 접속 가능

반응형 웹에서 사용하는 기술들은 W3C에서 웹 표준으로 지정한 HTML과 CSS로 이루어져 있기 때문에 어떤 스마트 기기에서든 접속할 수 있다.

-가로 모드에 맞추어 레이아웃 변경 가능

스마트폰이나 태블릿에서 가로 모드로 돌렸을 때 너비 값이 커지면 그에 맞추어 레이아웃을 바꾸어 보여줄 수도 있다. CSS에서 조절하며 화면 크기에 맞추어 자유롭게 반응할 수 있다.

-사이트 유지 & 관리 용이

사이트가 하나뿐이기 때문에 유지나 관리가 쉽다. 특히 반응형 웹에 사용되는 코드들은 서버쪽 코드가 없고 HTML과 CSS로만 되어 있어 복잡하지 않다.

*모바일 기기를 위한 기본 다지기, 뷰포트

뷰포트를 지정하면 접속한 기기 화면에 맞추어 확대하거나 축소해 표시할 수 있다.

뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역이다.

*뷰포트 지정하기

뷰포트는 <meta> 태그를 이용해 <head> 태그와 </head> 태그 사이에 작성한다.

기본형)

*뷰포트 속성

속성	설명	사용 가능한 값	기본 값
width	뷰포트 너비	device-width 또는 크기	브라우저 기본 값
height	뷰포트 높이	device-height 또는 크기	브라우저 기본 값
user-scalable	확대/축소 가능 여부	yes 또는 no	yes
initial-scale	초기 확대/축소 값	1~10	1
minimum-scale	최소 확대/축소 값	0~10	0.25
maximum-scale	최대 확대/축소 값	0~10	1.6

직접 해보세요! ) 크롬의 디바이스 모드 활용하기

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Cafe</title>
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div id="container">
		<header>
			<nav>
				<ul id="main-nav">
					<li><a href="#intro">카페 소개</a></li>					
					<li><a href="#map">오시는 길</a></li>
					<li><a href="#choice">이 달의 추천</a></li>
				</ul>
			</nav>
		</header>
		
		<section id="intro">
			<div class="page-title">
				<h1>카페 소개</h1>
			</div>
			<div class="content">
				<div class="photo">
					<img src="images/coffee.jpg" alt="">
				</div>
				<div class="text">
					<p> 영업 시간 : 오전 9시 ~ 밤 10시 </p>
					<p> 휴무 : 매주 수요일 <br>
						<i><small><small>(수요일이 공휴일일 경우 수요일 영업, 다음날 휴무)</small></small></i></p>
				</div>
			</div>
		</section>
		
        <section id="map">
            <div class="page-title">
		        <h1>오시는 길</h1>
            </div>
            <div class="content">
                <div class="photo">
		            <img src="images/map.jpg" alt="사계 포구에서 서쪽 방향으로 000미터 진행">
                </div>
                <div class="text">
		            <p>서귀포시 안덕면 사계리 oooo-ooo</p>
                    <p>제주 올레 10코스 산방산 근처</p>	
                </div>
		    </div>
        </section>

        <section id="choice">
            <div class="page-title">
		        <h1>이 달의 추천 </h1>
            </div>
            <div class="content">
                <div class="photo">
		            <img src="images/ice.jpg" alt="아이스 커피" style="border:1px solid white; border-radius:50%">
                </div>
                <div class="text">
		            <h2>핸드드립 아이스커피</h2>
		            <ol>
			            <li>1인분 기준으로 서버에 각얼음 5조각(한조각의 20cc) 넣고 추출을 시작한다.</li>
			            <li>평상시 보다 원두의 양은 2배 정도 (20g)와 추출액은 얼음 포함해서 200cc까지 내린다.</li>
			            <li>아이스 잔에 얼음 6~7개 섞어서 시원하게 마신다</li>
		            </ol>
                </div>
			</div>
		</section>

        <footer>
		    <p>My times with Coffee</p>
        </footer>
	</div>
</body>
</html>

저작자표시

'HTML5 & CSS3' 카테고리의 다른 글

[HTML5 & CSS3] 가변 레이아웃과 가변 요소 (0)	2021.02.14
[HTML5 & CSS3] 가변 그리드 레이아웃 (0)	2021.02.14
[HTML5 & CSS3] 애니메이션 (0)	2021.02.14
[HTML5 & CSS3] 트랜지션 (0)	2021.02.14
[HTML5 & CSS3] 변형과 관련된 속성들 (0)	2021.02.14

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 모바일 기기와 웹 디자인

▶ 반응형 웹

'HTML5 & CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML5 & CSS3] 모바일 기기와 웹 디자인

▶ 반응형 웹

'HTML5 & CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바