반응형
Preface
HTML + CSS + JavaScript 책의 마지막 부분에 있는 웹 사이트 만들기 프로젝트를 진행하는 과정을 업로드한다.
한 번에 전부 완성하려 했지만, 이틀에 걸쳐 완성해야 할 것 같다.
다른 웹 사이트를 클론 코딩하기 전 연습한다는 생각으로 필요한 부분을 임의로 수정하며 책에 있는 코드를 따라 적고 있다.
처음엔 간단한 웹 사이트를 만드는 것 정도는 쉽게 할 수 있을 것이라 생각했는데, 예상했던 것 보다 신경 쓸 부분이 많다.
무엇보다 처음 큰 틀을 제대로 잡는 것이 정말 중요한 것 같다.
자세한 내용은 코드를 전부 완성한 후 이번 글에 추가하겠다.
모든 코드를 완성했다.
웹 사이트에 링크를 따로 연결한 것도 아니고 기본적인 형태만 만든 것 뿐인데, 시간이 꽤 오래 걸렸다.
그래도 이번 경험을 통해 웹 사이트는 어떤 순서로 제작해야 하고 어떤 것들을 고려해야 하는지 대충 감이 잡힌 것 같다.
이후엔 구글이나 네이버를 클론 코딩 해보려고 한다.
며칠 전 유튜브에서 단지 웹 사이트를 클론 코딩 하는 것은 포트폴리오에 전혀 도움이 되지 않는다는 영상을 봤다.
해당 영상에선 양산형 프로젝트 대신 장기간 운용할 수 있는 제대로 된 웹 사이트를 만들고 리팩토링, 유지 보수, 오류 해결, 성능 향상 등 실무와 밀접한 관련이 있는 활동을 경험해볼 수 있는 프로젝트를 진행할 것을 추천했다.
물론 영상의 말이 틀렸다고 생각하진 않지만, 이제 막 웹의 기초를 공부한 내 수준에선 가벼운 프로젝트를 진행하며 느낌을 잡고 다양한 경험을 해보는 것도 중요하다고 생각한다.
이번 글과 관련된 내용은 아니지만, HTML 블럭 삽입 기능을 사용할 때 CSS 코드를 코드블럭에 추가하면 계속해서 내 블로그 스킨에 해당 CSS가 적용된다.
왜 그런 것인지 이유를 잘 모르겠다.
빨리 해결 방법을 찾아야 하는데...
<1일 차>
1) 레이아웃 영역 만들기
2) 로고 부분에 웹 폰트 입력하기
3) 메인 메뉴와 서브메뉴 사이드바 만들기
- HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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>
<div id="contents">
<div id="tabMenu">
</div>
<div id="links">
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
- CSS 코드
@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Nanum+Pen+Script&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: 30px;
}
#logo h1 {
font-family: 'Courgette';
font-weight: 500;
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;
}
#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: 15px;
margin: 0;
}
#topMenu > li > ul > li {
padding: 10px 10px 10px 10px;
text-align: center;
}
#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;
background-color: orange;
overflow: hidden; /* 영역 넘치면 감춤 */
}
/* 콘텐츠 영역 */
#contents {
width: 100%;
height: 300px;
}
/* 탭 메뉴 영역 */
#tabMenu {
float: left;
width: 600px;
height: 100%;
background-color: violet;
}
/* 퀵 링크 영역 */
#links {
float: right;
width: 600px;
height: 100%;
background-color: skyblue;
}
/* 푸터 영역 */
footer {
width: 100%;
height: 100px;
background-color: gray;
}
<2일 차>
1) 슬라이드쇼 만들기
2) 컨텐츠 영역 만들기
3) 푸터 영역 만들기
- HTML 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<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="#">개인정보 처리 방침</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>제주특별자치도 예래동 예래로 11번지 (대표전화) 123-456-7890</p>
</div>
</footer>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
- CSS 코드
@import url('https://fonts.googleapis.com/css2?family=Courgette&family=Nanum+Pen+Script&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: 30px;
}
#logo h1 {
font-family: 'Courgette';
font-weight: 500;
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;
}
#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: 15px;
margin: 0;
}
#topMenu > li > ul > li {
padding: 10px 10px 10px 10px;
text-align: center;
}
#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;
}
button: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: 35px;
}
#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: 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 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: both;
margin-top: 25px;
margin-left: 20px;
}
p {
font-size: 14px;
color: #aaa;
}
- JavaScript 코드
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); // 이동한 위치의 이미지 표시
}
728x90
반응형
'etc. > Project' 카테고리의 다른 글
| Chat-GPT를 이용한 가상 피아노 (0) | 2023.03.07 |
|---|---|
| php, MySQL을 사용한 게시판 (0) | 2022.11.08 |
| 구글 클론 코딩 (2) | 2022.08.19 |
| 온도 측정 프로그램 (0) | 2022.03.27 |
| 프린트기 프로그램 (0) | 2022.01.24 |
댓글