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

박강산·2021년 7월 12일
0

대구AI스쿨 - 개발일지

목록 보기
11/44

학습한 내용

미디어쿼리 실습 - 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를 만들어보았음, 초반에 개념으로만 배웠던 반응형, 적응형 레이아웃을 직접 만들어보니 감회가 새로웠음.
    초반엔 레이아웃이 별개로 존재하는 것인지 알고 있었지만, 지금은 조건을 설정하여 하나하나 속성을 추가해가며, 조건 성립 시 속성이 적용된다는 것을 깨닫게 되었음.
profile
박강산
안녕하세요. 맡은 업무를 확실하게 수행하는 웹 개발자가 되기 위하여 끊임없이 학습에 정진하겠습니다.
이전 포스트

Dev log - 10, 미디어쿼리 #1

다음 포스트

Dev log - 12, 키즈가오 카피캣 실습 #1

0개의 댓글