개발일지 5일차

이재경·2021년 5월 31일

1. 학습 내용

미디어쿼리 실습 예제1

index.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>

style.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-menu li:last-child {
		margin-bottom: 0;
	}
}
PC
display:flex를 통해 요소들을 수평으로 구성하고, justify-content:space-between 속성을 사용하여 요소들간 일정한 간격을 만들어준다. 그리고 align-items를 통해 y축 중앙정렬을 시킨다.
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
모바일
미디어쿼리를 통해 모바일크기의 뷰포트너비(320px~767px)로 지정한다.
flex-direction:column을 통해 수평레이아웃에서 수직레이아웃으로 변경하고, align-items:flex-start을 통해 레이아웃의 시작점으로 이동시킨다.
마지막 li에 margin-bottom:0을 줘서 마지막 li 아랫부분의 background-color를 제거해준다.

미디어쿼리 실습예제2

index.html

<!-- 3차원 -->
	<!-- 미디어쿼리 실습예제2 -->
	<header class="intro">
		<h1>Logo</h1>
		<nav>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</nav>
	</header> 
<!-- main 태그는 익스플로러에서 지원하지않기 때문에 role을 넣어줘야한다. -->
<!-- 2차원 -->
<main role="main">
	<h1>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</h1>
	<h1>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</h1>
</main>

style.css
/*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 {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
}
.intro nav ul li {
	width: 33.3333%;
	height: 80px;
}
.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;
}
PC

display:flex를 통해 메뉴부분의 li를 수평레이아웃으로 하고 position:fixed로 윗부분에 메뉴바를 고정시킨다.
모바일

미디어쿼리를 이용하여 모바일크기의 뷰포트(320px~767px)범위를 정하고, PC버젼의 고정된 메뉴바를 position:static으로 변경하여 고정된 메뉴바를 풀어준다.

미디어쿼리 실습예제3

index.html

<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>

style.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;
	}
}
width(721px~)

flex로 수평레이아웃 구성후 flex-wrap:wrap으로 가능한 영역을 벗어날 경우 여러행으로 나누어 표현하기 때문에 줄바꿈이 된다.
그리고 img영역에 vertical-align:middle을 줘서 img와 column 요소 사이의 미세한 틈이 생기게 되는데 이 문제점을 해결해준다.
width(540px~720px)

width(320px~539px)

부모요소 범위안에서 존재하려면 box-sizing:border-box를 해준다.