🟢 반응형- 반응형이란?

jea_i·2022년 2월 7일

반응형웹

목록 보기

1/5

<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 뷰포트를 디바이스의 단말기 환경에 최적화시키겠다 -->
    <!-- initial-scale=2 / 초기배율이 2배로 커짐 -->
    <!-- user-scalable=no /  손으로 확대 안됨 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>day53-1_responsible.html</title>
    <style>
        @viewport{
            width: device-width;
            zoom: 1;
            user-zoom: no;
        }
    </style>
    <link rel="stylesheet" href="css/day53-1_style.css">
</head>
<body>
    <h2>반응형웹 vs 적응형웹</h2>
    <ul>
        <li>
            <h4>웹사이트</h4>
            <p>
                데스크탑, 랩탑 환경에서 사용되는 브라우저에 서비스되는 사이트를 의미합니다.
            </p>
        </li>
        <li>
            <h4>모바일사이트</h4>
            <p>휴대용 단말기, 태블릿, 스마트폰 환경에서 사용되는 브라우저에 서비스 되는 사이트를 의미합니다.</p>
        </li>
        <li>
            <h4>적응형웹</h4>
            <p>
                웹사이트와 모바일 사이트를 분리하여 개발되는 사이트입니다.
                <br>따로 분리된 데이터를 사용하기 때문에 반응형사이트에 비해 빠른 속도로 서비스됩니다.
                <!-- 유지보수가 어렵다 -->
            </p>
        </li>
        <li>
            <h4>반응형웹</h4>
            <p>
                하나의 데이터로 웹과 모바일을 동시에 개발하는 사이트입니다.
                <br>통합된 데이타를 사용하기 때문에 적응형보다 느린속도로 서비스됩니다.
            </p>
        </li>
    </ul>
</body>
</html>

<style>
/* only(Default) | not */

/* 미디어 타일 @media (only all) */
@media only all{
    h2{
        color: #000;
    }
}

@media not print{
    h2{
        color: #f00;
    }
}

/* and, or */
@media only screen and (max-width:1080px){
    h2{
        color: #ff0;
    }
}

</style>

반응형 웹이란??

디바이스 종류에 따라 웹페이지 크기가 자동적으로 재조정 되는 것을 말합니다.
어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹에 적용되는 기술입니다.
하나의 html소스가 여러 장치에 최적화된 환경을 사용자에게 제공하기에 데이터 유지가 편리합니다.

모바일 퍼스트
모바일 퍼스트는 웹 디자인을 할 때, PC보다 모바일 기기를 먼저 생각해서 디자인하고 프로그래밍하는 기법입니다.
이 개념은 앞서말했듯 태블릿, 스마트폰들 모바일기기의 이용이 늘어나면서 일반 웹 사용자보다 모바일 웹 사용자가 더 많아지면서 생기게 됐습니다. 모바일 퍼스트의 핵심은 모바일의 제약을 집중의 기회로 본다는 것에 있습니다.
모바일의 제약은 크게 세가지도 나눌 수있습니다.

모바일 기기의 스크린 크기

네트워크 속도 및 품질

사용하는모드

위 세가지 제약을 통해 일반 웹은 모바일 웹에 있어서 불필요한 요소(기능/형식/꾸미기/이동)들을 가지고 있다고 판단합니다. 불필요한 요소를 최소화시킨 모바일 웹은 사이트가 진짜로 제공해야 할 내용과 기능이 무엇인지 나타냅니다. 그리고 사용자들에게 사용하기 편하고 작업을 빠르게 처리할 수 있는 웹을 제공합니다. 그 중 가장 대표적인 것으로 일반 웹 메뉴를 한 버튼으로 축소 시켜놓고 첫화면부터 컨텐츠를 보여주는 것입니다.

jea_i

열정열정열정🔥

다음 포스트

🟢 반응형- 반응형이란?

반응형웹

반응형 웹이란??

🟢 반응형 - Media Query (1)

0개의 댓글

관련 채용 정보