Day 11 - 미디어 쿼리 실습

SUN·2021년 7월 12일

학습 내용

PC버전에서는 X축 정렬/ 모바일 버전에서는 Y축 정렬하기

HTML

	<ul class="media-menu">
	<li><a href="#">menu1</li>
	<li><a href="#">menu2</li>
	<li><a href="#">menu3</li>
	</ul>

CSS

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

display: flex;
x축으로 정렬하기 위해 명령

justify-content: space-between; 
700px 내 동일한 간격으로 배열을 가지게 한다.

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;}}
    앞서 각각 바닥에 마진을 10을 주었고 마지막 항목에는 이를 적용하지 않음

helbak.com 메인화면 만들기

html

<main role="main">
	<h1>hellow world hellow world hellow world hellow world v hellow world hellow world hellow world hellow world hellow world hellow world hellow world hellow world hellow world hellow world hellow world hellow world hellow world </h1>
	
</main>

main은 익스플로러에서 지원하지 않기 때문에 role="main"을 부과해야한다.

CSS

.intro {
display: flex;
position: fixed;

- 디스플레이 flex를 주어 ul과 nav를 x축으로 배열
- 포지션 fixed로 스크롤을 내려도 header부분은 항상 보이게 유지

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 {
display: flex;

- ul에 디스플레이 flex를 주어 하위 항목들이 x축으로 정렬되게 만들기

list-style: none;
margin: 0;
padding: 0;}


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

- 넒이를 3등분으로 나눔

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

- nth-child를 통해 각 li의 색을 지정


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

padding-top: 80px;}

- 패딩 탑을 주어 3차원인 intro에 2차원인 main이 겹치는 부분을 화면에 보일 수 있게 해줌

@media (min-width: 320px) and (max-width: 767px) {
.intro {
	position: static;
    -fixed로 지정된 intro를 해제함

	flex-direction: column;
	height: 160px;}
    - x축으로 정렬되게 한 항목들을 y축으로 바꿈

.intro h1 {
	width: 100%;
}

.intro nav {
	width: 100%;
}

-y축으로 정렬될 수 있도록 넓이 설정

main {
	padding-top: 0;
}}

https://startbootstrap.com/previews/agency의 PC, 모바일 버전 만들기

html

<div class="container">
	<div class="column">
		<img src="https://via.placeholder.com/250px*150px">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250px*150px">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250px*150px">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250px*150px">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250px*150px">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
	<div class="column">
		<img src="https://via.placeholder.com/250px*150px">
		<div class="image-info">
			<h2>Title</h2>
		</div>
	</div>
</div>

CSS

.container {
display: flex;
- X축으로 정렬

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: 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: 800px) {
.container{
	width: 720px;}
    - 전체 크기를 720으로 주어 자동으로 초과되는 부분의 줄바꿈을 유도한다.

.column:nth-child(4){
	margin-bottom: 10px; }}
    -크기가 줄어 한칸 내려올 때 4번째 사진의 아래 마진이 없어 이상해진다.


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

	padding: 0 20px;
   
   - 각 박스 주변에 여백을 주고 공간을 낸다.

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

.column{
	width: 100%;}}

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

1. CSS 파일 안쪽에 @media 쿼리를 적용

- 실무에서 가장 많이 사용

2. 모바일 버전 파일을 따로 제작

- mobile.css 등 새 파일을 만들고 html에 링크를 부여

3. style 태그를 사용

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

학습 중 어려웠던 점

아직 미디어 쿼리에서의 변화를 자유자재로 다루지 못하고 있다.

해결방안

실전 연습을 통해서 연습하고 부족한 부분을 복습해야겠다.

학습 소감

학습을 한 결과가 그럴듯한 모양으로 나오는 것이 신기하다.

SUN

안녕하세요!

이전 포스트

Day 10 - 미디어쿼리 기초, 실무팁, 유용한 사이트

다음 포스트