웹 페이지 응용 하여 만들어 보기

안녕하세요 홍 가 입니다.

오늘은 웹 페이지를 응용해서 만들어 보려고 합니다.

header부분으로 전체를 잡아주고
main_nav부분을 스태틱으로 상단 고정을 해주고
top_nav로 box-dhadow를 사용해 선을 만들어주고
inner을 통해 사이트 이름 및 검색바를 넣어줍니다.

 

input부분에 돋보기랑 지도 맵 아이콘을 넣었습니다.
overflow: hidden;
text-indent: -9999px; 텍스트 가리기
position: absolute; 고정을 해주고
background: url(); 로 이미지를 주었습니다.

header 부분을 완성했으니
section부분과 footer부분을 정해놨습니다.

 

Swiper Demos

swiper demo에 들어가서 맘에 드는 것을 사용하면 됩니다. 

저는 무한 루프 슬라이드를 사용하기로 했습니다.

 

언플래쉬를 사용해 무료 이미지를 다운했습니다.
이제 저기 swiper부분에 적용해 보겠습니다.

사진 크기를 자르기 애매해서 그냥 사용하고
swiper부분 하고 img부분에 width height부분에
변경을 줘서 사진을 적당한 크기로 맞췄습니다.
z-index: 0으로 맞추어 있고
background-size : cover;를 해서 사진을 안 깨지게 했습니다.

swiper부분에 저는 이미지를 넣어서 글씨를 넣어주기 위해서 text-box라는 div를 생성했고 css로 글자 크기 및 위치 고정을 시켜 완성시켰습니다.