본문 바로가기

뷰포트2

사라지고 나타나고~ : 미디어쿼리 뷰포트가 800px 이하일 때, ad-area, header, main, footer가 다 사라지고 article만 남게 하려면? chatGTP 이렇게 작성하세요. /* 뷰포트의 가로 너비가 800픽셀 이상일 때 .ad-area 요소를 보이게 하고, 800픽셀 이하일 때 .header, main, footer를 숨깁니다. */ @media (max-width: 800px) { .ad-area { display: none; } .header, .main, .footer { display: none; } } 왜 이렇게 안 쓰지? @media (max-width: 800px) { .ad-area, .header, .main, .footer { display: none; } chatGTP 예, 그렇게 쓰면 됩니.. 2023. 7. 24.
뷰포트와 브라우저 창의 크기 chatGTP 뷰포트(Viewport)란 웹 페이지를 브라우저에서 실제로 보여지는 영역을 의미합니다. 뷰포트는 사용자가 웹 페이지를 스크롤하거나 확대/축소하는 등의 동작을 할 때 보여지는 영역을 말합니다. 일반적으로 뷰포트는 브라우저 창의 크기와 관련이 있습니다. 웹 페이지를 처음 로드할 때 뷰포트의 크기는 브라우저 창의 크기와 동일합니다. 하지만 사용자가 화면을 확대하거나 축소하거나, 스크롤을 하면 뷰포트의 크기가 변할 수 있습니다. 모바일 기기에서는 뷰포트의 개념이 더 중요합니다. 모바일 기기의 뷰포트는 모바일 화면의 크기를 의미하며, 데스크톱 브라우저보다는 작을 수 있습니다. 모바일 뷰포트의 크기는 웹 페이지가 모바일 화면에 잘 맞도록 반응형 디자인을 적용하거나 모바일 화면에 맞게 레이아웃을 조정하.. 2023. 7. 23.