반응형 웹 HTML , CSS, 미디어쿼리 @media 예제

2021. 10. 8. 03:13

반응협 웹 HTML, CSS, 미디어쿼리 @media 예제

글. 수알치 오상문

768픽셀 이하, 76~1024픽셀, 1025 이상 디스플레이에 대응하는 반응형 웹 예제입니다.

웹 브라우저에서 실행하고 화면 크기를 조절하면 출력 내용이 알맞게 달라지는 것을 볼 수 있습니다.

<파일: 반응형웹.html >

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<body>
	<div class="back">
		<div class="fore"> Contents </div>
	</div>
	<div class="list">
		<div>list #1</div>
		<div>list #2</div>
		<div>list #3</div>
		<div>list #4</div>
	</div>
	<style>
		.back {
			width: 100%;
			height: 200px;
			background: pink;
		}
		.fore {
			font-size: 26px;
			color: #fff;
			text-align: center;
		}
		.list {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			text-align: center;
		}
		.list > div {			
			height: 100px;
			margin: 5px;
		}
		@media (max-width:768px) {
			.list > div {
				flex:calc(100% - 15px); 
				background: green;
			}
		}
		@media (min-width:769px) and (max-width:1024px) {
			.list > div {
				flex:calc(50% - 25px);
				background: yellow;
			}
		}
		@media (min-width:1025px) {
 			.list > div {
				flex:calc(25% - 25px);
				background: skyblue;
			}   
		}
	</style>
</body>
</html>

미디어쿼리 부분은 다양하게 작성할 수 있는데 앞 예제는 다음처럼 작성해도 됩니다.

큰 영역을 처음에 시작하되 범위는 지정하지 않아도 됩니다.

그 아래는 작은 범위부터 큰 범위로 쪽으로 증가하면 작성합니다.

@media {
.list > div {
flex:calc(25% - 25px);
background: skyblue;
}
}
@media (min-width:0px) and (max-width:640px) {
.list > div {
flex:calc(100% - 15px);
background: skyblue;
}
}
@media (min-width:641px) and (max-width:1024px) {
.list > div {
flex:calc(50% - 20px);
background: green;
}
}

[주의] calc(25%-25px)처럼 - 앞뒤에 공백이 없으면 동작하지 않으니 주의합니다.

calc(25% - 25px)처럼 빈칸을 넣어주세요.

저작자표시 비영리 변경금지

'HTML, CSS' 카테고리의 다른 글

스르륵 좌우로 나타나는 사이드메뉴 input:checked(checkbox) (0)	2021.10.10
HTML CSS 로그인 화면 예제 (0)	2021.10.09
HTML / CSS 반응형 웹과 미디어 쿼리(그리드 레이아웃, 플렉스 박스 레이아웃, CSS 그리드 레이아웃) (0)	2021.10.07
HTML, 자바스크립트(Javascript), 장고(Django) 템플릿 주석(설명문) 비교 (0)	2021.10.05
CSS 요소(element)의 위치 - position: relative (0)	2021.10.05

수알치 블로그