반응형 웹

웹 페이지 하나로도 다양한 기기에 맞게 디자인이 자동으로 변경되는 웹 페이지. 미디어 쿼리를 사용해서 개발한다.

VIEWPORT

뷰포트(Viewport)는 웹 페이지의 가시 영역을 나타내는 용어이다. 뷰포트는 웹 페이지가 화면에 어떻게 표시되는지와 관련이 있으며, 웹 페이지가 어떤 디바이스나 브라우저에서 열릴 때 레이아웃 및 화면 크기를 조절하는 데 중요한 역할을 한다.

HTML5에서 태그를 사용하여 모바일 기기에서 실제 랜더링 되는 영역과 뷰포트의 크기를 조절할 수 있다.

<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" />

user-scalable=no

사용자가 화면을 확대 또는 축소할 수 있는지 여부

initial-scale=1

페이지가 처음 로드될 때 뷰포트의 초기 확대 비율.

초기 확대 비율을 1로 설정하므로 페이지가 기본 크기로 시작된다.

maximum-scale=1

사용자가 화면을 확대할 수 있는 최대 비율.

최대 확대 비율을 1로 설정하므로 사용자는 페이지를 확대할 수 없다.

VIEWPORT 사용 전/후

미디어 쿼리

반응형 웹 디자인을 구현하는 데 사용되는 CSS 기술 중 하나. 미디어 쿼리는 미디어 유형 및 특정 미디어 특성에 따라 스타일을 조건부로 적용할 수 있다.

쿼리 구문

@media 미디어유형 and (미디어특성) {
    /* 스타일 규칙 */
}

미디어 유형(Media Type)

미디어 쿼리는 웹 페이지가 화면, 프린트, 오디오 등의 다양한 미디어 유형에서 표시되는지 여부를 확인할 수 있다. 예를 들어, 화면용 스타일과 프린트용 스타일을 분리하여 정의할 수 있다.

• @media 규칙을 사용한 미디어 쿼리

<style>
		/*모니터 출력*/
    @media screen {
			body {
				background-color: red;
			}
    }
		/*프린터 출력(인쇄)*/
		@media print {
			body {
				background-color: green;
			}
		}
</style>

• media 속성을 사용한 미디어 쿼리

<link rel="stylesheet" href="screen.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />

/* print.css */
@media print {
    body {
        background-color: green;
    }
}

/* screen.css */
@media screen {
    body {
        background-color: red;
    }
}

미디어 특성(Media Feature)

미디어 쿼리는 화면 크기, 뷰포트 너비, 장치의 방향 등과 같은 미디어 특성에 대한 조건을 정의할 수 있다. 이러한 특성을 사용하여 특정 미디어 특성에 따라 다른 스타일을 적용할 수 있다.

• 화면 방향 전환 (orientation 속성 사용)

<style>
//세로 방향(높이가 너비보다 큼)
@media screen and (orientation: portrait) {
	body {
		background-color: red;
	}
}

//가로 방향(너비가 높이보다 큼)
@media screen and (orientation: landscape) {
	body {
		background-color: green;
	}
}
</style>

• 기기 별 출력

<style>
    /*스마트폰 접속*/
    @media (max-width: 499px) {
        body { background: red; }
    }
    /*태블릿PC 접속*/
    @media (min-width: 500px) and (max-width: 799px) {
        body { background: green; }
    }
    /*PC 접속*/
    @media (min-width: 800px) {
        body { background: blue; }
    }
</style>

• 레이아웃 변경(반응형 웹 패턴)

💡 float 속성을 사용하여 블록의 레이아웃을 결정 후,

특정 조건이 달성되면 float 속성을 제거하여 다른 화면 구성이 되도록 함

<style>
    * { 
        margin:0; 
        padding: 0;
    }

    body {
        width: 960px;
        margin: 0 auto;
        overflow: hidden;
    }

    #menu {
        width: 260px;
        float: left;
    }

    #section {
        width: 700px;
        float: right; /* left로 입력해도 상관 없습니다. */
    }

    @media screen and (max-width: 767px) {
        /* 스마트폰 사이즈에서는 전부 해제합니다. */
        body { width: auto }
        #menu { width: auto; float: none; }
        #section { width: auto; float: none; }
    }
</style>