학습내용

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>

css↓

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

	/* li태그를 x축으로 변경하기 위해 flexbox.help 사이트에 접속 */
	display: flex;
	justify-content: space-between;    /* 동일한 공백을 갖도록 */  
	align-items: center;     /*y축 기준으로 중앙정렬*/

	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: 300px) and (max-width:  767px) {
	.media-menu {
		flex-direction: column;    /* 해당 크기가 되면 x축 정렬이던 메뉴가 y축 정렬로 바뀜 */
		align-items: flex-start;   /* 넓이도 변함 */ 
		width: 190px;
	}
	
	.media-menu li {
		margin-bottom: 10px;
	}

	.media-menu li:last-child {
		margin-bottom: 0px;    /* 마지막 메뉴3 아래는 마진이 적용되지 않는다. */
	}
}

---

2. 덴마크 쇼핑몰 실습

<!-- 덴마크 쇼핑몰 -->
<!-- 상단 네비게이션 메뉴가 pc버전에서는 한 줄로 출력, 모바일 버전에서는 두 줄로 출력 -->
<!-- pc버전에서는 상단 메뉴가 position: fixed;, 모바일 버전에서는 fixed가 해제되어 있다. -->


<!-- 3차원 -->
<header class="intro">
	<h1>Logo</h1>
	<nav>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
	
</header>

<!-- 2차원 -->
<main role="main">
	<h1>Hello World Hello World Hello World Hello World Hello World Hello World Hello WorldHello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World</h1>
	<h1>Hello World Hello World Hello World Hello World Hello World Hello World Hello WorldHello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World</h1>
	<h1>Hello World Hello World Hello World Hello World Hello World Hello World Hello WorldHello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World</h1>
	<h1>Hello World Hello World Hello World Hello World Hello World Hello World Hello WorldHello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World</h1>
	<h1>Hello World Hello World Hello World Hello World Hello World Hello World Hello WorldHello World Hello WorldHello WorldHello WorldHello WorldHello World Hello World</h1>    
	<!-- 글자를 하나만 작성하면 intro부분 뒤에 작성이 되기 때문에 안보임-->
	<!-- header = 3차원, main은 2차원이기 때문에 레이어 겹침 현상이 일어난다. -->
	<!-- 글자가 겹치지 않게 하려면, padding-top을 header태그의 높이값 만큼 설정한다. -->
</main>    
<!-- main은 explorer에서는 지원하지 않기 때문에 반드시 role="main"을 입력해 준다. -->

css↓

/* PC */
.intro {
	display: flex;    /* 검은색 부분과 li태그 3개를 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;   /* li들을 x축 정렬 */
}

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

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

.intro nav ul li:nth-child(3) {
	background-color: green;
}

main {
	width: 100%;
	height: 2000px;
	background-color: gold;

	padding-top: 80px;    /* main에 작성한 h1태그가 레이어 겹침 현상때문에 보이지 않음. header태그의 높이값 만큼 padding값을 주면 글자가 가리지 않고 보이게 됨 */
}
/* header와 main은 둘다 block요소의 성질을 갖고 있기 때문에 y축 정렬로 표시됨 */


/*모바일*/
@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;     /* 모바일 버전에서 position을 static(2차원)으로 바꾸었기 때문에 레이어 겹침 현상이 일어나지 않는다. */
	}
}

• PC버전
  header의 메뉴바가 한 줄로 되어 있다.
  

• 모바일 버전
  header의 메뉴바가 두 줄로 되어 있다.
  

---

3. Bootstrap Agency 실습

• PC 버전 : 3 X 2 (한 화면에 6개의 사진)
  

• 태블릿 버전 : 2 X 3 (한 화면에 6개의 사진)
  

• 모바일 버전 : 풀사이즈 (한 줄로 나열)
  

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

css↓

/* PC버전 */
.container {
	display: flex;
	flex-wrap: wrap;   /* container의 넓이보다 사진들의 넓이가 더 클 때, 자동으로 줄 바꿈 */
	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%;    /* column영역에 가득 차도록 지정했으므로, img의 크기는 355x213px이 됨 */
	vertical-align: middle;    /* img와 column 사이의 미세한 공백을 제거해 주기 위해 작성 */
}

.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;     
		/* 3x2에서 2x3으로 레이아웃이 변하면서 pc버전에서 4,5,6번째의 오브젝트 밑에 margin값을 없앴었음 */ 
		/* 이번에는 5, 6만 맨 아래 오브젝트가 되므로, 4번째에는 다시 마진값을 적용해 준다. */
	}
}

/* 모바일버전 */
@media (min-width: 320px) and (max-width: 539px) {
	.container {
		box-sizing: border-box;
		width: 100%;

		padding: 0 20px;
	}

	.column {
		width: 100%;   /* pc버전에서 column값을 355px로 지정해 둔 것을 100%로 바꾼다. */
	}

	.column:nth-child(5),
	.column:nth-child(6) {
		margin-bottom: 10px;
	}
}

• Pc버전
  

• 태블릿 버전
  

• 모바일 버전
  

---

4. 미디어쿼리를 만드는 3가지 방법

1) css파일 안에서 작성

지금까지 실습을 하며 해 온 방벙

2) 별도의 미디어쿼리 파일을 만들어서 작성

• 보통 mobile.css라는 파일명으로 저장한다.
• index.html파일에서 <link rel="stylesheet" type="text/css" href="css/mobile.css"를 작성해서 연동시켜준다.

3) html의 head영역에서 style태그를 작성

• 예시 <style media="min-width: 300px) and (max-width: 700px)">