메인 HTML 소스

디자인 활용에 좋은 html 소스로 구성된 코드입니다.

  • 간단한 소개 홈페이지가 필요해요!
  • 나만의 포트폴리오를 만들고 싶어요!
  • 개발은 가능하지만 디자인이 필요합니다sad-but-relieved-face
웹사이트 HTML 타입
샘플 다운로드

샘플을 다운받고, 파일을 확인해보세요

메인페이지와 서브페이지 샘플 1개 제공

index.html - 메인
상단메뉴, 메인배너, 인덱스구성, 하단내용으로 구성되어 있습니다.
sub1.html - 서브 샘플 1개
상단메뉴, 서브배너, 서브메뉴, 페이지샘플, 하단내용 으로 구성되어 있습니다.
서브 페이지 추가
sub1.html을 복사하여 페이지명.html을 만들고 필요한 곳에 링크를 적용합니다.
메인페이지와 서브페이지 샘플 1개 제공
이미지, CSS, 스크립트

이미지, CSS, 스크립트

이미지 - img 폴더
common - 공통이미지, main - 메인이미지, sub - 서브이미지로 구성되어 있습니다.
이미지 수정 및 추가
동일한 사이즈의 이미지를 생성하여 덮어쓰기 하거나, 새로운 이미지를 경로에 맞춰 추가합니다.
CSS - css 폴더
sh_common.css - 공통스타일, sh_main.css - 메인스타일, sh_sub.css - 서브스타일로 구성되어 있으며, 템플릿에 사용된 fontawesome, aos, swiper 등 기타 스타일도 포함되어 있습니다.
스크립트 - js 폴더
상단메뉴, 템플릿에 사용된 aos, swiper 등의 스크립트로 구성되어 있습니다.

일반형 모바일

메인 및 서브 샘플 1개
mobile 폴더에 메인(index.html)과 서브 샘플(sub1.html) 1개로 구성되어 있습니다.
이미지 및 css
모바일 전용 이미지는 mobile/img/ 경로를 사용합니다.
모바일 전용 css는 mobile/css/ 경로를 사용합니다.
서브 페이지 추가
모바일 폴더에 있는 sub1.html을 복사하여 페이지명.html을 만들고 필요한 곳에 링크를 적용합니다.
일반형 모바일
반응형 모바일

반응형 모바일

메인 및 서브
PC와 동일한 경로를 사용합니다.
반응형 적용
스타일시트에서 미디어쿼리로 각 디바이스에 대응하게 되어있습니다.
서브 페이지 추가
sub1.html을 복사하여 페이지명.html을 만들고 필요한 곳에 링크를 적용합니다.
스타일 시트에서 미디어 쿼리를 이용하여 각 디바이스에 대응하도록 코드를 작성합니다.
디자인키트 카카오상담