[개발일지11일차]미디어쿼리 실습

1.학습내용

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

.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: 0px;
	}
}

• pc:상단바 고정
• 모바일: 상단바 고정x

(fixed포지션 사용으로 3차원)
<header class="intro">
		<h1>Logo</h1>
		<nav>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</nav>
	</header>

(메인태그는 익스플러어에서 지원하지 않는 태그이기 때문에 role속성 필수)
(아무 포지션 사용안함. 즉,2차원)
*먼저 나오는 형제가 3차원일 경우 뒤에 나오는 형제는 형제 뒷쪽으로 레이어 겹침.
	<main role="main"><h1>top<h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1><h1>Logo</h1>		
    </main>

.intro {
	display: flex;
    (h1과 nav태그를 x축 정렬)
	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;
    (header와 main이 겹쳐져 컨텐츠가 안보이는 일을 대비해서 컨테츠 밑으로 내림)
}

@media(min-width: 320px) and (max-width: 767px) {
	.intro {
		position: static;
		height: 160px;
		flex-direction: column;
	}
	.intro h1 {
		width: 100%;
	}
	.intro nav {
		width: 100%;
	}
	main {
		padding-top: 0;
	}
}

	<div class="container">
		<div class="column">
			<img src="http://via.placeholder.com/250x150">
			<div class="image-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="http://via.placeholder.com/250x150">
			<div class="image-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="http://via.placeholder.com/250x150">
			<div class="image-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="http://via.placeholder.com/250x150">
			<div class="image-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="http://via.placeholder.com/250x150">
			<div class="image-info">
				<h2>title</h2>
			</div>
		</div>
		<div class="column">
			<img src="http://via.placeholder.com/250x150">
			<div class="image-info">
				<h2>title</h2>
			</div>
		</div>
	</div>

(flex형태는 https://flexbox.help/참고)
.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1140px;
	margin: 0;
	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%;
    (이미지 크기는 252x150이지만 칸 크기에 맞게 확대)
	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;
	}
	.colums {
		width: 100%;
	}
	.column:nth-child(4),
	.column:nth-child(5) {
		margin-bottom: 10px
        (작은 확면으로 재배열 될 경우 앞에 조정한 간격들이 안맞음. 그래서 맞춤 작업 필요했음)
	}
}

미디어쿼리 사용하는 방법3가지

1. css에서
   @media (min-width: 320px) and (max-width: 539px) {} 쿼리 사용

2. 아예 새로운 파일 만들기
   mobile.css를 만들어서 @media쿼리 사용.
   그리고 index.html파일에서 <link css/style.css뿐만 아니라><link rel = "stylesheet" type="text/css" href="css/mobile.css"로 연동>

3. style태그 사용. 속성은 media

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

2.어려웠던부분
상단바를 만드는 과정중에 검은 header와 nav부분 간격이 맞지 않았다.

3.해결방법
코드를 아무리 봐도 문제가 없어보연지만, css파일에서 문제 발견했다.
h1 {
margin: 0;
padding: 0; }
로 공간을 초기화 시켜주는 작업 필요했다.

4.학습소감
브라우저를 줄여보고 변화를 주는 미디어쿼리는 생각보다 재미있었다.