2022/05/23

jungkwanlee·2022년 5월 23일
0

코딩일지

목록 보기
41/108

1) 학습한 내용

반응형 웹란?

웹 디자인 기법 중 하나. 디바이스의 디스플레이의 종류에 반응하여 그에 맞도록 적절하게 UI 요소들이 유기적으로 배치되도록 설계된 웹을 말한다.

반응형 웹의 등장 이유

반응형 웹이 등장하면서 웹사이트를 이용하는 사람들에게 모든 기기에서 최적화된 웹사이트를 제공할 수 있게 되었고, PC 버전의 웹사이트와 모바일 버전의 웹사이트 두 가지 모두를 만들지 않아도 됨에 따라 비용과 시간 그리고 인력을 줄일 수 있게 되었다. 스마트폰이나 태블릿이 대중화 되기 이전에는 데스크톱 화면에만 홈페이지를 최적화 시켰지만 모바일웹 접속률이 많이 늘어난 지금은 모바일 버전 또한 신경써주어야 한다.

반응형 웹의 특징

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • viewport : 스마트 폰 화면에서 실제 내용이 표시되는 영역
  • width : 뷰포트 너비
  • initial-scale : 초기 확대/축소 값(1~10)
  • user-scalable: 확대 축소 가능 여부

반응형 웹의 장점과 단점

장점

1)모든 기기에서 접속 가능
2) 가로모드에 맞춰 레이아웃 변경 가능
3) 사이트 유치 관리 용이
4) 최신 웹 표준 따름

단점

1) 사이트 디자인이 단순
2) 하위 버전 브라우저와 호환성 문제 있을 수 있음 -> 미디어쿼리는 CSS3 기술

반응형 웹 작성법

미디어쿼리 (Media Query)

크게 screen과 print로 나뉘는데, screen은 일반적으로 모니터를 의미하며 PC,태블릿,스마트폰까지 의미한다 print는 말그대로 만들어진 웹사이트를 프린트 기기를 이용해 프린트 하는 것이다

각 화면크기에 맞게 CSS속성을 적용해 줄 수 있기 때문에 PC에 맞는 CSS 테블릿 또는 스마트폰에 맞는 CSS를 적용 해 줄 수있다

링크로 미디어 쿼리 적용하기

<link rel="stylesheet" type="text/css" media="screen" href="cssscreen.css">
<link rel="stylesheet" type="text/css" media="print" href="cssprint.css">

@import로 미디어 쿼리 적용하기

@import url(cssscreen.css) screen;
@import url(csspprint.css) print;

@media로 미디어 쿼리 적용하기

@media screen{ 
  CSS 속성
}

여기서 스크린과 프린트 모든 속성에 똑같이 적용하고 싶다면 media="all" 또는 media 부분 생략하면

된다

예시)

@media screen and (min-width:768px) /*and (max-width:1719px)*/{
    #container{
        width:570px;
        margin:50px auto;
    }
    .card{
        position:relative;
        width:550px;
        height:250px;
    }
    .words{
        position:absolute;
        left:310px;
        top:50px;
        width:200px;
    }
}

@media screen and (min-width:1720px){
    #container{
        width: 1716px;
    }
    .card{
        position:relative;
        float:left;
        margin:10px;
        width:550px;
        height:250px;
    }
    .words{
        position:absolute;
        left:310px;
        top:50px;
        width:200px;
    }
}

미디어 쿼리 기본

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

미디어 쿼리 구문의 구성 요소:

  • 여기 코드가 어떤 미디어를 위한 것인지 브라우저에 알려주는 미디어 유형(예를 들어, 인쇄 또는 화면).
  • 괄호로 묶은 씨에스에스 규칙이 적용되기 위해 전달되어야 하는 규칙 또는 조건문 격인 미디어 표현식.
  • 조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 씨에스에스 규칙 집합.

미디어 기능 규칙

미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있다.

너비와 높이

반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있다.

이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용된다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용한다.

@media screen and (width: 600px) {
    body {
        color: red;
    }
}

width(및 height) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 min- or max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 max-width:를 사용할 수 있다.

@media screen and (max-width: 400px) {
    body {
        color: blue;
    }
}

실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 width 또는 height 값을 사용하는 경우는 좀처럼 흔치앖다.

미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 미디어 쿼리 사용: 미디어 기능에서 전체 목록을 찾을 수 있다.

방향성
잘 지원되는 미디어 기능 중 하나는 orientation로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해준다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용한다.

@media (orientation: landscape) {
    body {
        color: rebeccapurple;
    }
}

"논리곱" 미디어 쿼리

@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
        color: blue;
    }
}

"논리합" 미디어 쿼리

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

"부정 논리" 미디어 쿼리

@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

아래는 어제 만들었던 제로베이스에서 작성된 웹페이지의 코드다. 만약에, 더 나은 코드가 나온다면 수정을 할 것이다.

(과제)커피전문점 웹페이지 소스 코드

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coffee House</title>

    <link rel="stylesheet" href="./images/favicon.ico">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!--header-->
