[포스코X코딩온] 반응형 웹(Responsive Web)

웹 개발

[포스코X코딩온] 반응형 웹(Responsive Web)

끊임없이 성장중인 개발자 2023. 11. 11. 00:14

728x90

포스팅 주제

반응형 웹
Media Query

반응형 웹

반응형 웹 이란?

웹에 접속한 디바이스 크기에 따라 레이아웃을 다르게 표현한다.
다양한 디바이스들이 개발 되면서 모바일로 웹 사이트를 접속하는 경우가 많아져, 반응형이 중요해 졌다.

적응형 웹 이란?

사용자가 모바일 환경인지, PC 환경인지에 따라 다른 페이지를 보여준다.
두개의 url 주소를 가지고 있다.

반응형 웹 예시 )

카카오 모빌리티

https://www.kakaomobility.com/

삼성 뉴스 룸

https://news.samsung.com/kr/

ViewPort

반응형 웹사이트를 만들기 위해서 우리는 ViewPort 부분을 조정해야 한다.

기기마다 화면 사이즈가 다르기 때문에 기기에 맞춰 디자인을 하기 위한 크기요소
디바이스 화면 크기를 고려하여 사용자에게 최적화 된 웹 페이지 제공이 가능하다.

그렇다면 서로 다른 미디어 타입(디바이스 화면)에 따라 별도의 CSS를 지정하려면 어떻게 해야 할까?

바로 @media(미디어 쿼리)를 사용하면 된다.

@media

@media를 사용하면 각 디바이스 화면에 따라 별도의 CSS를 지정해 줄 수 있다.

사용 방법

@media 미디어유형 and (크기 규칙)

미디어 유형: All(전부) / Print(인쇄 시) / Screen(전부)
크기 규칙 : min(최소 뷰포트 넓이 설정) / max(최대 뷰포트 넓이 설정)
미디어 유형을 지정해주지 않는다면 기본값에는 All이 지정된다.
min(최소 크기를 지정해주는 것이 아닌 지정 된 값 이상일 경우이다)
max(최대 크기를 지정해주는 것이 아닌 지정 된 값 이하일 경우이다)

중단점 BreakPoint

media query가 규칙없이 남발할 경우, 프론트엔드 개발자와 소통이 안될 수 있다.

따라서 BreakPoint를 지정하여, BreakPoint마다 layout을 지정해 준다.

ex) 프로젝트에 따라 다름

Mobile <= 480px
768px <= tablet <= 1024px
1600px <= laptop

뷰 포인트에 가로와 세로 모드

뷰 포인트에 가로와 세로 모드를 적용할 수 있도록 하는 방식이 있다.

Min과 Max대신 orientation: landscape, portrait를 주어서 사용가능 하다.

landscape ( 가로 )

portait( 세로 )

<@mediaQuery 연습 1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mideaQuery1</title>
    <style>
        /* 최소 크기가 300px */
        /* all: 모든 경우 */
        @media all and (max-width: 600px) {
            .all{
                font-size: 2rem;
            }
        }
        /* print: 인쇄, 인쇄 미리보기 */
        @media print and (max-width: 600px) {
            .print{
                font-size: 2rem;
            }
        }
        /* screen : 인쇄를 제외한 모든 css 적용 */
        @media screen and (max-width: 600px) {
            .screen{
                font-size: 2rem;
            }
        }
        /* no : 아무것도 지정해주지 않으면 기본값 all  */
        @media (max-width: 600px) {
            .no{
                font-size: 3rem;
            }
        }
    </style>

</head>
<body>
    <div class="all">all</div> 
    <div class="print">print</div>
    <div class="screen">screen</div>
    <div class="no">no</div>

</body>
</html>

max가 600px이니까 600px 이하일 때 값이 적용된다.

요소 속성 All, Screen은 뷰 포인트가 변할 때 크기가 변하지만 Print속성은 값이 변하지 않는데, Print는 인쇄시에만 값이 변한다.

class no는 요소 속성을 주지 않았는데 이럴 때 기본값인 All이 적용된다.

All이 인쇄 시에도 값이 변하는 걸 확인할 수 있지만, Screen은 인쇄 시 값이 안변하는 것을 확인할 수 있다.

<@mediaQuery 연습 2>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 5px solid black;
        }
        @media screen and (max-width: 480px){
            .less {
                background-color: red;
            }
        }
        @media screen and (min-width: 480px){
            .more {
                background-color: blue;
            }
        }
        /* 두개가 겹치기 떄문에 작동하지 않는다. */
        @media screen and (max-width: 480px) and (min-width: 480px){
            .less-and-more {
                background-color: purple;
            }
        }
        /* (<, >, ==, 같은 연산자로 적용 가능) */
        /* @media screen and (max-width: 600px) and (min-width: 480px){ */
            @media screen and (480px <= width <= 600px){
            .less-and-more {
                background-color: purple;
            }
        }

        /* Landscape(가로) 모드일 때 적용할 CSS */
        @media screen and (orientation: landscape){
            body{
                background-color: gold;
            }
            
        }
        /* portrait(세로) 모드일 때 적용할 CSS */
        @media screen and (orientation: portrait){
            body{
                background-color: pink;
            }
            
        }
    </style>
