Dev Log #11 - 7월 12일

Juhui_0304·2021년 7월 12일

CSS html 대구AI스쿨

Dev Log

목록 보기

11/49

오늘 학습한 내용

✅ 미디어쿼리를 이용한 메뉴 만들기
✅ 덴마크 쇼핑몰 특정 섹션 레이아웃 작업
✅ 부트스트랩 섹션 레이아웃 작업
✅ 미디어쿼리를 적용하는 방법 3가지

1. 미디어쿼리를 이용한 메뉴 만들기

PC는 X축, 모바일은 Y축 정렬하는 메뉴
참고사이트: https://flexbox.help/

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale:1.0">


	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

</body>
</html>

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

👉 결과물

2. 덴마크 쇼핑몰 특정 섹션 레이아웃 작업

덴마크 쇼핑몰 사이트: https://helbak.com/
pc버전에서는 상단의 내비게이션이 한줄로 출력, mobile버전에서는 내비게이션이 두줄로 출력되는 기능 작업
pc버전에서 스크롤을 내렸을 때 상단이 고정, mobile 버전에서는 상단이 고정되어 있지 않음
pc버전에서 상단이 고정은 position: fixed;를 사용(모바일에서는 해제)
nth-child() 의사 클래스는 형제 사이에서의 순서에 따라 요소를 선택
먼저 나오는 형제가 3차원일 경우에는 그 다음에 나오는 형제의 공간이 먼저 나오는 형제의 뒷쪽으로 들어간다(레이어 겹침현상)
- padding-top을 이용해서 컨텐츠를 밑으로 내리게 한다.
mobile버전에서 상단 고정을 해제하기 위해서 기본 속성인 position: static;을 사용한다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale:1.0">


	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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


</body>
</html>

👉 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;
		flex-direction: column;
		height: 160px;
	}

	.intro h1 {
		width: 100%;
	}

	.intro nav {
		width: 100%;
	}

	main {
		padding-top: 0;
	}

}

👉 결과물

3. 부트스트랩 섹션 레이아웃 작업

참고사이트: https://startbootstrap.com/previews/agency
3x2(pc), 2x3(tablet), 1x6(mobile) 나열
img태그는 기본적으로 공백을 가지고 있다. 그러므로 이를 해결하기 위해서 vertical align: middle;을 디폴트값으로 넣어주어야한다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale:1.0">


	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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



</body>
</html>

👉 css

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

	width: 1140px;
	margin: 0 auto;
	background: 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 0px;
	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가지

1. css안에다가(style.css) 미디어 쿼리 적용: 실무에서 가장 많이 적용

 @media (min-width: 540px) and (max-width: 720px) {
 }

2. 모바일 버전용 파일을 따로 만들기: ex) mobile.css

코드가 너무 길어질 때 사용
style.css ➡️ pc용
mobile.css ➡️ mobile용

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale:1.0">


	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/mobile.css">
</head>
<body>
</body>
</html>

3. 스타일 태그 안에다가 미디어 속성을 이용해서 다이렉트로 속성값을 지정해주는 것

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale:1.0">


	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/mobile.css">
        <style media="(min-width: 300px) and (max-width: 700px)">
		body {
			background-color: red;
		}

	</style>
</head>
<body>
</body>
</html>

👉 결과물

오늘의 학습 후기(어려웠던 점, 개선할 점)

오늘은 그 전에 배웠던 미디어쿼리 이론을 가지고 직접 실습해보는 시간을 가졌다. 확실히 직접 실습을 해보니 더 이해가 잘갔고 미디어쿼리 특징을 더 정확하게 알 수 있었다. 오늘 수업 중 가장 기억에 남는 부분은 덴마크 쇼핑몰의 pc와 mobile에 따라 상단 내비게이션을 고정하고 해제하는 것이고 더 나아가서 nth-child 가상선택자를 이용해서 틀어진 박스의 레이아웃을 수정하고 정렬하는 부분이 인상깊었다. 어려웠던 점은 딱히 없었고 img태그의 공백이 생기는 부분은 vertical-align: middle;을 적용해서 문제를 해결하는 방법과 형제관계에서 처음으로 나오는 형제가 3차원일 경우 뒤에 나오는 형제와 레이아웃이 겹쳐지는 점 등 그전에 배웠던 수업임에도 불구하고 바로바로 생각이 나지 않아서 메모를 통해 기억을 해야겠다는 점을 깨달았다. 이러한 문제점이 생겼을 때 기억을 하고 바로바로 해결할 수 있는 날이 올 때까지 열심히 학습해야겠다🔥

Juhui_0304

하루하루 성장하는 것을 목표로 합니다🌟

이전 포스트

Dev Log #10 - 7월 9일

다음 포스트

Dev Log #11 - 7월 12일

Dev Log

오늘 학습한 내용

1. 미디어쿼리를 이용한 메뉴 만들기

2. 덴마크 쇼핑몰 특정 섹션 레이아웃 작업

3. 부트스트랩 섹션 레이아웃 작업

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

오늘의 학습 후기(어려웠던 점, 개선할 점)

Dev Log #10 - 7월 9일

Dev Log #12 - 7월 13일

0개의 댓글