[React] 반응형 웹 만들기 media query

레퍼런스 사이트: 구글링해서 발견한 예쁜 반응형 웹

완성 화면

---

🖥 media query

공식문서

미디어 장치의 유형을 특정하고(print / screen), 장치의 특성 또는 수치 (화면 해상도/ 화면 크기) 등에 따른 CSS를 적용할 때 유용하다.

  //최상위에 작성하거나
@media screen {
  body { font-size: 13px; }
}
  //아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있다.

접근성 고려사항

글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의 자리에는 em을 사용하는게 좋습니다.
em과 px 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 em이 더 자연스럽게 동작합니다. -공식문서

나는 화면 width에 따른 글자 크기, footer 위치를 조절하기 위해 사용했다.

const BREAK_POINT_TABLET = 768;
const BREAK_POINT_PC = 1200;
  
  
// 태블릿 : 1200px ~ 768px :: 768px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_TABLET}px) {...}
  
  // PC : 1200px 이상 :: 1200px 이상 적용되는 css
  @media only screen and (min-width: ${BREAK_POINT_PC}px) {...}

---

1. iframe 태그로 유튜브 비디오 가져오기

react-youtube API로 가져오는 방법도 있지만 나는 아직 iframe 태그를 사용해본 적이 없어서 이번 기회에 사용해보았다.

<Iframe src='비디오링크?autoplay=1&mute=1&start=20&controls=0&modestbranding=1' frameBorder='0' allowFullScreen></Iframe>

링크의 쿼리 파라미터로 동영상 재생 설정을 할 수 있다.

• 자동 재생 설정
  autoplay=1&mute=1
  크롬은 뮤트를 설정해야 자동재생이 허용된다.

• 시작 시간 설정
  &start=20

• 컨트롤 바 표시 여부
  controls=0

• 컨트롤 바에 유튜브 로고 표시 여부
  modestbranding=1

그외의 파라미터 보러가기

2. CSS 속성

letter-spacing: 자간 설정

z-index: 큰 값을 가진 요소가 작은 값을 가진 요소 위를 덮는다.

z-index:1 //요소 1개만 1로 주고, 나머지는 z-index 속성값을 주지 않음으로 해당 요소를 최상위에 올렸다.

position: relative: 다른 요소에 영향을 주지 않으면서 자기 자신을 기준으로 위치를 지정한다.

position: absolute: 요소가 일반적인 배치 흐름에서 벗어나고, 부모 요소를 기준으로 위치를 지정한다.

position: fixed: 브라우저 전체화면(viewport)기준으로 위치를 지정해서 화면상에 위치가 고정된다.

3. 목록 최상위로 이동하는 버튼 이벤트 핸들러

onClick={()=> window.scrollTo(0,0)}