학습한 내용

• 미디어쿼리를 사용한 실습

1. 기기 종류에 변화하는 메뉴정렬

• pc환경에서는 x축 정렬, mobile환경에서는 y축 정렬
  • 미디어쿼리를 사용하여 모바일 환경에 맞는 범위를 지정한 뒤 y축 정렬

2. 기기 종류에 변화하는 쇼핑몰 상단 메뉴(https://helbak.com/)

• PC환경
  
• Mobile환경
  
• 참고할 사항
  • pc화면에서는 스크롤 이동시 메뉴 상단 고정
  • mobile화면에서는 스크롤 이동시 상단 고정X

• pc화면 메뉴의 상단 고정을 위하여 fixed 포지션값을 사용한다.
• 미디어쿼리를 사용하여 mobile화면 전환 시 원래값인 static상태를 적용.
• 상단의 메뉴 분할은 %를 사용하여 균등하게 분배할 수 있다.
• 본문의 main태그는 익스플로어에서는 지원하지 않으므로 role='main' 속성을 이용하여야 한다.
• pc화면에서 3차원 속성(fixed)을 가진 header태그와 2차원 속성을 가진 main태그는 겹침 현상이 일어난다.
  • 형제관계에 있는 태그들에서 앞서나온 태그의 값이 위와 같은 경우에서는 겹침현상이 일어나 본문의 내용이 header태그의 높이 값 만큼 가려지게 되므로 수정이 필요하다.
  • 마찬가지로 mobile환경으로 전환 시 앞서 부여한 값을 제거하여 공백을 제거하자.

3. 여러 분기점과 flex-wrap속성을 이용한 정렬(https://startbootstrap.com/previews/agency)

• 참고할 사항
  • 위 이미지를 보았을때 최종 이미지까지 최소 2개의 분기점이 필요하다.
  • 화면이 줄어들수록 내부 이미지의 정렬이 y축으로 바뀌게 된다.

• flex-wrap속성
  • 나열된 오브젝트들의 크기가 부모의 크기보다 큰 값을 가질때, 다음 줄로 넘어가 나열되게 한다.
  • 위와 같은 이미지를 만들기 위해서는 각 이미지의 크기와 분기점의 범위를 적절히 지정하여 화면이 줄어듬에 따라 이미지의 나열이 최종적으로는 한줄로 y축 정렬이 되게 적용 시킨다.

4. 미디어쿼리의 적용방법

• CSS파일에 @media (min-width) and (max-width) 코드 기입
• mobile버전용 CSS파일 따로 만들기
  • 사용되는 코드가 너무 많아 유지 보수에 신경을 써야한다면 추천
  • html파일에 각각의 환경에 맞는 링크를 걸어주자
• html파일에 style태그 사용법

어려웠던 부분

• flex-wrap속성을 사용했던 실습부분에서 이 개념을 생각하지 못했던 부분

해결방법

• https://flexbox.help/ 참고 사이트를 이용해서 오브젝트를 정렬할때의 여러 예시를 살펴보고 적용할 수 있도록 해야겠다.

소감

• 코드분량을 최소한으로 유지하면서 원하는 작업결과를 얻어낼 수 있는 것이 중요한 것 같다.