[웹 UI 개발] 반응협 웹 - 0
2023. 3. 30. 11:36
반응형 웹은 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지이다.
예전에는 웹을 보통 PC 환경에서만 많이 사용했었는데, 스마트폰이 보급되면서 태블릿, PC, 모바일과 같이 다양한 환경에서 웹을 보게되었다.
이런 상황에서 동일한 웹페이지를 여러 환경에서 보기에는 해상도나 동작환경이 다르기 때문에 각 페이지별로 웹페이지를 맞춰야하는 번거로움이 있었다.
html5가 나오기 전에는 각 환경에 맞게 웹페이지를 제작하는 적응형 웹이 보편적이었다.
하지만 html5와 함께 미디어쿼리 기술이 등장하면서 각 환경에 맞춰 하나의 소스에서 대응할 수 있는 반응형 웹이 등장하게 되었다.
반응형 웹의 예시는 아래 링크를 참고하자.
위 사이트에 들어가서 브라우저의 가로 크기를 줄여보면 반응형 웹이 어떻게 동작하는지 확인할 수 있다.
이후 실습을 통해 PC버전을 기준으로 하여 태블릿 PC의 해상도와 모바일 기기에 대응하는 반응형 웹페이지를 만들어본다.
실습
아래 조건에 맞는 PC버전 웹페이지를 제작
- header : 배경색 pink, 폰트 사이즈 14, 폰트 색 #fff
- content : 최대 가로길이 900px, 리스트 간격 10px, 리스트 폰트 사이즈 14px, 리스트 폰트 색 #000
- footer : 배경색 #ccc, 폰트 사이즈 14, 폰트 색 #000
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>반응형 웹</title>
<link rel="stylesheet" href="css/reset.css"> <!--http://meyerweb.com/eric/tools/css/reset/-->
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<div class="wrap">
<header>
<a href="#" class="logo"><h1>LOGO</h1></a>
<nav>
<a href="#">MENU1</a>
<a href="#">MENU2</a>
<a href="#">MENU3</a>
<a href="#">MENU4</a>
<a href="#">MENU5</a>
<a href="#">MENU6</a>
<a href="#">MENU7</a>
<a href="#">MENU8</a>
</nav>
</header>
<section>
<ul class="list">
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
긴~~~~~~~~~~~~~~~~~~~~~~~~~~~~~타이틀
</div>
</a>
</li>
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
<li>
<a href="" class="inner">
<div class="thumb">
<img src="img/thumb.png" alt="썸네일이미지">
</div>
<div class="title">
타이틀입니다.
</div>
</a>
</li>
</ul>
</section>
<footer>
<p>footer--footer--footer--footer--footer--footer</p>
</footer>
</div>
</body>
</html>
@charset "UTF-8";
a {
text-decoration: none;
}
header {
overflow: hidden;
background-color: pink;
padding: 20px;
}
.logo {
float: left;
font-size: 20px;
color: #fff;
}
nav {
float: right;
}
nav a {
padding: 0 5px;
font-size: 20px;
color: #fff;
}
footer {
height: 50px;
line-height: 50px;
text-align: center;
background-color: #ccc;
font-size: 14px;
color: #000;
}
section {
overflow: hidden; /*브라우저 가로 크기가 작아졌을 때 좌우 스크롤이 생기지 않게 함*/
max-width: 900px;
margin: 50px auto;
}
.list {
margin: -5px;
overflow: hidden;
}
.list li {
float: left;
width: 20%;
}
.inner {
display: block;
margin: 5px;
border: 1px solid #000;
}
.thumb img {
width: 100%;
height: auto;
}
.title {
padding: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
font-size: 14px;
color: #555;
}
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 반응협 웹 - 2 / 모바일 환경 (0) | 2023.03.30 |
|---|---|
| [웹 UI 개발] 반응형 웹 - 1 / 태블릿 PC 환경 (0) | 2023.03.30 |
| [웹 UI 개발] 폼 - 4 / 폼 커스텀 (셀렉트 메뉴) (0) | 2023.03.29 |
| [웹 UI 개발] 폼 - 3 / 폼 커스텀 (파일 찾기 버튼) (0) | 2023.03.29 |
| [웹 UI 개발] 폼 - 2 / 폼 커스텀 (체크 박스, 라디오 버튼) (0) | 2023.03.27 |
