개발일지_0528

학습한 내용
오늘은 미디어 쿼리에 대해 배워보았다. 미디어 쿼리는 웹사이트를 이용하는 디바이스의 환경에 맞게 맞추어주는 css 코드이다. 그중 반응형, 적응형 웹사이트에 사용되는 미디어 쿼리에 대해 알아보았다. 반응형은 브라우저 사이즈에 따라 끊기며 고정 값으로 크기가 바뀌고, 적응형은 공간을 줄였을 때 자연스럽게 리사이징이 되는데 주로 % 단위를 사용하게 된다고 한다. 최근에는 픽셀과 퍼센티지를 혼합하여 사용을 한다고 한다. 네이버와 같은 사이트는 모바일 사이트의 경우 각각의 html이 존재하여 완전히 다른 레이아웃을 구성한다.
미디어 쿼리를 적용할 때에 보통 width 값으로 디바이스의 환경을 예상하게 된다. pc로 예를 들고 그 안에 컬러와 폰트 사이즈, 백 그라운드 컬러를 넣는다. 미디어 쿼리를 표시할 때는 @media를 입력하고 min-width와 max-width로 분기점을 지정한다. @media의 width 값은 하나가 아닌 여러 개의 @media를 만들어 다양한 크기로 지정이 가능하다. 예제에서는 pc와 태블릿, 모바일 모델을 예로 들어 적용해 보았다.
미디어 쿼리 사용 시 주의할 점은 첫째로 pc와 mobile의 미디어 쿼리는 서로 다르게 지정해 줘야 한다는 것이다. 그렇지 않다면 미디어 쿼리 바깥쪽 컬러(위에 pc로 예를 들은 부분)가 안쪽에도 상속이 된다. 두 번째로 주의할 점은 미디어 쿼리를 사용할 때 html에 새로운 meta태그를 추가해야 한다는 것이다. 메타태그에 네임으로 뷰포인트, 콘텐츠로 위드=디바이스-위드, 비율=1.0을 입력해야 디바이스 비율에 맞게 스케일이 자동으로 맞춰진다.
미디어 쿼리 사용 시에 실무 팁을 배웠다. 웹사이트 작업 시에 모바일과 pc환경에 맞는 텍스트를 적용할 때 두 개의 html 중에 이용하고 있는 디바이스가 아닌 다른 환경에 디바이스 코드는 보이지 않게 해야 하는데, 이때 display:none; 속성을 이용하여 이용하지 않는 디바이스 쪽에 표시해 주면 pc 상에서 모바일 버전은 보이지 않게 된다. 디스플레이 속성을 활용하여 원하는 정보를 원하는 기기에 맞추어 보일 수 있었다.
미디어 쿼리를 사용하여 응용해보았다. h1 태그를 지정해서 미디어 쿼리로 min-width를 지정해 주어 미디어 쿼리 안쪽을 pc, 바깥쪽을 모바일로 작업할 수 있도록 실행해 보았다. 미디어 쿼리 밑에 또 다른 미디어 쿼리를 만들어 min-width를 이전보다 큰 픽셀로 적용해 보았다. 그래서 가장 큰 위드 값을 가진 부분이 pc, 그보다 작은 부분을 태블릿, 미디어 쿼리 바깥 부분을 모바일로 작업할 수 있게끔 설정해 보았다. 웹사이트를 제작할 때는 모바일 버전을 미리 제작하여 다른 디바이스 버전을 추가적으로 더해갈 수 있도록 하는 것이 코드도 줄고 과정도 원활하게 된다.

학습내용 중 어려웠던 점
작은 실수로 모바일에서 화면 노출이 되지 않는 부분이 있어 꽤나 애를 먹었다. 알고 보니 타이핑 오류로 인해서 그런 것이었는데, 한 가지 오류가 진도를 나가는데 굉장히 시간을 많이 잡아먹는다는 점을 다시 인지했다. 같은 실수가 반복되지 않도록 처음부터 작성을 할 때에 문제를 미리서 잡아내야 하겠다.

해결 방법
계속 고민을 하다가 이미지를 캡처해서 문제를 말씀드렸다. 다행히 강사분이 빠르게 문제를 캐치해 주셔서 고쳐서 적용할 수 있었다.

학습 소감
이전에 pc사이트만 지원을 하고 모바일 사이트가 따로 존재하지 않는 사이트를 모바일로 들어갔을 때에 굉장히 불편했던 경험이 있는데, 오늘 배운 미디어 쿼리가 그런 역할을 하는 것을 알게 되어 신기했다. 미디어 쿼리라는 한 카테고리가 많은 내용을 담고 있어 이것을 익히는 데에는 개발자 도구를 활용한 확인이 많이 필요할 것 같다. 각종 사이트에 디바이스 크기에 대한 정보도 알게 되었다.