2021.05.31 (미디어쿼리 실습)

학습한 내용

[미디어쿼리 실습]

/*모바일 버전과 PC버전용 메뉴 만들기 */
.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-menu li:last-child {
		margin-bottom: 0;
	}
}

PC 버전

Mobile 버전

/* 덴마크 쇼핑몰 상단영역 만들기 */
/* PC */
.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 {
	display: flex;

	list-style: none;
	margin: 0;
	padding: 0;
}

.intro nav li {
	width: 33.3333%;
	height: 80px;
}

.intro nav li:nth-child(1) {
	background-color: blue;
}

.intro nav li:nth-child(2) {
	background-color: gray;
}

.intro nav 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;
	}
}

PC 버전

Mobile 버전

/* bootstrap agency에 portfolio영역 만들기 */
.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;
	}
}

PC 버전

태블릿 버전

Mobile 버전

[미디어 쿼리 사용 방법]

<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- css파일 하나에 Mobile, 태블릿, PC에 대한 미디어 쿼리를 작성 -->

<link rel="stylesheet" type="text/css" href="css/mobile.css">
<!-- 따로 Mobile css파일을 만들어서 미디어쿼리를 작성하고 관리 -->

<style media="(min-width: 300px) and (max-width: 700px)">
	body {
		background-color: red;
	}
</style>
<!-- head영역에 style태그를 이용해 바로 미디어쿼리를 작성해서 적용 --> 

학습내용 중 어려웠던 점

미디어쿼리 자체 내용은 크게 어려웠던점이 없었습니다.

해결방법

개발자 도구를 이용해 화면사이즈에 따라 결과값이 다르게 나오는 이유를 보면서 영상을 시청했습니다.

학습소감

화면 사이즈에 따라서 레이아웃이 변화하는것을 배울수 있어서 좋았고 Mobile과 태블릿의 비중이 높은 요즘 꼭 필요한 학습이라고 생각합니다.