Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags
more
Archives
Today
Total
관리 메뉴

히바리 쿄야 와 함께 하는 Developer Cafe

[1일차] DO IT 반응형 웹 만들기/p16 ~p95/ 반응형 웹이란? 가변 그리드, 미디어 쿼리 본문

Resposive Web

[1일차] DO IT 반응형 웹 만들기/p16 ~p95/ 반응형 웹이란? 가변 그리드, 미디어 쿼리

TWICE&GFRIEND 2021. 2. 5. 14:40

반응형웹?

 

PC , TV , 네비게이션 , 스마트 기기 등 기기마다 또는 환경마다 최적화 된 웹사이트를 제공해 주는것

 

http://mediaqueri.es -> 반응형 웹 사이트 참고할 만한 사이트

 

유지보수가 간편하고 모바일 점유율의 증가 마케팅에 유리하고 검색 엔진 최적화가 가능하기 때문에

 

반응형 웹을 많이 사용한다.

 

 

- 미디어 쿼리 예제 - 

 

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,
user-scalable=no">
<title>미디어쿼리 사용하기</title>
<style>
//미디어 쿼리 이용한 데스크탑, 태블릿, 모바일 사이즈 설정 예제
@media all and(min-width:320px){
    body{
        background:#e65d5d;
    }
}


@media all and(min-width:768px){
    body{
        background:#2dcc70;
    }
}


@media all and(min-width:960px){
    body{
        background:#6fc0d1;
    }
}

</style>

</head>
<body>

</body>

 

 

 

가변 그리드 공식 

 

(가변 크기로 만들 박스의 가로 너비 / 가변 크기로 만들 박스를 감싸고 있는 박스의 가로 너비) * 100

 

= 가변 크기의 % 값 

 

100을 곱하는 이유 가변 크기의 박스는 %로 지정되기 떄문에 백분율로 표현하기 위해서 100을 곱한다.

 

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}
#wrap{
width:90%;
/* 960px */
height:500px;
margin:0 auto;
border:4px solid #000;
}

.container{
width:93.75%;
/* 960px / 900px */
height:492px;
margin:0 auto;
border:4px solid #000;
}

.container div{
display:inline-block;
height:100%;
}

.container div:first-child{
width:33.33333333333333%;
/* 300px ÷ 900px */
background:#1f518b;
}

.container div:first-child + div{
width:66.66666666666667%;
/* 600px ÷ 900px */
background:#f7e041;
}
</style>
</head>
<body>
<div id="wrap">
        <div class="container">
            <div></div><div></div>
        </div>
    </div>
</body>
</html>

 

가변 마진과 가변 패딩

 

(가변 마진을 적용할 마진값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) *  100 = 가변 마진값

 

가변 패딩 적용 방법 

 

(가변 패딩을 적용할 패딩값 / 적용할 박스를 감싸고 있는 박스의 가로 너비) * 100 = 가변 패딩 % 값

 

 

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}

#wrap{
width:90%;
/* 960px */
height:700px;
margin:0 auto;
border:4px solid #000;
}

#wrap p{
width:52.0833333333333%;
/* 500px ÷ 960px */
padding:50px 5.20833333333333%;   //가변 패딩을 적용할때 박스의 너비값 600이 아닌 가장 사위에 있는 부모 wrap 의 기준으로  계산해야 한다.
/* 50px ÷ 960px */
margin:0 auto;
background:#f7e041;
}
</style>
</head>
<body>
<div id="wrap">
<p>모든 국민은 신체의 자유를 가진다. 모든 국민은 신속한 재판을 받을 권리를 가진다. 공무원의 직무상 불법행위로 손해를 받은 국민은 법률이 정하는 바에 의하여 국가 또는 공공단체에 정당한 배상을 청구할 수 있다. 이 경우 공무원 자신의 책임은 면제되지 아니한다. 신체장애자 및 질병·노령 기타의 사유로 생활능력이 없는 국민은 법률이 정하는 바에 의하여 국가의 보호를 받는다. 군인·군무원·경찰공무원 기타 법률이 정하는 자가 전투·훈련 등 직무집행과 관련하여 받은 손해에 대하여는 법률이 정하는 보상 외에 국가 또는 공공단체에 공무원의 직무상 불법행위로 인한 배상은 청구할 수 없다. 대통령이 임시회의 집회를 요구할 때에는 기간과 집회요구의 이유를 명시하여야 한다. 모든 국민은 법률이 정하는 바에 의하여 국방의 의무를 진다.</p>
</div>
</body>
</html>

 

데스크탑
모바일
태블릿

 

 

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}

#wrap{
    width: 90%;
    /* 960px */
    height: 500px;
    margin: 0 auto;
    border: 4px solid #000;
}

#wrap div{
    width: 31.25%;
    /* 300px / 960px*/
    display:inline-block;
}


