Dev.note(web) 21.07.12

김태훈·2021년 7월 12일

목록 보기

11/49

미디어쿼리 2일차

미디어쿼리의 적용

미디어쿼리를 적용하는 방법이 3가지 있다.

css 파일 하나에 기기에 대응하는 미디어쿼리 설정을 여러개 만든다.
기기에 대응하는 css파일을 하나씩 만들어 여러개 링크를 시킨다.

<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/mobile.css">

head 태그내에 따로 미디어 쿼리 설정을 만든다.

<style media="(min-width: 300px) and (max-width: 700px)">
	body{
		background-color: red;
	}
</style>

다만 이 방법은 유용하지 않아 잘 쓰지 않는 듯 하니 1,2번 방법만 고려하면 될 듯 하다.
간단한 내용을 쓸 수는 있으나 그 또한 1번 방법이 좋을 것 같다.
미디어쿼리 설정 하나하나의 길이가 길 때는 2번 방법이 더 좋을 듯.

미디어쿼리 예제1

(html)
<ul class="media-menu">
	<li><a href="#">menu 1</a></li>
	<li><a href="#">menu 2</a></li>
	<li><a href="#">menu 3</a></li>
</ul>
(css)
.media-menu{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 700px;
	background-color: black;
}
.media-menu a{
	color: black;
	text-decoration: none;
}
.media-menu li{
	width: 150px;
	background-color: yellow;
	border: solid 5px red;
	padding: 5px 15px;
	text-align: center;
}
@media (min-width: 320px) and (max-width:  767px){
	.media-menu{
		flex-direction: column;
		align-items: flex-start;
		width: 190px;
	}
	.media-menu li{
		margin-bottom: 10px;
	}
	.media-menuli:last-child{
		margin-bottom: 0;
	}
}

특별히 어려운점은 없는 예제인 듯 하다. 여태 배운 것의 복습이라 생각된다.

미디어쿼리 예제2

(html)
<header class="intro">
	<h1></h1>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
</header>
<main role="main">
	<h1>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </h1>
	<h1>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </h1>
	<h1>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </h1>
	<h1>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </h1>
	<h1>Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world Hello world </h1>
</main>
(css)
.intro{
	display: flex;
	position: fixed;
	width: 100%;
	height: 80px;
	background-color: #ffffff;
}
.intro h1 {
	width: 50%;
	height: 80px;
	background-color: black;
}
.intro nav{
	width: 50%;
	height: 80px;
	background-color: yellow;
}
.intro nav ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
.intro nav ul li {
	width: 33.3333%;
	height: 80px;
}
.intro nav ul {
	display: flex;
}
.intro nav ul li:nth-child(1){
	background-color: blue;
}
.intro nav ul li:nth-child(2){
	background-color: gray;
}
.intro nav ul li:nth-child(3){
	background-color: green;
}
main{
	width: 100%;
	height: 2000px;
	background-color: gold;
	padding-top: 80px;
}
@media (min-width: 320px) and (max-width: 767px){
	.intro{
		position: static;
		flex-direction: column;
		height: 160px;
	}
	.intro h1{
		width: 100%;
	}
	.intro nav{
		width: 100%;
	}
	main{
		padding-top: 0;
	}
}

폭을 줄이면서 인트로 레이아웃의 높이가 두배가 되는 코드다. 인트로 레이아웃은 fixed속성으로 3차원이지만 나머지 레이아웃이 2차원이라 인트로 레이아웃 밑으로 들어가게 되므로 padding-top을 설정하게 되지만, 인트로 레이아웃이 두배가 될 때 속성도 static으로 바꾸어 2차원으로 만들고 padding-top을 0으로 만들면 서로 세로 정렬이 된다.
대신 fixed속성이 사라져 문제점이 남는 듯 하다. 본문 레이아웃을 3차원으로 바꾸어 fixed 속성을 남기는 방법도 고민해 봐야겠다.

미디어쿼리 예제3

<div class="container">
	<div class="column">
		<img src="https://via.placeholder.com/250x150">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250x150">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250x150">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250x150">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250x150">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250x150">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
</div>
(css)
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1140px;
	margin: 0 auto;
	background-color: pink;
}
.column {
	width: 355px;
	background-color: #ffffff;
	border: solid 2px red;
	margin-bottom: 10px;
}
.column:nth-child(4),
.column:nth-child(5),
.column:nth-child(6){
	margin-bottom: 0;
}
.column img{
	width: 100%;
	vertical-align: middle;
}
.image-info{
	padding: 20px 0;
	text-align: center;
}
.image-info h2{
	margin: 0;
}
@media (min-width: 540px) and (max-width: 720px){
	.container{
		width: 720px;
	}
	.column:nth-child(4){
		margin-bottom: 10px;
	}
}
@media (min-width: 320px) and (max-width: 539px){
	.container{
		box-sizing: border-box;
		width: 100%;
		padding: 0 20px;
	}
	.column{
		width: 100%;
	}
	.column:nth-child(4),
	.column:nth-child(5){
		margin-bottom: 10px;
	}
}