210712 개발일지

1) 학습한 내용

- 미디어쿼리를 이용해 pc는 x축 정렬, 모바일 y축정렬된 메뉴버튼 제작

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

---

- 덴마크쇼핑몰 레이아웃 구조

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

.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 li {
	width: 33.3333%;
	height: 80px}

.intro nav ul
	{display: flex;}

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

---

- 각 단계별로 레이아웃이 변경되는 미디어 쿼리 실습

<div class="container">
<div class="column">
<img src="http://via.placeholder.com/250x150">
<div class="image-info">
<h2>Tittle</h2>
</div>
</div>

<div class="column">
<img src="http://via.placeholder.com/250x150">
<div class="image-info">
<h2>Tittle</h2>
</div>
</div>

<div class="column">
<img src="http://via.placeholder.com/250x150">
<div class="image-info">
<h2>Tittle</h2>
</div>
</div>

<div class="column">
<img src="http://via.placeholder.com/250x150">
<div class="image-info">
<h2>Tittle</h2>
</div>
</div>

<div class="column">
<img src="http://via.placeholder.com/250x150">
<div class="image-info">
<h2>Tittle</h2>
</div>
</div>

<div class="column">
<img src="http://via.placeholder.com/250x150">
<div class="image-info">
<h2>Tittle</h2>
</div>
</div>		
</div>

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

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

---

- 미디어쿼리 적용하는 3가지방법

1. css파일안에다 미디어쿼리를 적용하는 방식

@media (min-width: 320px) and (max-width: 539px) {}

2. 모바일용/PC용 따로 작업

<link rel="stylesheet" type="text/css" href="css/mobile.css">
    
@media () {}

3. 스타일 태그사용해서 미더어 속성 넣어서 모바일버전에 대응하는 방식

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

2)학습한 내용 중 어려웠던 점 또는 해결못한 것들

어렵거나 한 부분은 딱히 없었다
아직 안익숙해서 조금 버벅이는거 말곤 없었다.

3)해결방법 작성

강의를 열심히 들어가면 될거같다. 반복해서 보고

4)학습 소감

7월 2째주도 벌써 시작됐고 열심히 들어야지라는 생각이 든다