시작 전 css 링크파일
*{margin:0; padding:0;}
li, ul{ list-style : none;}
a{ text-decoration:none;}
img{max-width:100% ; height:auto;}
@media(min-width:767px){
#wrap {
width:960px;
margin:0 auto;
border:1px solid #e3e3e3;
}
#wrap h1{
color:#fff000;
}
#wrap .logo{
background-image:url(images/KakaoTalk_20240122_114306622.png);
height:280px;
}
#wrap .logo >h1 {
color:#fff000;
font-weight: bold;
padding:20px;
}
#wrap nav{background-color:#c13333;}
#wrap nav > ul{}
#wrap nav > ul > li{display: inline-block;}
#wrap nav > ul > li > a{display:block;
color:#fff;
padding:20px 30px;
}
#wrap nav > ul > li > a:hover{
background-color:#903;
}
#section {
overflow: hidden;
}
#section .left{
float:left;
width: 700px;
padding:20px;
}
#section .right{
float:right;
width: 200px;
padding:10px;
background-color:#e3e3e3;
height:500px;
}
footer{
background-color:#222222;
text-align: center;
text-align: 20px;
color:#fff
}
}
/*실습 */
@media(max-width:766px){
#wrap {
/* width:100% */
min-width : 350px; /* 최소 350, 이상부터는 가변*/
margin:0 auto;
}
#wrap .logo {
color:#fff000;
background-image: url(images/KakaoTalk_20240122_114306622.png);
height: 100px;
}
#wrap nav ul{
background-color: #c13333;
text-align: center;
}
#wrap nav ul li {
}
#wrap nav ul li a{
display: block;
}
#section{
font-size: 12px;
}
#section .left{
padding: 20px;
}
#section .left h3{
margin :10px 0px;
}
#section .right{
padding: 10px;
}
#section .right img{
width: 100%;
}
footer{
background-color: #222222;
color:#fff;
text-align: center;
}
}
본문파
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index03.css">
</head>
<body>
<div id="wrap">
<header>
<div class="logo">
<h1>반응형 웹(미디어)</h1>
</div>
<nav>
<ul>
<li><a href="#">반응형 웹</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">미디어쿼리</a></li>
<li><a href="#">적용하기</a></li>
</ul>
</nav>
</header>
<section id="section">
<div class="left">
<h3>반응형 웹</h3>
<h3>
웹 디자인 기법 중 하나. 웹(Web)에 접속하는 디바이스에 반응하는(Responsive) 디자인(Design)을 말한다.
</h3>
<p>
반응형 웹 디자인은 유연한 레이아웃에 대응하여 항상 최적의 화면을 제공함으로써 다양한 스크린 사이즈를 지닌 디바이스에 적응하게 된다. 그리고 반응형 웹이 일반 웹 디자인과 다른 큰
이유 중에 하나는 이 모든 기술이 하나의 소스로 구현 가능하다는 점이다. 보통 일반 웹 디자인의 경우에는 PC와 태블릿, 스마트폰의 브라우저 각각에 최적화시킨 소스를 개발하여 각
디바이스 별로 산출물이 생기기 때문에 초기 제작비용뿐만 아니라 추후 유지보수 인력과 비용까지 추가로 발생하게 된다.
요즘에는 다양한 스마트 기기가 계속해서 개발되고 있기 때문에 각각의 디바이스와 스크린 사이즈에 맞추어 사이트를 개발한다는 것은 거의 불가능에 가깝다고 볼 수 있다. 하지만 반응형
웹은 하나의 소스를 수정하면 모든 스크린 사이즈에 맞추어 컨텐츠가 최적화되기 때문에 유지보수가 효율적이고, 사용자 입장에서도 기기에 구애받지 않고 항상 최적의 화면을 경험할 수
있다는 측면에서 반응형 웹의 장점이 고스란히 나타나게 된다.
반면 이러한 특징때문에 발생하는 단점이 있는데, 모바일 사이트에 비해서 무겁다는 점이다. 이는 사이트 속도와 직결되는 문제로, 사용자 입장에서는 특히 속도에 목숨을 거는 유저들에게
있어서 불편하게 느낄수도있다. 반응형 웹 디자인은 모바일 사이트보다 읽어들이는 소스가 많아서 쓸데없는 데이터를 소비할 수도 있고, 더군다나 데스크톱 사이트와 모바일 사이트의 용도가
다른 사이트의 경우 이러한 반응형 웹 디자인은 걸림돌이 될 수 있다. 이 때문에 서버 사이드 스크립트를 이용해 접속 기기에 따라 디자인을 선택적으로 적용하는
RESS(Responsive Design + Server Side Components)라는 기법도 있다.</p>
</div>
<article class="right">
<img src="images/KakaoTalk_20240122_114306622_01.jpg">
<img src="images/KakaoTalk_20240122_114306622_02.jpg">
<img src="images/KakaoTalk_20240122_114306622_03.jpg">
</article>
</section>
<footer>
<p>HTML5 + CSS3 반응형</p>
<address>
Responsive Web Design
</address>
</footer>
</div>
</body>
</html>
기본화면
모바일 화면
'CSS > CSS 이론에따라 직접해보기' 카테고리의 다른 글
| 부트스트랩 -커스텀 (0) | 2024.01.28 |
|---|---|
| 부트스트랩 그리드 , 모달 (0) | 2024.01.28 |
| 미디어 쿼리(@media)-반응형디자인 (0) | 2024.01.27 |
| 포지션 실습하기1(sticky) (0) | 2024.01.27 |
| 포지션 실습하기2 (0) | 2024.01.27 |
