7월 12일 (미디어쿼리실습)

rona-kim·2021년 7월 12일

학습내용

.media-menu {
	list-style: none;
	margin: 0;
	padding: 0; (초기 설정)

	/*x축으로 정렬하기 위해 flexbox help참조, 동일한 간격space between,y축 center */
	display: flex ;
	justify-content: space-between;
	align-items: center;

	width: 700px;
	background-color: black;
}

@media (min-width: 320px) and (max-width: 767px) {
	.media-menu {
		flex-direction: column; (y축 정렬로 하겠다)
		align-items: flex-start;
		width: 190px;
	}

	.media-menu li {
		margin-bottom: 10px;
	}

	.media-menu li:last-child {
		margin-bottom: 0; (마지막 li에는 여백 0으로)
	}

}

.media-menu a {
	color: black;
	text-decoration: none; (초기설정)
}

.media-menu li {
	width: 150px;
	background-color: yellow;
	border: solid 5px red;
	padding: 5px 15px;
}

320px~766px에서는 미디어쿼리에서 지정한 값으로 설정됨

2. helbak.com

<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 Hello World Hello World Hello World
 		Hello World Hello World Hello World Hello World Hello World</h1>	
	</main>

main은 익스플로러에서 지원하지 않는 태그이기 때문에 role지정해줘야함

*pc*
.intro {
	display: flex; (x축 정렬)
	position: fixed;(pc에서 header는 고정되어있음)

	width: 100%;
	height: 80px;
	background-color: #ffffff;


}

.intro h1 {
	width: 50%;
	height: 80px;
	background-color: black; (로고와 nav가 50%씩)

}

.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; (겹침 현상 때문)
}

header값에 fixed (3차원) 을 주었기 때문에 밑의 형제 코드는 레이어 겹침현상이 생기기 때문에 paddin-top을 주어서 눈에 보이게 함

*모바일*
@media (min-width: 320px) and (max-width: 767px) {
	.intro {
		position: static; (모바일에서는 header가 fixed가 아니므로 기본값인 static)
		flex-direction: column;
		height: 160px;
	}
	.intro h1 {
		width: 100%;
	}
	.intro nav {
		width: 100%;
	}
	main {
		padding-top: 0; (사이즈가 줄어들면 padding-top을 줬던 값 때문에 여백이 생기는데 다시 없애줌)
	}
}

3. bootstrap

Title

*pc*

.container {
	display: flex; (x축 정렬)
	flex-wrap: wrap; (안에 있는 박스가 박스를 감싸고 있는 영역보다 큰 경우 자동으로 줄바꿈현상이 일어나게하는 속성)
	justify-content: space-between; (일정한 여백)

	width: 1140px;
	margin: 0 auto;
	background-color: pink;
}
.column {
	width: 355px; (355px가 4개가 되면 1140이 넘기 때문에 3개일 때 줄바꿈현상)
	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; (img는 태생적으로 여백을 가지고 있는데 여백을 없애기 위함)
}
.image-info {
	padding: 20px 0; (상하 20px, 좌우 0)
	text-align: center;
}

.image-info h2 {
	margin: 0;
}

*모바일*
2*3
@media (min-width: 540px) and (max-width: 720px) {
	.container {
		width: 720px;
	}
	.column:nth-child(4){
	margin-bottom: 10px; (앞에서 magin-bottom값을 0을 주어서 똑같이 하기 위해 4에만 margin-bottom값을 준다)
	}

}
1*6
@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;
	}
}

4. 미디어 쿼리를 적용하는 3가지 방법
@media (min-width: 320px) and (max-width: 539px)

mobile전용 파일을 하나 더 만든다. 안에 미디어쿼리 코드를 적용 시키고 html파일에 link로 연결을 해줌
<style media=(min-width:  300px) and (max-width:  700px)>
		body {
			background-color:  red;
		}
	</style>
--> 첫번째, 두번째만 기억해도 됨

어려웠던 내용

어려운 내용은 딱히 없었으나 미디어쿼리를 적용할 때 어디를 어떻게 변경을 해야하는지 조금 헷갈렸다.
box-sizing: border-box;에 대한 내용이 순간 기억이 안났다.
flex에 대해서 주말에 공부했었는데 또 기억이 안났다.

해결방법

혼자서 복습해보기 (helbak.com , bootstrap)
box-sizing: border-box; 한번 더 검색해보기 (https://velog.io/@rona-kim/7%EC%9B%94-2%EC%9D%BC)
flex에 대해 검색해보기 (https://velog.io/@rona-kim/7%EC%9B%94-5%EC%9D%BC)

학습소감

주말에 w3school에서 많이 복습을 한게 도움이 되었는지 저번 시간에 했던 내용들을 한번씩 응용을 할 때 딱 떠올랐다. 다는 아니지만 저번 주보다는 나아졌다. 조금씩 조금씩 나아져가는 듯.
헷갈렸던 것들은 여전히 헷갈린다. 미디어쿼리 말만 들었을 때는 엄청 어려울 거라고 생각했는데 (여전히 어렵지만) pc와 모바일이라고 생각하니 쉽게 와닿았다.