개발일지 210712

이동섭·2021년 7월 12일
0

대구AI스쿨 개발일지

목록 보기
11/48

11일차 요약

학습 내용

실습 내용 / 결과물 출력 첨부

미디어쿼리 실습

메뉴버튼 만들기

미디어쿼리 설정에 따라 가로, 세로로 배열이 달라지는 메뉴버튼 만들기.

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(1) : 가로 메뉴, 기본형

.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;
}
  1. ul, a 태그의 기본속성값 제거
  2. li에 속성값 부여
  3. ul태그에서 display:flex를 사용해 가로로 배치
  • padding : 5px 15px 와 같이 값을 넣으면 상하 5px 좌우 15px 가 적용됨


CSS(2) : 세로 메뉴, 미디어쿼리

@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;
	}
}
  1. 미디어쿼리 기준 설정
  2. ul태그의 정렬을 세로로 바꿈
    • flex-direction: column 세로정렬
    • align-items: flex-start 메뉴 위치 브라우저 시작점인 좌상단
  3. 레이아웃 다듬기
    • ul태그의 영역을 190px로 ( li태그의 영역 + 마진 + 태두리 값의 합)
    • li태그에 margin-bottom 값
    • li태그에 대한 가상선택자로 마지막 항목 margin-bottom 값 0

결과출력

가로

세로

https://helbak.com/ 사이트의 상단메뉴 카피

pc버전에서는 제목과 메뉴네비게이션이 한줄로 정렬 및 항시 상단 고정, 모바일 버전에서는 두줄로 정렬 및 스크롤됨

html

<header class="intro">
		<h1>LOGO</h1>
		<nav>
			<ul>
				<li>menu 1</li>
				<li>menu 2</li>
				<li>menu 3</li>
			</ul>
		</nav>
	</header>
	<main role="main">
		Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>Scroll<br>
</main>

CSS(1) : PC버전

.intro {
	display: flex;
	position: fixed;
	width: 100%;
	height: 80px;
	background: #ffffff;
}
.intro h1 {
	width: 50%;
	height: 80px;
	background-color: black;
}
.intro nav {
	width: 50%;
	height: 80px;
	background-color: yellow;
}
.intro ul {
	display: flex;
	list-style: none;
}
.intro li {
	width: 33.3333%;
	height: 80px;
}
.intro li:nth-child(1) {
	background-color: blue;
}
.intro li:nth-child(2) {
	background-color: gray;
}
.intro li:nth-child(3) {
	background-color: green;
}
main {
	width: 100%;
	height: 2000px;
	background-color: gold;
	padding-top: 80px;
}
  1. header와 main영역 생성
    • header영역이 스크롤 시 움직이지 않도록 position: fixed 지정
    • main 태그에는 'role='을 사용해준다.
  2. header 영역 레이아웃
    • h1과 nav태그의 폭을 각각 50%로 지정해 2분할
    • ul태그를 flex로 정렬
    • li태그의 폭을 33.3333%로 3분할
    • 가상선택자를 통해 각각 특징 부여
  3. mian 영역 레이아웃
    • header 태그의 fixed는 3차원 속성이므로 태그의 영역만큼 main의 영역이 겹치게 되므로 padding-top을 통해 해결

CSS(2) : 모바일 버전

@media (min-width: 320px) and (max-width: 767px) {
	.intro {
		flex-direction: column;
		position: static;
		height: 160px;
	}
	.intro h1 {
		width: 100%;
	}
	.intro nav {
		width: 100%;
	}
	main {
		padding-top: 0;
	}
}

만큼 미디어쿼리 작업을 추가해준다.

  1. header
    • column 적용으로 h1과 nav 세로정렬, 이들의 높이값을 고려하여 160px로 설정
    • 스크롤 가능하도록 position을 static으로 변경
  2. h1, nav의 폭을 100%로 변경
  3. header의 포지션 변경에 따라 필요없어진 main의 padding 값을 제거

결과출력

pc ver

모바일 ver

https://startbootstrap.com/ 카피, 분기점이 여러개인 미디어쿼리 작업

6개의 영역을 3x2 , 2x3, 1x6으로 표현해보기
임의로 pc 태블릿 모바일 버전으로 지칭

html

		<div class="container">
			<div class="column">
				<img src="https://via.placeholder.com/250x150">
				<div class="img-info">
					<h2>Title</h2>
				</div>
			</div>
			<div class="column">
				<img src="https://via.placeholder.com/250x150">
				<div class="img-info">
					<h2>Title</h2>
				</div>
			</div>
			<div class="column">
				<img src="https://via.placeholder.com/250x150">
				<div class="img-info">
					<h2>Title</h2>
				</div>
			</div>
			<div class="column">
				<img src="https://via.placeholder.com/250x150">
				<div class="img-info">
					<h2>Title</h2>
				</div>
			</div>
			<div class="column">
				<img src="https://via.placeholder.com/250x150">
				<div class="img-info">
					<h2>Title</h2>
				</div>
			</div>
			<div class="column">
				<img src="https://via.placeholder.com/250x150">
				<div class="img-info">
					<h2>Title</h2>
				</div>
			</div>
		</div>
  • 각 칼럼이 들어갈 영역 만들기
  • 각 칼럼의 구조를 이미지와 이미지의 제목으로 구성

CSS(1) pc ver

.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;
}
.img-info {
	text-align: center;
	padding : 20px 0;
}
.img-info h2 {
	margin: 0;
}
  1. 칼럼이 들어갈 영역 레이아웃(컨테이너)
    • flex로 정렬
    • flex-wrap : wrap 로 컨테이너 영역을 넘는 칼럼(아이템)들을 줄바꿈
    • margin: 0 auto로 브라우저 비율에맞게 가운데 정렬
  2. 칼럼 레이아웃(아이템)
    • 3x2로 정렬하기위해 컨테이너의 영역값을 고려해 폭 설정
    • 가상선택자로 마지막 행 마진바텀 0
  3. 기타
    • img에 vertical-align: middle로 하단공백 제거
    • h2의 디폴트 margin 제거

CSS(2) : 미디어쿼리 적용

@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 {
		width: 100%;
	}
	.column {
		width: 100%	;
	}
	.column:nth-child(4),
	.column:nth-child(5) {
		margin-bottom: 10px;
	}
}
  1. 테블릿 ver
    • 2x3이 되도록 칼럼들의 값을 고려해 폭 설정
    • margin bottom 조절
  2. 모바일 ver
    • 설정한 미디어쿼리 범위 안에서는 폭의 값을 브라우저크기의 100%로 조절해 칼럼이 1열로 정렬되게 설정

결과출력



미디어쿼리 적용의 여러 방법

  1. 지금까지의 실습과 같이 css파일 하나에 미디어쿼리 적용
  2. 각 버전(ex- pc, 모바일)의 css파일을 따로 생성. 디폴트 버전의 작업 후 나머지 버전에대한 미디어쿼리만 작성
  3. 헤드 태그 안에 아래와 같이 작성후 적용받을 태그와 속성을 닫는 태그 안쪽에 넣어줌.
    <style media="">

추가 학습


ARIA role를 키워드로 검색한 내용이 공부가 되었음.

미해결 - 솔루션

x

질문거리

x

학습 소감

실제로 적용할 코드가 많아질수록 미디어쿼리에서 예기치 못한 상황이 많이 발생할 것 같다. 각 요소들의 속성을 차차 심층적으로 알아가야 할 듯.

profile
이동섭
responsibility
이전 포스트

개발일지 210709

다음 포스트

개발일지 210713

0개의 댓글

관련 채용 정보