07.12 미디어쿼리

실습 코드 깃허브 링크

---

학습내용

flex로 정렬한 메뉴들이다. 전체 width값만 지정하고 flex로 지정하면 일정한 간격으로
배열해준다.

flex와 미디어쿼리를 함께 적용해본 모습.

    display: flex; 
    justify-content: space-between; 일정한 간격으로 배열해준다.
    align-items: center; 가운데로 배치

@media (min-width: 320px) and (max-width: 767px) {
	.media-menu {
		flex-direction: column;
		width: 190px;
		align-items: flex-start;
	}
	.media-menu>li {
		margin-bottom: 10px;
	}
	.media-menu li:last-child {
		margin-bottom: 0;
	}
}

@media > 최소크기와 최대크기 설정 > 브라우저를 줄였을 때의 요소들을 설정한다.
flex-direction : column > 미디어쿼리로 지정한 크기가 되었을 때 요소들을 세로로 배치해준다.

부트스트랩 홈페이지 레이아웃 참조하여 미디어쿼리 코드를 적용해보았다.
컨테이너 div에 flex를 적용하였기 때문에 저절로 일정한 간격으로 정렬을 해주어서 간격의 크기를 내가 신경쓰지 않아도 되서 편리하다. 또한 미디어쿼리를 사용할때도 flex-wrap : wrap으로 속성값을 입력하면 창의 크기에 따라 줄바뀜이 저절로 된다는 점이 신기했다.

/*bootstrap agency*/
.container {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   width: 1140px;
   margin: 0 auto;
   background-color: pink;
}

---

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

1.@media 쿼리 코드 - 실무에서 가장 많이 사용

2.모바일 파일을 따로 작성한다. pc버전, 모바일버전

3.스타일태그 사용 (html안에 직접적으로 코딩)
ex

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

---

학습소감

• 새롭게 알게된 점 : flex속성을 사용하면 요소가 일정한 간격으로 저절로 배열된다는 것은 알았지만, 줄바뀜까지 쉽게 바꿀 수 있다는 것은 처음 알았다. 전체적인 요소의 배치를 화면 크기가 바뀔때마다 수정해야한다고 알고 있었는데, 너무나도 흥미롭고 새로운 사실이었다.
• 어려웠던 점 & 해결방법 : 강의를 따라가는 도중에 CSS코드가 먹히지 않아서 당황했다. 캐쉬나 쿠키를 아무리 지워봐도 수정된 css가 먹히지않아서 링크를 확인하니 html에 css 파일이 링크되지 않은 점을 발견하고 수정하였다.