반응형
안녕하세요 코딩초밥입니다 ㅇㅅㅇ
html과 css javscrip로 만들기만한다면 정말 웹사이트입니다.
안드로이드로 보이면 그 큰사이즈가 그대로 핸드폰으로보여서
해상도 부셔지거나 누르기 힘들것입니다.
그러면 사이즈 별로 디자인을 해놓으면 더 이쁘겠죠?
그래서 반응형 웹디자인을 해야합니다.
반응형 웹디자인.
-출처: 인피니티북스
※각 사이즈에 맞는 디자인을 구성해야합니다
반응형 웹을 위해 필요한 방법으로는 2가지로 나뉠수있습니다
1.뷰포트(viewport)
2.미디어 쿼리: css선택적용 기술입니다
오늘 할것은 미디어 쿼리로서
간단하게 말하자면 사이즈 별로 그 이미지를 만들어놓는것입니다
내 모니터가 겁나 크다 그러면 큰사이즈보여주고
핸드폰이나 작은 모니터면 작은사이즈로 디자인한거로 바꿔서! 보여줘라
라는거죠 매우 직관적이죠?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Web Design</title>
<style>
#page {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header { height: 50px; }
#main { width: 600px; float: left; }
#sidebar { width: 300px; float: right; }
#footer { clear: both; }
@media screen and (max-width: 980px) {
#page { width: 94%; }
#main { width: 65%; }
#sidebar { width: 30%; }
}
@media screen and (max-width: 700px) {
#main { width: auto; float: none; }
#sidebar { width: auto; float: none; }
}
@media screen and (max-width: 480px) {
#header { height: auto; }
h2 { font-size: 24px; }
#sidebar { display: none; }
}
#header, #main, #sidebar, #footer {
border: solid 1px red;
}
#header { background-color: yellow; }
#sidebar { background-color: aliceblue; }
#main { background-color: aqua; }
#footer { background-color: coral; }
</style>
</head>이것처럼
@media를 이용한 사이즈를 설정해서 그 값을 만족했을시
디자인을 바꾸는 방식입니다.
아직 감이 안오시는 분은 이 코드를 복붙해서 가져가신다면 바로 감이 오실껍니다.
사이즈를 키웠다 작아졌다를 반복해주세요
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹</title>
<style>
*{padding: 0; margin: 0;}
#wrap{
width: 90%;
border: 4px solid black;
margin: 0 auto;
}
#wrap div{
/* inline-block요소는 기본적으로 좌우 여백이 있음(4~6px) */
display: inline-block;
height: 100px;
width: 100%;
margin-right: -6px;
}
#wrap div:first-child{
background-color: aqua;
}
#wrap div:nth-child(2){
background-color: lightgreen;
}
#wrap div:nth-child(3){
background-color: orange;
}
#wrap div:nth-child(4){
background-color: indigo;
}
#wrap div:last-child{
background-color: yellow;
}
/* 미디어 쿼리 적용 */
/* 320px이상 : smart phone - portrait */
@media all and (min-width: 320px){
#wrap div{width: 100%;}
}
/* 600px이상 : smart phone - landscape or tablet */
@media all and (min-width: 600px){
#wrap div{width: 48%;}
#wrap div:last-child{width:100%;}
}
@media all and (min-width: 800px){
#wrap div{width: 20%;}
#wrap div:last-child{width:20%;}
}
</style>
</head>
<body>
<div id="wrap">
<div>aa</div>
<div>bb</div>
<div>cc</div>
<div>dd</div>
<div>ee</div>
</div>
</body>
</html>
반응형
'이과 > HTML,CSS,JS' 카테고리의 다른 글
| CSS_속성,폰트,텍스트 (1) | 2021.05.07 |
|---|---|
| HTML_오디오,비디오 div, span (2) | 2021.05.06 |
| CSS의혁명,FLEX (0) | 2021.05.02 |
| HTML_줄바꾸기,헤딩,수평선,리스트 (0) | 2021.05.01 |
| HTML에 대한 이해 (1) | 2021.04.30 |
댓글