사이트 제작부터 반응형 적용까지 해보자:9
지금까지 배운 헤더, 배너, 슬라이드, ... 등의 타입들을 조합하여 반응형 사이트를 만들어봅시다.
✔︎ 결과 확인하기
#header
💡 햄버거 메뉴를 사용해주었습니다.
화면 크기 1300px부터는 헤더 메뉴를 보이지 않게 처리하고 햄버거 메뉴로 대신하게 만들었습니다.
* 햄버거 메뉴 : 주로 앱 상단 모퉁이에 위치하며, 메뉴를 토글하거나 네비게이션 바의 역할을 합니다.
⚠ 햄버거 메뉴를 열었을 때 스크롤이 생기는 현상을 막아주었습니다.
script로 햄버거 메뉴를 클릭했을 때, body에 class="fixed"를 추가시켜 해결해주었습니다.
⚠ 햄버거 메뉴를 열어놓은 상태에서 화면크기를 최대로 키웠다가 다시 줄였을 때 메뉴가 다시 닫히는게 아닌 열려 있는 현상을 막아주었습니다.
script로 화면 크기가 설정해둔 크기 이상이 되었을 때, fixed와 active를 제거해 초기화하여 해결해주었습니다.
#slider
💡 제목에 blind 효과를 사용하여 보이지 않도록 해주었습니다.
웹 접근성을 고려하여 화면상 보이지는 않지만 스크린 리더기에는 읽히도록 설정해줍니다.
💡 Swiper을 사용하여 슬라이드 효과를 적용해주었습니다.
홈페이지에서 코드를 가져와 기능을 구현하고 만드려는 사이트에 맞게 css에서 디자인을 만들어줍니다.
* Swiper : 슬라이드, 스와이프 기능을 사용할 때 비교적 손쉽게 구현할 수 있는 라이브러리
💡 슬라이드 내 화살표, 점, 플레이 표시 등은 이미지 스프라이트 기법을 사용해 만들어주었습니다.
#image
💡 이미지에 마우스 오버 효과를 주었습니다.
이미지에 마우스를 올리면 더보기가 뜨며, 동시에 이미지가 눌리는 것처럼 크기가 살짝 작아지도록 만들어주었습니다.
#imgText
💡 제목에 blind 효과를 사용하여 보이지 않도록 해주었습니다.
웹 접근성을 고려하여 화면상 보이지는 않지만 스크린 리더기에는 읽히도록 설정해주었습니다.
💡 이미지에 마우스 오버 효과를 주었습니다.
이미지에 마우스를 올리면 사진에 맞게 제목이 길어지게 만들었습니다.
#card
💡 img는 figure 태그로 감싸주었습니다.
💡 카드에 마우스 오버 효과를 주었습니다.
카드에 마우스를 올리면 대표 사진이 약간 확대되는 동시에 카드에 그림자가 생기도록 해주었습니다.
#banner
💡 글씨에 마우스 오버 효과를 주었습니다.
#text
💡 글씨에 마우스 오버 효과를 주었습니다.
#footer
💡 모바일 버전에서는 보이지 않도록 설정해주었습니다.
reset.css
⚠ 가로모드에서 글씨 크기가 커지는 것을 막아주었습니다.
html에 -ms-text-size-adjust: 100%;,
-webkit-text-size-adjust: 100%;를 추가시켜줍니다.
common.css
⚠ window 상에서 햄버거 메뉴 키고 끌때 화면 튕김 현상을 막아주었습니다.
body에 overflow: overlay; 를 추가시켜줍니다.
⚠ 햄버거 메뉴를 열었을 때 스크롤이 생기는 현상을 막아주었습니다.
body에 overflow: hidden; 으로 설정하여 화면을 고정시켜줍니다.
댓글