🎊학습한 내용

css media queries

x축 정렬 에서 width 축소시 y축 정렬로 전환

.media-menu {
	list-style: none;
	margin: 0;
	padding: 0;

	display: flex;
	justify-content:  space-between;
	align-content: 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;
	}
}

width 축소시 정렬바꾸고 header fixed 풀기

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

.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; /* 상단과 겹쳐지면서 안보임 */
}

@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; /* 다시 복구 */
	}
}

3단 전환

.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; /* 4, 5, 6번째만 공백 없애기 */
}

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

media queries 적용 방법
1. css 파일 하나로 관리
2. mobile css 따로 관리
3. head에 style 태그 사용

이하 내용은 github 업로드

☔학습한 내용 중 어려웠던 점

media queries 전체적인 이해

🎁해결방법

이전 강의 복습

🎉학습소감

이전에 배운 내용들을 하나씩 사용하다 보니 조금씩 익숙해지기 시작했다. 문제는 익숙해지기만 했다는 것이다.😲 하루빨리 내 머릿속에서 모든 것이 떠오르길...