[배운내용]

미디어쿼리 실습

(1) 메뉴버튼 x축정렬/y축 정렬

• 메뉴버튼이 세개있는 list를 만들어준다.

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

• 기본 pc브라우저에서 가로정렬(x축정렬)되도록 하기
  .media-menu{
  list-style: none;
  margin: 0;
  padding: 0; 디폴트 설정값!
  
  display: flex;
  justify-content: space-between;
  align-items: center;x축정렬을 위해 flex코드를 주고, 양쪽 정렬한다. y축 기준으로 중앙정렬을 위해 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;
  }
  

• 브라우저 크기가 작아졌을 때 세로정렬(y축정렬) 되도록하기

  @media (min-width: 320px) and (max-width: 767px) {
  .media-menu{
  flex-direction: column;
  width: 190px;
  align-items: flex-start;
  }width값을 메뉴의 크기와 같은 190px로 설정하고, y축정렬시 중앙정렬이 되있는데, 왼쪽으로 정렬하기 위해서 flex-start값을 준다.
  
  .media-menu li{
  margin-bottom: 10px;
  }
  
  .media-menu li:last-child {
  margin-bottom: 0;
  }메뉴 사이에 10px의 공간을 주기위해 마진값을 준다. 마지막 메뉴에서는 마진값이 없도록 설정해준다.
  }

(2) HALBAK 쇼핑몰 실습 - 상단영역 고정/비고정

• html코드로 상단 메뉴부분을 설정해준다.

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

• PC화면일 때의 상단메뉴 설정을 한다. 메뉴들의 width는 일정비율에 따라 차지하게 하고, 스크롤을 내려도 상단메뉴가 화면에 고정되도록 지정해야한다.

  .intro{
  display: flex;
  position: fixed;x축 정렬을 위해 flex를 지정하고, pc화면일때 상단메뉴가 스크롤을 내려도 항상 보이도록 하기위해 fixed를 지정해준다.
  
  width: 100%;
  height: 80px;
  background-color: #ffffff;
  }
  
  .intro h1{
  width: 50%;
  height: 80px;
  background-color: black;
  }높이값은 브라우저크기를 줄여도 변하지않게 하기위해 높이값을 같게 설정해주고, width는 크기를 줄일때 항상 같은 비율을 차지하게하기위해 50%로 설정한다.
  
  .intro nav {
  width: 50%;
  height: 80px;
  background-color: yellow;
  }나머지 50%에 자리하게 하기위해 역시 width를 50%로 설정한다.
  
  .intro nav ul{
  list-style: none;
  padding: 0;
  margin: 0;
  }
  
  .intro nav ul li{
  width: 33.3333%;
  height: 80px;
  }3등분으로 나누기위해서는 정확하게 나누어떨어지지않으므로 오차를 가장 적게 하는 수 밖에 없다.
  
  .intro nav ul{
  display: flex;
  }li태그는 기본적으로 y축정렬되므로 x축정렬로 해주기 위해서 flex를 설정한다.
  
  .intro nav ul li:nth-child(1) {
  background-color: aliceblue;
  }
  
  .intro nav ul li:nth-child(2) {
  background-color: skyblue;
  }
  
  .intro nav ul li:nth-child(3) {
  background-color: darkblue;
  }각각의 영역에 대한 배경색을 지정
  
  main {
  width: 100%;
  height: 2000px;
  background-color: gold;
  padding-top: 80px;
  }현재 head태그는 fixed를 사용했기때문에 3차원이고, main태그는 2차원이다. 형제관계일때 먼저있는 태그의 영향을 받기때문에 main은 head의 뒤쪽에 위치하게 되고, main에 어떤 내용을 작성하더라도 head에 의해 가려지기 때문에 head와 같은 height값인 80px을 지정해준다.

• 모바일화면에서는 상단 메뉴가 두줄로 표시되도록 하고, 스크롤을 내리면 상단영역이 따라올라가서 보이지않도록 한다.
  @media(min-width: 320px) and (max-width: 767px){
  .intro{
  position: static;스크롤 올릴때 따라올라가게 하기위해서 기본설정값대로 하기위해 static포지션을 준다. 이때 이전에 설정했던 padding 80px이 빈공간으로 나타나게되기때문에 아래쪽에서 padding값을 없애줘야한다.
  flex-direction: column;
  height: 160px;
  } 두줄로 보이게하기위해서 column정렬이 되도록하고 그 height는 원래 높이의 두배인 160px로 설정한다.
  
  .intro h1{
  width: 100%;
  }
  
  .intro nav{
  width: 100%;
  }
  
  main{
  padding-top: 0;
  }static포지션으로 바꿔줬을 때 이전에 설정했던 padding 80px이 빈공간으로 나타나게되기때문에 아래쪽에서 padding값을 없애줘야한다.
  }

