오늘의 강의 내용

1.메뉴버튼 만들기. pc버전에서는 x축으로, mobile버전에서는 y축으로 정렬

pc버전 x축 정렬

mobile버전 y축 정렬

<!-- 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언어 -->
.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;         //마지막문단 밑단 0
	}
}

2.pc버전일때는 상단메뉴 네비게이션 부분이 한줄로, mobile버전일때는 두줄로 나타나기

pc버전일때 한줄로 나타나는 상단메뉴 예제

mobile버전일때 두줄로 나타나는 상단메뉴 예제

pc버전일때 한줄로 나타나는 상단메뉴

mobile버전일때 두줄로 나타나는 상단메뉴

<!-- 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 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 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 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 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 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 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;   //pc버전일때 상단고정 해제
		flex-direction: column;
		height: 160px;
	}

	.intro h1 {
		width: 100%;
	}

	.intro nav {
		width: 100%;
	}

	main {
		padding-top: 0;
	}
}

• pc버전일때는 상단메뉴가 고정fixed, mobile버전일때는 비고정fixed해제

• 3등분을 할때 값이 정확히 떨어지지 않기 때문에 33.3333%를 사용한다. 즉 오차를 굉장히 작게 만드는 수 밖에 없다.

• main태그는 익스폴로러가 지원하지 않기 때문에 role속성과 속성값을 넣어줘야 한다.

• header 태그는 fixed를 사용하여 3차원이 되고, main은 아무것도 사용하지 않았기 때문에 먼저 쓴 header의 3차원을 따른다.

3.pc버전, tablet버전, mobile버전 화면 분기점 만들기

pc버전일때의 화면 예제

tablet버전일때의 화면 예제

mobile버전일때의 화면 예제

pc버전일때의 화면

tablet버전일때의 화면

mobile버전일때의 화면

<!-- 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: #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;
	}
}

• flex-wrap: wrap 자동 줄바꿈

• justify-content: space-between 동일한 공백 부여

4.미디어쿼리를 적용하는 방법 3가지
ex)

<!-- css언어 -->
@media (min-width: 320px) and (max-width: 539px)

천번째 css파일 안쪽에다 미디어쿼리 라는 위 코드를 기입하는방법. 실무에서 가장 많이 사용된다.

두번째 아예 mobile 버전의 파일을 만드는법

위 이미지 처럼 mobile 버전의 파일 안에 미디어쿼리 소스코드를
작성한후

html에 link태그를 이용하여 연동시켜 주어 사용한다.

만약 작업하는중 코드분량이 너무 많아지면 따로 사용하는것이 유지,보수를 위해서도 좋다.

세번째 style태그를 사용하여 style태그안쪽에 media태그를 사용 width값을 주는방법

위 이미지 처럼 작성하면 @media를 이용한 결과와 똑같은 결과를 얻을수 있다.
첫번째, 두번째 방법정도만 기억해두어도 문제없다.

강의를 마친 후 소감

이번 강의는 저번 강의 의 연장선으로서 좀더 세밀한 미디어쿼리 작업을 알게되었다. 그치만 아직도 어려운것보다는 헷갈리는 부분이 많아 반볻작업, 연습이 많이 필요해보인다.