STUDY

기본적으로 두 방법 모두 웹사이트가 다양한 크기의 화면과 모바일 기기에서 더 나은 사용자 경험을 제공하기 위한 방법이지만 설계와 구현에 차이가 있다. 1. 반응형 웹(Responsive Web) 미디어 쿼리를 사용해 화면 크기를 확인하고 flex, grid 등을 활용해 화면 크기 변화에 따라 페이지 크기 및 레이아웃을 조절한다. 글자 크기 자동 조정은 em, 이미지 크기는 % 사용해 구현한다. 하나의 템플릿을 사용하여 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하지만 이미 PC용이나 모바일용으로 웹사이트가 구축되어 있을 경우, 사이트를 재구축해야한다. 또한 사용자는 모든 기기에 대한 css를 다운 받아야 하므로 로딩 시간 증가 및 데이터 낭비라는 단점을 가진다. 2. 적응형 웹(Adaptive W..

IE에서 slick slider 체크 시 overflow: hidden 이 적용되지 않아서 slider 의 모든 요소들이 펼쳐져 보이는 경우가 있었음 IE 11에서는 css3 transform을 적용한 엘리먼트가 부모의 overflow:hidden을 무시하는 현상이 있다고 함 transform 속성을 적용한 엘리먼트에 opacity: 0.99 를 주면 해결됨 https://medium.com/@laziel/windows-8-1-ie-11-%EC%97%90%EC%84%9C-overflow-hidden-%EC%9D%B4-%EB%AC%B4%EC%8B%9C%EB%90%98%EB%8A%94-%EC%96%B4%EB%96%A4-%EA%B2%BD%EC%9A%B0-f322fd5908ae Windows 8.1 IE 11 ..

padding-top 50% - 2:1 padding-top 200% - 1:2 padding-top 75% - 4:3 360 width 720 width 참고 https://happyer16.tistory.com/entry/%EA%B0%80%EB%A1%9C%EC%84%B8%EB%A1%9C-%EB%B9%84%EC%9C%A8-%EC%9C%A0%EC%A7%80%ED%95%98%EB%8A%94-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B0%95%EC%8A%A4 가로세로 비율 유지하는 반응형 박스 반응형 웹디자인에서는 .wrap { max-width: 100%; width: 100%; } 를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법을 많이 사용한다. 이 때 높이는 ..