(3) Bootstrap 실습 - 이미지버튼 크기에 따라 정렬바꾸기

• 이미지버튼 하나에 대한 뼈대인 html코드 입력

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

위의 코드를 복사하여 제일 첫번째 div(container)안에 6개의 div(column)을 붙여준다.

• 기본 pc브라우저에서 3*2배열로 정렬하기
  
  .container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  - flex로 x축 정렬.
  - container안의 객체들의 width값이 부모보다 클때, 부모가 자식객체들을 감싸도록, 즉 줄바꿈이 되도록 wrap으로 설정.
  - 객체가 양끝으로 정렬되도록 space-between
  
  width: 1140px;
  margin: 0 auto;
  background-color: pink;
  }margin은 상하는 없게, 좌우는 auto로 설정해서 양쪽 넓이가 같도록 한다.
  
  .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;
  } 이미지영역과 아래 h2태그 사이에 미세한 공간을 없애주기위해서 vertical-align값을 준다.
  
  .image-info{
  padding: 20px 0;
  text-align: center;
  }
  
  .image-info h2{
  margin: 0;
  }
• 중간사이즈의 미디어쿼리 추가하여 2*3배열로 정렬하기
  @media(min-width: 540px) and (max-width: 720px){
  .container{
  width: 720px;
  }브라우저 크기가 720 px부터는 영역의 크기도 720px로 지정하여 크기가 넘어가는 세번째 개체도 줄바꿈되어서 2x3배열로 정렬된다
  
  .column:nth-child(4){
  margin-bottom: 10px;
  }
  }정렬되었을 때 기존설정에서 4번째 child의 경우는 margin-bottom을 0으로 해줬으므로 두번째줄이 된 지금은 margin-bottom에 10px로 설정한다.
• 모바일사이즈의 미디어쿼리 추가하여 1*6배열로 정렬하기
  
  @media (min-width: 320px) and (max-width: 539px){
  .container{
  box-sizing: border-box;
  width: 100%;
  padding: 0 20px;
  }
  
  .column{
  width: 100%;
  }container와 column클래스에 모두 width값을 100%로 지정하여 브라우저가 540px보다 작아졌을 때 너비를 브라우저크기대로 되도록 설정한다
  
  .column:nth-child(4), .column:nth-child(5){
  margin-bottom: 10px;
  }중간사이즈설정할때와 마찬가지로 margin-bottom값이 0으로 설정된 5번째 child에게 10px로 값을 설정한다.
  }

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

• 기존 적용했던 방법처럼 같은 파일 내에 @media를 적용해준다.
• 모바일용 css파일을 새로 만든다. 이때 html의 head에 새로운 css파일의 링크를 걸어주어야한다. 코드가 길어지는 경우에 유용하게 쓸 수 있다.
• head안에 media속성을 가지는 style태그를 설정해서 그 안에 첫번째 방법 처럼 적용될 크기와 스타일값을 설정해준다.

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

이 중에서도 첫번째와 두번째 방법 정도만 기억해 두도록 하자.

[어려웠던 점]

아직 이미지와 텍스트 사이의 미세한 공간이 있다는 점과 같은 기본설정값에 대한 이해가 부족하다는 생각이 든다.
그리고 오늘 세번째 실습에서 div태그 안에 div를 만들어 이미지버튼을 여러개 넣어야했는데, 부모 div태그인 container자체를 여섯개를 만들었더니 실습하면서 계속 잘못 적용되었었다.

[해결방법]

꼼꼼하지 않으면 계속 잊을 수 있는 부분같다. 연습이 답이다.
div가 헷갈렸던 부분은 어떤 영억에 대해 여러 자식태그를 모두 감싸는 큰 부모태그가 하나 있어야한다고 항상 유념하고 임해야 할 것같다.

[학습소감]

오늘 수업 시간은 짧았지만 여러실습을 많이 해서 굉장히 알차게 많은 것을 한 것 같다. 아직은 각 코드가 이 부분에서 왜 들어갔는지, 다음에 복습할때 보면 헷갈릴 것 같아서 오늘 개발일지처럼 꼼꼼하게 설명을 달아두어야할 것같다..