2021_07_12 개발일지

1) 학습한 내용

오늘은 미디어쿼리에 대해 실습해보았다.

1.메뉴만들기

-html

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

/*li 태그 x축 변
참고 사이트! https://flexbox.help/

pc버전에서는 x축 모바일버전에서는 y축으로 정렬하는 미디어쿼리 기능 */

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

2.상단부분 작업

-html

	<!-- 3차원 -->
	<!-- <header class="intro">
		<h1></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 World Hello World Hello World Hello World </h1>
		<h1>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </h1>
		<h1>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </h1>
		<h1>Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World </h1>
	</main>
   -->

-css

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

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

.intro nav ul {
	display: flex;

}*/

/*.intro nav ul li {
	width: 33.333%;*/
	/*3등분을 할때 오차를 작게*/
	/*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;
}*/

/*2차원인 메인과 3차원인헤더 태그가 겹치는 부분이 있어 
메인의 글이 헤더 뒤로 들어가는경우
패딩 탑 값을 주면서 겹치는 부분에는 공간이 발생하도록 하면 글을 내려줄수있다.*/

/*모바일*/
/*@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.메인부분 작업

-html

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

.container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	width: 1140px;
	margin: 0 auto;
	background-color: pink;
}
.column {
	width: 355px;
	background-color: white;
	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;
}

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

}

4.모바일버전 작성 방법 3가지

첫번째.

지금 까지 해왔던 방식으로 styl.css 파일에서 pc버전과 mobile버전 모두를 작성하는 방법
이때 주의할점은 html에 meta name="viewport" content="width=device-width, initial-scale=1.0" 태그를 꼭 넣어주어야한다.

두번째.

mobile.css 파일새로 생성하기.
코드가 너무 길거나 복잡할때는 이렇게 따로 moblie 전용 파일을 만들어주어 사용하는 방법이다.
이때는 html에 style.css와 같이 링크를 연결 시켜주고 사용해야한다.

세번째.

html 에서 style 태그를 이용하여 만들어주기

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

이렇게 style 태그를 이용하여 바로 html파일에서 모바일 버전을 만들어 줄 수 도 있다.

2) 학습내용 중 어려웠던 점 및 해결방법

오늘은 pc버전과 mobile버전을 실습해보았는데, 보는 화면 크기에 따라 이렇게 다르게 표시를 해야하고 더 가독성이 좋도록 디자인을 구성해야하는 것이 어려웠다
작은 화면에서는 어떤 레이아웃이 더 잘어울릴지 구상하고 큰 화면에 포함되었던 정보들을 작은화면에 함축적으로 표현해야하는 것이 조금 어려웠던 것 같다.

3) 학습소감

점점 갈수록 복잡해지는 코드들이 한편으론 뿌듯하고 재밌으면서도 잘 해 낼 수 있을 지에 대한 걱정은 조금 커져가는 것 같다. 그래도 계속 해보다보면 적응하고 코드들도 익숙해져가며 점점 빨라질 수 있지 않을까 기대해본다.