<header id="header">
    <div id="logo">
    <h1><a href="#coffee-house">Coffee House</a></h1>
    </div>
    <nav>
        <ul>
            <li><a href="#coffee">COFFEE</a></li>
            <li><a href="#rewards">REWARDS</a></li>
            <li><a href="#menu">MENU</a></li>
            <li><a href="#order">ORDER</a></li>
        </ul>
    </nav>
    </div>
</header>
<section><!--First Section-->
    <div id="coffee-house">
        <div class="img">
            <div class="coffee-info">
                <table>
                    <tr>
                        <td>Special Coffee</td>
                    </tr>
                    <tr>
                        <td class="desc">always beside you, my coffee bean</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</section>
<!--coffee section-->
<section id="coffee">
    <h1>Coffee</h1>
    <div class="promise">
        <p>고품질의 원두만을 제공합니다.</p>
        <br>
        <p>커피 본연의 신선함을 제공합니다.</p>
        <br>
        <p>커피 전문가와 함께 합니다.</p>
    </div>
    <div class="img">
        <img src="./images/bean.jpg" width="500px" height="350px">
    </div>
</section>
<!--Rewards section-->
<section id="rewards">
    <div class="reward-title">
    <div class="tip">    
        <table>
            <tbody>
                <tr>
                    <td class="h2">Rewards</td>
                </tr>
                <tr>
                    <td>혜택 1	My Coffee 포인트를 적립해드립니다.</td>
                </tr>
                <tr>
                    <td>혜택 2	30포인트가 적립되면 Gold level이 됩니다.</td>
                </tr>
                <tr>
                    <td>혜택 3	1달에 한 번 1+1 커피가 제공됩니다.</td>
                </tr>
                <tr>
                    <td>혜택4	다양한 이벤트 응모 기회가 제공됩니다.</td>
                </tr>
            </tbody>
        </table>
    </div>
    </div>
</section>
<!--Menu section-->
<section id="menu">
    <h1>Menu</h1>
    <div class="menu-coffees">
       <div class="menu-img">
          <img src="images/ame.jpg" alt="Americano">
          <div class="menu-description">
             <h3>아메리카노</h3>
             <p>에스프레소에 뜨거운 물을 희석시켜 만든 음료. 아메리카노라고 줄여서 불리지만 정확한 명칭은 Caffé Americano이다. 이탈리아어인 'Caffè Americano'를 영역(英譯)하면 'American coffee'이지만 영어로 쓰이는 경우는 없다. 단어를 해석하자면 '미국식 커피'로, 말 그대로 '유럽식 커피에 비해 옅은 농도인 미국식 커피 스타일'을 일컫는 말이다. 에스프레소보다 농도가 연하고 양이 많다는 이유로 카페 룽고(Caffé Lungo; 줄여서 룽고)와 혼동할 수 있지만, 서로 다른 커피이다.</p>
          </div>
       </div>
       <div class="menu-img">
          <img src="images/latte.jpg" alt="latte">
          <div class="menu-description">
             <h3>라떼</h3>
             <p>이탈리아어로 우유를 뜻하는 단어지만 스타벅스의 성공 이후 라떼=카페라테의 의미로 널리 쓰이게 되었다. 국내에서는 흔히 음료 이름에 '라떼'가 붙어 있으면 대부분 커피(에스프레소)가 포함된 음료이다. 유럽권 국가에서 '라떼'를 주문하면 관광객의 표현에 익숙한 점원이거나 스타벅스가 널리 퍼진 국가가 아닌이상 우유를 받게될 수 있으니 주의. 국립국어원에 따르면 이탈리아어로 Latte이므로 표기법으로는 '라테'가 올바르다. 그러나 라테라고 제대로 발음하는 사람이나 표기하는 카페는 거의 없고, 대부분 '라떼'로 부른다.</p>
          </div>
       </div>
    </div>
 </section>
 <section id="order">
    <h2>Order</h2>
<div id="order-main">
    <div id="order-number">
        <div class="number-header">
            <p>Phone Number</p>
        </div>
            <input class="number-input" type="text" placeholder="예 : 010-111-2222">
    </div>

    <div id="order-menu">
        <div class="menu-header">
            <p>Menu</p>
        </div>
        
            <input class="menu-input" type="text" placeholder="예 : 아메리카노 2잔">
        
    </div>

    <div id="order-button">
        <input class="order-button" type='button' 
            value='Order Now!' 
            onclick='alert("주문완료! 감사합니다.")'
            />
    </div>
</div>
    <footer>
       <p><a href="#">문의사항</a>© 2022 My Coffee House</p>
    </footer>
 </section>
</div>
</body>
</html>

CSS

@charset "utf-8";

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}

body {
    max-width: 1200px; 
    margin: 0 auto;
    background-color: #fff;
    
}
li {
    line-height: 2;
    list-style: none;
}

header a{
    text-decoration: none;
}
a:link{color:white;}
a:visited{color: white;}
a:active{color: darkgrey;}


/* header */
header {
    width: 1200px;
    height: 50px;
    background-color: #333333;
    position: fixed;
    z-index: 100;
    margin: 0 auto;
}
#logo {
    font-size: 15px;
    display: inline-block;
    padding: 0.5em;
    margin-left: 6.2em;
    position: absolute;
    z-index: 100;
}


