Dev log - 11, 미디어쿼리 #2

학습한 내용

미디어쿼리 실습 - 1

HTML 문서

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

CSS 문서

html, body, h1 {
	margin: 0;
	padding: 0;
}

.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 (덴마크 쇼핑몰 상단 UI)

  • 크기를 3등분 할 때에는 최대한 오차를 적게, 33.3333% 설정
  • 형제 태그 간 레이아웃 겹침 현상 발생 시, padding 을 이용해서 간격을 띄움

HTML 문서

<body>
	<header class="intro">
		<h1></h1>
		<nav>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</nav>
	</header>

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

CSS 문서

html, body, h1 {
	margin: 0;
	padding: 0;
}

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

  • 모바일 버전, position 값과 padding 값 제거

HTML 문서

<body>
	<header class="intro">
		<h1></h1>
		<nav>
			<ul>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</nav>
	</header>

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

CSS 문서

html, body, h1 {
	margin: 0;
	padding: 0;
}

.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 (부트스트랩 에이전시 UI)

  • margin-bottom 을 사용할 때는, 브라우저 크기 변경 시 틀의 변형이 있는지 확인하고, 원래 값으로 설정해주어야 함

HTML 문서

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

CSS 문서

html, body, h1 {
	margin: 0;
	padding: 0;
}

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

미디어 쿼리를 적용하는 방법들

  • CSS 파일에서 @media 코드를 기입하는 방법 - 실무에서 가장 많이 사용

  • 모바일 버전 전용 파일을 따로 만드는 방법 - 새로운 CSS 파일에 @media 코드를 설정하고, link 태그로 연동시킴 (코드 분량이 많을 때 관리하기 용이함)

  • style 태그 안에 media 속성을 넣어서 적용하는 방법

HTML 문서

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

<body>
</body>

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

  • 레이아웃 겹침 현상을 padding 으로 해결하는 것.
  • 레이아웃 margin-bottom 사용에 대해 복습 필요.

해결방법

  • 레이아웃 겹침 현상은 처음 형제 태그가 3차원 속성을 지녔을 때 겹침 현상이 일어나므로, 여백을 만들어 준다는 개념으로 다시 재복습 하였음.

  • 레이아웃에는 선천적 공백이 존재하기 때문에, 끝 레이아웃에서는 bottom 영역을 0으로 설정해주는 것이고, 레이아웃 변형이 일어나면 순서가 바뀌기 때문에 되돌려준다는 개념으로 재복습 하였음.

학습 소감

  • 저번 회차에서 배웠던 개념을 토대로 예시 UI와 실제 웹사이트 UI를 만들어보았음, 초반에 개념으로만 배웠던 반응형, 적응형 레이아웃을 직접 만들어보니 감회가 새로웠음.
    초반엔 레이아웃이 별개로 존재하는 것인지 알고 있었지만, 지금은 조건을 설정하여 하나하나 속성을 추가해가며, 조건 성립 시 속성이 적용된다는 것을 깨닫게 되었음.
JavaScript 입문 15일차
CSS 속성 - box-sizing

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage