여행사 웹 사이트의 시작 화면 만들기...!
▽ 로고
: 보통 사이트의 시작 화면 왼쪽 윗부분에 배치, 이미지 파일이나 텍스트 사용 가능
▽ 내비게이션
: 사이트 내 어느 위치에나 배치 가능, 대부분 위쪽에 배치, 내비게이션에 마우스 포인터를 올리면 하위 메뉴가 자연스럽게 펼쳐지도록 만듦
▽ 이미지 슬라이드 쇼
: 사이트 가운데에 사용자의 눈길을 사로잡는 이미지 3개 보여줌
▽ 탭 메뉴
: 특정 탭을 클릭하면 그 탭에 해당하는 내용으로 바꿔서 표시
▽ 퀵 링크
: 사용자가 사이트에서 많이 사용하는 서비스를 접근하기 쉬운 곳에 모아 둔 영역
▽ 푸터
: 사이트 하단에 회사 주소와 연락처, SNS 링크 등 여러 정보를 담아 두는 영역
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dream Jeju</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<div id="logo">
<a href="index.html">
<h1>Dream Jeju</h1>
</a>
</div>
<nav>
<ul id="topMenu">
<li><a href="#">단체 여행 <span>∇</span></a>
<ul>
<li><a href="#">회사 연수</a></li>
<li><a href="#">수학 여행</a></li>
</ul>
</li>
<li><a href="#">맞춤 여행 <span>∇</span></a>
<ul>
<li><a href="#">4.3 평화 기행</a></li>
<li><a href="#">곶자왈 체험</a></li>
<li><a href="#">힐링 워크숍</a></li>
</ul>
</li>
<li><a href="#">갤러리</a></li>
<li><a href="#">문의하기</a></li>
</ul>
</nav>
</header>
<div id="slideShow">
<div id="slides">
<img src="images/photo-1.jpg" alt="">
<img src="images/photo-2.jpg" alt="">
<img src="images/photo-3.jpg" alt="">
<button id="prev">⟨</button>
<button id="next">⟩</button>
</div>
</div>
<div id="contents">
<div id="tabMenu">
<input type="radio" id="tab1" name="tabs" checked>
<label for="tab1">공지사항</label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2">갤러리</label>
<div id="notice" class="tabContent">
<h2>공지사항 내용입니다.</h2>
<ul>
<li>사무실을 이전했습니다.</li>
<li>[참가모집] 카약 체험에 초대합니다.</li>
<li>[참가모집] 여름 방학 기간, 오름 체험단을 모집합니다.</li>
<li> 겨울, 추천 여행지</li>
<li>가을, 추천 여행지</li>
</ul>
</div>
<div id="gallery" class="tabContent">
<h2>갤러리 내용입니다.</h2>
<ul>
<li><img src="images/img-1.jpg"></li>
<li><img src="images/img-2.jpg"></li>
<li><img src="images/img-3.jpg"></li>
<li><img src="images/img-1.jpg"></li>
<li><img src="images/img-2.jpg"></li>
<li><img src="images/img-3.jpg"></li>
</ul>
</div>
</div>
<div id="links">
<ul>
<li>
<a href="#">
<span id="quick-icon1"></span>
<p>평화 기행</p>
</a>
</li>
<li>
<a href="#">
<span id="quick-icon2"></span>
<p>힐링 워크숍</p>
</a>
</li>
<li>
<a href="#">
<span id="quick-icon3"></span>
<p>문의하기</p>
</a>
</li>
</ul>
</div>
</div>
<footer>
<div id="bottomMenu">
<ul>
<li><a href="#">회사 소개</a></li>
<li><a href="#">r개인정보처리방침</a></li>
<li><a href="#">여행약관</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
<div id="sns">
<ul>
<li><a href="#"><img src="images/sns-1.png"></a></li>
<li><a href="#"><img src="images/sns-2.png"></a></li>
<li><a href="#"><img src="images/sns-3.png"></a></li>
</ul>
</div>
</div>
<div id="company">
<p>제주특별자치도 ***동 ***로 *** (대표전화) 123-456-789</p>
</div>
</footer>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
* {
margin: 0; /* 마진값 초기화 */
padding: 0; /* 패딩값 초기화 */
box-sizing: border-box; /* 박스 영역은 테두리까지 지정 */
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
#container {
margin: 0 auto; /* 화면 중앙에 배치 */
width: 1200px; /* 너비 지정*/
}
/* 헤더영역 */
header{
width: 100%; /* 너비 */
height: 100px; /* 높이 */
background-color: #07c;
}
/* 로고 영역 */
#logo {
float: left; /* 왼쪽으로 플로팅 */
width: 250px; /* 너비 */
height: 100px; /* 높이 */
line-height: 100px; /* height값과 같게 만들어서 세로로 중간에 오도록 맞춤 */
padding-left: 20px; /* 왼쪽 패딩 지정 */
}
#logo h1 {
font-family: 'Dancing Script', cursive;
font-weight: 700;
font-size: 40px; /* 폰트 크기 */
color: #fff; /* 폰트 색상 */
text-shadow: 0 -1px 0 #222; /* 그림자 색*/
}
/* 내비게이션 영역 */
nav {
float: right; /* 오른쪽으로 플로팅 */
width: 900px; /* 너비 */
height: 100px; /* 내비게이션 영역 높이 */
padding-top: 40px; /* 메뉴를 아래로 내리기 위해 */
}
#topMenu {
height: 60px;
}
#topMenu > li {
float: left; /* 메뉴 항목을 왼쪽으로 플로팅*/
position: relative; /* 서브메뉴를 absolute로 만들기 위해 부모 요소를 relative로 지정 */
}
#topMenu > li > a {
display:block; /* 링크 텍스트는 블록으로*/
color: #fff; /* 폰트 색상 */
font-weight: 600; /* 폰트 굵기*/
text-shadow: 0 1px #07c; /* 그림자 추가*/
padding: 20px 60px; /* 패딩 지정*/
}
#topMenu > li > a > span {
font-size: 0.5em; /* 서브메뉴가 있는 항목에 화살표 표시*/
}
#topMenu > li > a:hover {
color: #000; /* 마우스 포인터를 올리면 색상 바뀜 */
text-shadow: 0 -1px #07c; /* 글자가 굵어지지 않도록 지정 */
}
#topMenu > li > ul {
display: none; /* 서브메뉴를 처음에는 감춤*/
position: absolute; /* 서브메뉴 포지셔닝 */
width: 160px;
background-color: rgba(255,255,255,0.6); /* 배경 투명색 지정 */
left: 0;
margin: 0;
left: 20px;
}
#topMenu > li > ul > li {
padding: 10px 10px 10px 30px; /* 서브메뉴 항목 지정 */
}
#topMenu > li > ul > li > a {
font-size: 14px;
padding: 10px;
color: #000;
}
#topMenu > li:hover > ul {
display: block; /* 메인 메뉴 항목 위로 오버하면 서브메뉴 표시*/
z-index: 10; /* 슬라이드 쇼에 가리지 않게 조절*/
}
#topMenu > li > ul > li > a:hover {
color: #f00; /* 서브메뉴 마우스 오버하면 색상 바꾸기*/
}
/* 이미지 슬라이드 쇼 영역*/
#slideShow {
clear: both; /* 플로팅 해제 */
width: 100%; /* 너비 */
height: 300px; /* 높이 */
overflow: hidden; /* 영역 넘치면 감춤 */
position: relative;
}
#slides {
position: absolute;
}
#slides > img {
width: 100%; /* 너비 */
float: left; /* 가로로 배치*/
}
button {
position: absolute;
height: 100%; /* 이미지 높이에 맞추기*/
top: 0;
border: none; /* 테두리 없이*/
padding: 20px;
background-color: transparent; /* 투명한 배경 지정 */
color: #000; /* 화살표를 검은색으로 지정 */
font-weight: 800; /* 화살표를 굵게 지정 */
font-size: 24px; /* 화살표 크기 지정*/
opacity: 0.5; /* 화살표를 반투명하게 지정*/
}
#prev {
left: 0; /* 왼쪽으로 붙이기 */
}
#next {
right: 0; /* 오른쪽으로 붙이기 */
}
button:hover { /* 마우스 포인터를 올리면 */
background-color: #222; /* 배경색은 짙은 회색으로 변경*/
color: #fff; /* 흰색 화살표 */
opacity: 0.6; /* 불투명도 높임*/
cursor: pointer; /* 초인터 모양으로 바꿈*/
}
botton:focus {
outline:0; /* 아웃라인 없앰 */
}
/* 콘텐츠 영역 */
#contents {
width: 100%; /* 너비 */
height: 300px; /* 높이 */
margin-top: 20px; /* 마진 추가 */
}
/* 탭 메뉴 영역 */
#tabMenu {
float: left; /* 왼쪽으로 플로팅*/
width: 600px; /* 너비 */
height: 100%; /* 높이 */
margin-top: 10px; /* 탭 메뉴 위쪽에 여백 두기 */
}
#tabMenu input[type="radio"] {
display: none; /* 라디오 버튼 감춤*/
}
#tabMenu label { /* 탭 제목 스타일*/
display: inline-block; /* 탭을 가로로 배치 */
margin: 0 0; /* 마진 */
padding: 15px 25px; /* 패딩 */
font-weight: 600; /* 폰트 굵기 */
text-align: center; /* 폰트 정렬 */
color: #aaa; /* 폰트 색상 */
border: 1px solid transparent; /* 테두리 스타일 */
}
#tabMenu label:hover { /* 마우스 포인터를 올렸을 때 탭 제목 스타일 */
color: #222;
cursor: pointer;
}
#tabMenu input:checked + label { /* 활성화된 탭 제목 스타일*/
color: #b00;
border: 1px solid #ddd;
background-color: #eee;
}
.tabContent { /* 탭 내용 스타일*/
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
.tabContent h2{
display: none;
}
#notice ul {
list-style: disc;
margin-left: 30px;
}
#notice ul li {
font-size: 16px;
line-height: 2.5;
}
#gallery ul li {
display: inline; /* 이미지 가로로 배치*/
}
#tab1:checked ~ #notice,
#tab2:checked ~ #gallery {
display: block;
}
/* 퀵 링크 메뉴 영역 */
#links {
float: right; /* 오른쪽으로 플로팅*/
width: 600px; /* 너비 */
height: 100%; /* 높이 */
margin-top: 15px; /* 마진 추가 */
}
#links ul {
padding: 0; /* 패딩 */
overflow: hidden; /* 넘치는 항목은 감춤 */
}
#links ul li {
float: left; /* 가로로 배치 */
width: 33%; /* 세 항목의 영역을 균일하게 지정 */
text-align: center; /* 가운데 정렬 */
margin: 10px 0; /* 마진 */
}
#links ul li a span {
display: block; /* 블록 레벨 지정 */
margin: 0 auto; /* 가운데 배치 */
width: 150px; /* 가로 크기 */
height: 150px; /* 세로 크기*/
border-radius: 100%; /* 테두리를 둥글게 지정. border-radius: 150px도 가능 */
border: 1px solid #ddd; /* 테두리 스타일 */
line-height: 150px; /* 수직으로 중간에 오게 */
}
#quick-icon1 {
background-image:url('../images/icon-1.jpg')
}
#quick-icon2 {
background-image:url('../images/icon-2.jpg')
}
#quick-icon3 {
background-image:url('../images/icon-3.jpg')
}
#links ul li a p {
margin-top: 15px;
font-weight: 600;
color: #666;
}
/* 푸터 메뉴 영역 */
footer {
width: 100%; /* 너비 */
height: 100px; /* 높이 */
border-top: 2px solid #222; /* 위쪽에 가로선 추가 */
}
#bottomMenu {
width: 100%;
height: 20px;
position: relative;
}
#bottomMenu ul {
margin-top: 15px;
}
#bottomMenu ul li {
float: left; /* 가로로 배치 */
padding: 5px 20px;
border-right: 1px solid #ddd; /* 항목 오른쪽에 세로선 */
}
#bottomMenu ul li:last-child {
border-right: none; /* 마지막 항목에는 오른쪽 세로선 없음 */
}
#bottomMenu ul li a, #bottomMenu ul li a:visited {
font-size: 15px; /* 폰트 크기 */
color: #666; /* 폰트 색상 */
}
#sns {
position: absolute;
right: 0; /* 오른쪽 끝에 배치 */
}
#sns ul li {
border: none; /* 세로선 없이 */
padding: 5px;
}
#company {
clear: left; /* 플로팅 해제. clear: both도 가능 */
margin-top: 25px; /* 위쪽 마진 */
margin-left: 20px; /* 왼쪽 마진 */
}
p {
font-size: 14px; /* 폰트 크기 */
color: #aaa; /* 폰트 색상 */
}
slideshow.js
var slides = document.querySelectorAll("#slides > img");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var current = 0;
showSlides(current); // 현재 이미지 표시
prev.onclick = prevSlide; // 이전 이미지 표시
next.onclick = nextSlide; // 다음 이미지 표시
function showSlides(n) {
for (var i =0; i < slides.length; i++) { // 배열의 처음부터 끝까지 반복
slides[i].style.display = "none"; // 모든 이미지를 화면에서 감춤
}
slides[n].style.display = "block"; // n번째 이미지만 화면에 표시
}
function prevSlide() {
if(current > 0) current -= 1; // current값이 0보다 크면 이전 위치로
else current = slides.length -1; // 그렇지 않으면 (첫번째 이미지이므로) 마지막 위치로
showSlides(current); // 이동한 위치의 이미지 표시
}
function nextSlide() {
if(current < slides.length -1) current += 1; // current값이 2보다 작으면 다음 위치로
else current =0; // 그렇지 않다면(마지막 이미지이므로) 첫번째 위치로 이동
showSlides(current); // 이동한 위치의 이미지 표시
}
autoslide.js
: 자동으로 사진이 넘어가는 것을 원한다면
var current = 0; // 이미지 위치를 나타내는 함수
showSlides(); // 기본 첫번째 이미지를 보여줌
function showSlides() {
var slides = document.querySelectorAll("#slides > img");
for(let i = 0; i < slides.length; i++) {
slides[i].style.display = "none"; // 모든 이미지 감춤
}
current++;
if(current > slides.length) // 마지막 이미지라면
current = 1; // 1번째로 이동
slides[current - 1].style.display = "block"; // 현재 위치 이미지 표시
setTimeout(showSlides, 2000); // 2초마다 showSlides() 함수 반복 실행
}
살짝 귀엽고 하찮은(?) 시작 화면 완성
지금까지 하나씩 배운게 합쳐지니 그럴싸하다..!
역시 배운 내용을 바로 결과물로 볼 수 있다는 게 프론트엔드의 좋은점이 아닌가 싶다
아무튼 다음에는 내가 기획한 웹 사이트 시작화면도 만들어 봐야겠다 :)
'HTML_CSS_JavaScript' 카테고리의 다른 글
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑩ (0) | 2023.03.15 |
|---|---|
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑨ (0) | 2023.03.13 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑧ (0) | 2023.03.09 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑦ (0) | 2023.03.08 |
| Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - ⑥ (0) | 2023.03.03 |