210712 개발일지

📌 학습한 내용

미디어쿼리 실습

1. PC version & mobile version 메뉴바

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

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

	display: flex;
	justify-content: space-between;
	align-items: center;

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

.media-menu a {
	color: black;
	text-decoration: none;
}

.media-menu li {
	width: 150px;
	background-color: whitesmoke;
	border: solid 5px yellowgreen;
	padding: 5px 15px;
	text-align: center;
}

/* mobile */
@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;
	}
}

2. Helbak 메인 페이지

<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</h1>  /* 중략 */
</main>

/* 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: ghostwhite;
}

.intro nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.intro nav ul li {
	width: 33.333%;
	height: 80px;
}

.intro nav ul {
	display: flex;
}

.intro nav ul li:nth-child(1) {
	background-color: rgba(128, 128, 128, 0.1);
}

.intro nav ul li:nth-child(2) {
	background-color: rgba(128, 128, 128, 0.2);

}

.intro nav ul li:nth-child(3) {
	background-color: rgba(128, 128, 128, 0.3);
}

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

	padding-top: 80px;
}

/* mobile */
@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. Bootstrap Agency 메인페이지 - Portfolio

• PC version
  

• PC version 2
  

• mobile version
  

<div class="container">
 	<div class="column">
 		<img src="https://via.placeholder.com/250x150">
 		<div class="image-info">
 			<h2>Threads</h2>
 			<p>Illustration</p>
 		</div>
 	</div>
 	<div class="column">
 		<img src="https://via.placeholder.com/250x150">
 		<div class="image-info">
 			<h2>Explore</h2>
 			<p>Graphic Design</p>
  		</div>
 	</div>
 	<div class="column">
 		<img src="https://via.placeholder.com/250x150">
 		<div class="image-info">
 			<h2>Finish</h2>
 			<p>Identity</p>
 		</div>
 	</div>
 	<div class="column">
 		<img src="https://via.placeholder.com/250x150">
 		<div class="image-info">
 			<h2>Lines</h2>
 			<p>Branding</p>
 		</div>
 	</div>
 	<div class="column">
 		<img src="https://via.placeholder.com/250x150">
 		<div class="image-info">
 			<h2>Southwest</h2>
 			<p>Website Design</p>
 		</div>
 	</div>
 	<div class="column">
 		<img src="https://via.placeholder.com/250x150">
 		<div class="image-info">
 			<h2>Window</h2>
 			<p>Photography</p>
 		</div>
 	</div>
 </div>

/* PC */
.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;
}

.column img:hover {
	background-color: yellow;
}
.image-info {
	padding: 20px 0;
	text-align: center;
}

.image-info h2 {
	margin: 0;
}


/* PC 2 */
@media (min-width: 540px) and (max-width: 720px) {
	.container {
		width: 720px;
	}

	.column:nth-child(4) {
		margin-bottom: 10px;
	}
}

/* mobile */
@media	(min-width: 320px) and (max-width: 530px) {
	.container {
		box-sizing: border-box;
		width: 100%;

		padding: 0 20px;
	}

	.column {
		width: 100%;
	}

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

미디어쿼리를 적용하는 방법

1. CSS 파일 안쪽에 미디어 쿼리 코드 작성 (실무에서 가장 많이 사용)
@media (min-width: 320px) and (max-width: 530px) {}

2. mobile version 파일을 따로 만들기
코드가 길어질 때 (2000줄 초과할 시)

3. <style> 사용
<style>안쪽에 media 속성을 이용해 다이렉트로 속성값 넣어주기

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

📌 학습내용 중 어려웠던 점

1. 'Bootstrap Agency'의 메인페이지와 동일하게, 마우스를 이미지에 롤오버했을 때, 노란색으로 변하게 하고 싶어 .column img:hover { background-color: yellow; 값을 줬으나 작동하지 않았다.

2. 미디어쿼리를 적용하는 세 번째 방법에서 html파일에 <head> 안쪽에 <style>을 이용해 바로 media 속성값을 넣어주니 css파일에 작성한 것과 동일하게 디자인이 적용되었다. 그렇다면 html 하나만으로 사실상 웹페이지 제작이 가능한가? 편의를 위해 css를 사용하는 것인가? (js는 아직 배우지 않아 제외)

📌 해결방법

여전히 hover가 작동하지 않는다. 오타도 없었는데, 여전히 원인을 찾아보고 있다. css는 html과 동시에 작성할 수 있다는 것을 앞의 개발일지에서 찾았다. 복습이 부족했던게 아닐까 생각한다.

📌 학습소감

이번 학습을 하는 동안 앞서 배운것들을 조금씩 사용해 보았다. 헷갈려 했던 padding과 margin을 계속해서 바꿔가며 차이를 확실히 했고, 실제 홈페이지의 색상을 rgba값으로 줘보았다. 하지만 수업내용 이외의 추가작업을 하던 중, 익숙했던 hover 속성이 먹히지 않아서 당황스러웠다.