nav ul {
    width: 100%;
    text-align: right;
    position: absolute;
    top: 0;
    padding-right: 4.3em;
    z-index: 99;

}

nav ul li {
    display: inline-block;
    
    font-size: 1em;
}
nav ul li a{
    padding: 1em 1em 1em 1em;

}
/* coffee-house section */
#coffee-house .img{
    height: 450px;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}
#coffee-house .img{
    padding-top: 200px;
    width:100%;
    height:100%;
    background:url(../images/main.jpg) center no-repeat;
    background-size: cover;
    background-color: rgb(149,198,247);
    background-blend-mode:overlay;
}
#coffee-house .coffee-info{
    text-align: center;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    color: black;
    font-family: 'monospace', sans-serif;
}
#coffee-house .coffee-info table, th, td{
    border-collapse: collapse;
    width: 1000px;
    margin-bottom: 100px;
    height: 100px;
    margin: 0 auto;
}
#coffee-house .coffee-info table{
    text-align:center;
}
#coffee-house .coffee-info td{
    font-size: 30px;
    text-align:center;
}
#coffee-house .coffee-info table .desc{
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    text-shadow: 3px 3px grey;
    text-transform: uppercase;
}
/* coffee section*/
#coffee{
    width: 100%;
    height: 0 auto;
    text-align: center;
    
}
#coffee h1{
    font-size: 60px;
}
#coffee .promise{
    padding-top: 20px;
    padding-bottom: 20px;
}
#coffee div.img{
    width:fit-content; 
    text-align:center;
    margin:auto;
}
/*rewards section*/
#rewards {
    width: 100%;
    height: 100%;
    background: rgb(158,225,156);
    background: linear-gradient(180deg, rgba(158,225,156,1) 0%, rgba(2,163,174,1) 100%);
    clip-path: polygon(0 0, 100% 10%, 100% 90%, 0% 100%);
}
#rewards .tip .h2{
    text-align:center;
    font-size:60px;
    color:white;
}

#reward table{
    margin: 0 auto;

}
tr, td { 
    line-height: 3em;
    padding: 8px;
    text-align: center;
}

/* menu section */
#menu{
    padding-top: 30px;
    text-align: center;
    scale:auto;
    color:black;
}
#menu h1{
    font-size: 70px;
    color: rgba(14, 107, 208, 0.888);
}
.menu-coffees{
    padding:0 40px;
}
.menu-coffees img{
    width: 20%;
    border-radius: 50%;
 }
img{
   display: flex;
   justify-content: space-between;
   padding-bottom: 30px;
}
.menu-description{
    text-align: left;
    padding-left: 30px;
}
.menu-description  h3{
    font-size: 30px;
}
.menu-description p{
    font-size: 18px;
    text-align:end;
}
/* order section */
#order{
    width: 100%;
    height: 580px;
    background: rgb(246,171,192);
    background: linear-gradient(180deg, rgba(246,171,192,1) 0%, rgba(182,117,191,1) 100%);
    text-align: center;
    position: relative;
    clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    height: auto;
    color:white;
}
#order h2{
    font-size: 70px;
    margin-top: 30px;
}
#order #order-number .number-header{
    color: white;
    width: 300px;
    margin-left: 350px;
    margin-bottom: 5px;
    margin-top: 50px;
}

#order #order-number .number-input{
    border:0 solid black;
    width: 300px;
    height: 35px;
    margin-bottom: 10px;
}
#order #order-menu .menu-header{
    color: white;
    width: 300px;
    margin-left: 320px;
    margin-bottom: 5px;

}

#order #order-menu .menu-input{
    border:0 solid black;
    width: 300px;
    height: 35px;
    margin-bottom: 10px;
}

#order #order-button .order-button{
    background-color: black;
    color: white;
    width: 300px;
    height: 35px;
    margin-top: 20px;
}
/* footer */
footer{
    margin-top: 40px;
    padding-top: 20px;
    border-top:1px solid white ;
    display: flex;
    justify-content: center;
 }

링크

2) 학습내용 중 어려웠던 점

반응형 웹은 기존의 웹 개발과는 다르게 웹의 크기에 따라서 웹페이지가 크기에 맞춰서 규격을 맞춰가는 것인데 제로 베이스에서 시작한 과제를 서툴게 했을 때가 떠올랐다.

3) 해결방법

결국에는 반복 학습이 이걸 해결할 수가 있겠지만 시간이 걸릴것이고 아래의 링크를 참고해야 한다.
미디어 쿼리 초보자 안내

4) 학습소감

이제 CSS수업에 미디어쿼리 파트에 들어갔다. CSS 복합선택자를 이해하고 있다면, 미디어쿼리를 배우는데 시간은 오래 걸리지 않을 것이다. 반면에, 나 같이 이해하는 데 시간이 걸리는 사람은 반복 학습을 해야 할 것이다.

profile
jungkwanlee
coding
이전 포스트

2022/05/20

다음 포스트

2022/05/24

0개의 댓글

관련 채용 정보