#wrap div:first-child{
    padding: 50px 5.20833333333333%;
    /* 50px / 960px */
    background: #1f518b;
}


#wrap div:first-child + div{
    padding:130px  13.5416666666667%;
    /*  130px / 960px*/
    background:#f7e041;
}

 

 

16px 이 1em 에 해당됨

 

 

가변 폰트 

 

(가변 폰트를 적용할 글자 크기값 / 적용할 요소를 감싸고 있는 요소의 글자 크기값) = 가변 폰트 값

 

 

 

em 단위의 상속 문제를 해결해 주는 rem 단위

 

em 단위는 자신의 부모 박스에 글자 크기가 지정되어 있을 시 자식 박스에 글자 크기가 상속된다.

하지만 자식 박스의 글자 크기를 지정할 때 공식을 사용하여 글자 크기를 지정 해야 되는등 복잡함

rem 단위는 최상위 문서의 시작인 html, /html 태그를 기준으로 하기 때문에 상속 문제가 발생하지

않아서 유용하게 사용함

글자 크기를 rem 단위로 사용하면 상속문제 발생 안함

 

- rem 예제 - 

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0; font-size:100%;}

p{
font-size:5em;
}

p span{
font-size:5rem;
}
</style>
</head>
<body>
<p>
rem 단위!
<span>rem 단위!</span>
</p>
</body>
</html>

 

 

CSS3 의 가변폰트 단위  - vw , vh , vmin , vmax 단위

 

vw (viewport width) - 웹 브라우저의 너비를 100을 기준으로 하여 크기를 결정하는 단위

 

(vw 단위를 적용할 글자 크기값 * 브라우저의 너비값) / 100 = 크기값

 

글자를  5vw 라고 가정하면 웹 브라우저의 너비는 100 을 기준으로 하기 떄문에 

5% 가 된다. 정확한 수치값을 얻기 위해서 웹 브라우저의 너비를 알아야함

너비가 만약 1280 수치라면 (5 * 1280) / 100  -> 64px 이 정확한 수치

 

vh (viewport height) - 웹 브라우저의 높이를 100을  기준으로 하여 크기를 결정하는 단위

 

(vh 단위를 적용할 글자 크기값 * 브라우저의 높이값) / 100 = 크기값

 

 

vmin(viewport minimum) - 웹 브라우저의 너비와 높이 중 짧은 쪽을 기준으로 하여 크기를 결정

글자 크기를 5vmin 으로 가정하면 글자 크기는 웹 브라우저의 너비, 높이 중 작은 쪽을 100을

기준으로 하여 결정

 

vmax(viewport maximum) -  vmin 과 반대 

 

 

미디어 쿼리의 기본 문법

 

@media [only 또는 not] [미디어 유형] [and 또는 , ] (조건문){실행문}

 

 

미디어 쿼리 예제

 

 

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}

#wrap{
height:500px;
margin:0 auto;
border:4px solid #000;
}

@media all and (min-width:320px){
#wrap{
width:30%;
background:#00d2a5;
}
}

@media all and (min-width:768px){
#wrap{
width:60%;
background:#40b0f9;
}
}

@media all and (min-width:1024px){
#wrap{
width:90%;
background:#f45750;
}
}
</style>
</head>
<body>
<div id="wrap"></div>
</body>
</html>

 

 

 

<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Document</title>
<style>
*{margin:0; padding:0;}

#wrap{
width:90%;
margin:0 auto;
border:4px solid #000;
}

#wrap div{
display:inline-block;
height:100px;
}

#wrap div:first-child{
background:#f45750;
}

#wrap div:nth-child(2){
background:#40b0f9;
}

#wrap div:nth-child(3){
background:#00d2a5;
}

#wrap div:nth-child(4){
background:#ff884d;
}

#wrap div:last-child{
background:#464646;
}


@media all and (min-width:320px){
    #wrap  div{
        width:100%;
    }
}


@media all and (min-width:768px){
    #wrap  div{
        width:50%;
    }

    #wrap div:last-child{
        width:100%;
    }
}

@media all and (min-width:1024px){
    #wrap div{
        width:20%;
    }

    #wrap div:last-child{
        width: 20%;
    }
}



</style>
</head>
<body>
<div id="wrap">
<div></div><div></div><div></div><div></div><div></div>
</div>
</body>
</html>

 

 

 

'Resposive Web' 카테고리의 다른 글

[4일차] DO IT 반응형 웹 만들기/p247 ~ p336/09 반응형 웹 사이트 준비 작업하기  (0) 2021.02.16
[3일차] DO IT 반응형 웹 만들기/p 201 ~ p 245 / 서브페이지 만들기  (0) 2021.02.16
[2일차] DO IT 반응형 웹 만들기/p96 ~ 200/플렉서블 박스, 실전 반응형 웹 싸이트 만들기  (0) 2021.02.06
'Resposive Web' Related Articles more
Comments