</head>
<body>
    <div class="less">less 480px</div>
    <div class="more">more 480px</div>
    <div class="less-and-more">less-and-more 480px</div>
</body>
</html>

max와 min 범위를 <,>,== 같은 연산자로 나타낼 수 있다.

orientation을 사용해서 가로와 세로 모드에서 변경되는 값들을 지정할 수 있다. (지금 지정된 값은 백그라운드 컬러를 바꾼다)

<@mediaQuery 실습 1>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        div{
            width: 100px;
            height: 100px;
            background-color: black;
            border: 1px solid red;
            border-radius: 10%;
        }

        @media screen and (min-width: 701px){
            body{
                display: flex;
            }

            div{
                background-color: black;
                margin-left: 30px;
            }

        }
        @media screen and (700px >= width){
            div{
                background-color: skyblue;
                margin-top: 30px;
            }
        }
    </style>

    <!-- <style>
        .container{
            display: flex;
        }
        .item{
            width: 100px;
            height: 100px;
            background-color: black;
            margin: 15px;
            border: 1px solid red;
            border-radius: 15px;
        }

        @media screen and (max-width: 700px) {
            .contanier{
                display: block;
            }
            .item{
                background-color: skyblue;
            }
        }

    </style> -->
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    

    <!-- <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div> -->
</body>
</html>

<@mediaQuery 실습 2>

Header 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
        src="https://kit.fontawesome.com/837ff3adc1.js" crossorigin="anonymous">
    </script>

    <style>
        body{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none; /* 문자들 앞에 표시되는 *을 없앤다. */
        }

        /* header 스타일링 */
        header{
            width: 100%;
            height: 100px;
            z-index: 100;
        }

        header .inner{
            background-color: lightblue;
            display: flex; /* inline 처럼 보이게 하고 위치를 지정해주기 위해 */
            justify-content: center; /* 아이템을 가운데 정렬 */
            align-items: center; /* 아이템을 각 줄에 중간에 정렬*/
            height: 100%; /*768px 기준으로 높이가 바뀌기 때문에*/
        }

        /* 로고 */
        header .inner .logo{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            right: 200px;
            color: white;
            font-size: 2rem;
        }

        /* 메뉴 스타일링 */
        header .inner .menu{
            display: flex; /* li들을 일렬로 만들려고 사용*/
        }
        header .inner .menu li{
            margin: 0 10px;
            /* margin: 0 10px 0 10px; */
            font-weight: 800;
            cursor: pointer;
        }
        /* 테블릿 */
        @media screen and (480px <= width <= 1024px) {
            header{
                height: 60px;
            }
            
            header .inner{
                display: block;
                height: 100%; /*768px 기준으로 높이가 바뀌기 때문에*/
            }

            /* 로고 */
            header .inner .logo{
                /* flex를 사용한 방법 */
                position: relative;
                display: flex; /*요소의 상하 좌우 중앙 정렬이 가능하다.*/
                justify-content: center;
                align-items: center;
                width: 100%;
                right: 0px;
                height: 60px;
                
                /* position: static을 사용한 방법 */
                /* position: static;
                text-align: center;
                line-height: 60px; */
            }

            /* 메뉴 스타일링 */
            header .inner .menu{
                display: block;
                text-align: center; /*텍스트 중앙 정렬*/
            }
            header .inner .menu li{
                padding: 10px 0;
                /* margin: 10px 0; */
                /* margin: 0 10px 0 10px; */
                font-weight: 500;
            }
        }

        @media screen and (max-width: 480px) {
            header{
                height: 45px;
            }
            
            header .inner{
                display: block;
                background-color: chocolate;
            }

            header .inner .logo{
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                right: 0px;
                height: 45px;
            }

            /* 메뉴 스타일링 */
            header .inner .menu{
                display: block;
                background-color: pink;
                text-align: center;
            }
            header .inner .menu li{
                padding: 10px 0;
                /* margin: 10px 0; */
                /* margin: 0 10px 0 10px; */
                font-weight: 500;
                font-size: 0.8rem;
            }
        }
    </style>
</head>


<body>
    <header>
        <div class="inner">
            <div class="logo">
                <!-- 사이트에 나와 있는 것을 찾아서 붙여 놓으면 된다. !주의 : 폰트어썸 스크립트를 붙여야 한다. -->
                <i class="fa-solid fa-igloo"></i> 
            </div>
            <ul class="menu">
                <li>메뉴1</li>
                <li>메뉴2</li>
                <li>메뉴3</li>
                <li>메뉴4</li>
            </ul>
        </div>
    </header>
</body>
</html>

저작자표시

'웹 개발' 카테고리의 다른 글

[포스코X코딩온] Node.js 설치 및 모듈, Express 사용법 (2)	2023.11.22
[포스코X코딩온] Bootstrap 및 Grid (0)	2023.11.11
[포스코X코딩온] 개발 모델, Git 협업 과정과 Branch (0)	2023.11.08
[포스코X코딩온] jQuery를 이용한 캘린더 실습 (0)	2023.11.07
[포스코X코딩온] jQuery (0)	2023.11.07

현재글[포스코X코딩온] 반응형 웹(Responsive Web)

Today :
Yesterday :

나의 성장 개발일지