210916 개발기록: 미디어쿼리 , 반응형

 

📌  미디어 쿼리

사이드 프로젝트 퍼블리싱이 젤 힘들다. 아니 사실 배포

A
@media (max-width: 900px) {
	B
} @media (max-width: 600px) {
	C
}

max-width : 900px 이란, 

가로 px 이 900 보다 작으면 B의 css 가 적용되고, 900 보다 크면 A 의 css 가 적용된다.

즉, 일반적으로 A 의 코드가 적용되지만, 900px 보다 작은 크기에선 B 의 코드가 적용된다.

 

또한 max-width 는 데스크탑 우선 적용이라, 미디어 쿼리의 분기가 큰 순서대로 적용된다.

어떻게 보면 A 의 코드는 900px 보다 높은 px 크기 이기에  적용되는 것이다.

 

 

📗  overflow-x: hidden

overflow 속성은 컨텐츠 요소의 크기가 박스보다 긴 상황에서 선택할 수 있는 속성이다.

overflow-x 는 가로 축을 기준으로, 즉 왼쪽-오른쪽으로 요소의 길이를 보여준다.

• visible (기본값) : default 값으로, 박스를 넘어가는 요소가 있으면 넘친 채로 보여준다. x 축을 기준으로 스크롤이 생기는 상황이다.
• hidden : 박스를 넘치는 요소가 있다면, 넘친 부분은 보여주지 않는다. 즉 x 축 스크롤이 사라진다.
• scroll, auto: 요소가 넘치면 스크롤이 나타난다. 둘의 차이는, scroll은 항상 스크롤이 존재한다는 점이고, auto 는 내용이 넘칠 때만 스크롤이 나타난다는 점이다.

html,
body {
    width: 100%;
    overflow-x: hidden;
}

 

모바일 상황에서 오른쪽 끝과 아래쪽 끝에 공백이 나타났는데 

이를 없애기 위해 위 코드를 적용했다.