DAY_008_HTML
2023. 12. 15. 17:33ㆍFull Stack Course 풀스택과정/HTML_CSS_JAVASCRIPT
728x90
CodeHows DAY_008_HTML
이번에 사용된 기능 :
HTML 전부응용 최종본
HTML 로 홈페이지 만들기
HTML 사진 전광판 만들기
HTML 버튼 클릭시 이벤트
HTML 홈페이지 꾸미기
HTML 블로그 꾸미기
HTML 사이트 만들기
HTML 쉬운 홈페이지 만들기
HTML 쉬운 블로그 만들기
이번에는 HTML, CSS , JS 모두 파일을 정리했고,
File에다가 다집어넣어서 src 주소가 길지도 않아요 ^_^
최종본인 만큼 책에 나온거 + 좀더 꾸미긴했어요
책은 Do it HTML+CSS+자바스크립트 웹 표준의 정석입니다
물론 버튼이 다 클릭은 안되지만 이번엔 비율 , 코드정리하는법 , 홈페이지 나 블로그 만드는 방식으로 했더니
전에 만들었던 방식보다 훨씬 깔끔하고 간결하더군요
이렇게 커서 가져다가 놓으면 이렇게 내려오게 만들었고
Notice 대신에 Gallery 를 클릭하면
이렇게 바뀌게도 했네요
나머지 기능들은 이전에 설명한것들이거나 간단한 거예요
그럼 20000
글 너무 길면 보기 싫으니 css는 따로 다운받길
이건 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 (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[n].style.display = "block";
}
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;
}
slides[current-1].style.display = "block";
setTimeout(showSlides,2000);
if (current==3){
current = 0;
}
}
function prevSlide() {
if (current > 0) {
current -= 1;
} else {
current = slides.length - 1;
}
showSlides(current);
}
function nextSlide() {
if (current < slides.length - 1) {
current += 1;
} else {
current = 0;
}
showSlides(current);
}
이건 본문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sarimus</title>
<link rel="stylesheet" href="css/SariStyle.css">
</head>
<body>
<div id="container">
<header>
<div id="logo">
<a href="Week2_5.html">
<h1> SariMus </h1>
</a>
</div>
<nav>
<ul id="topMenu">
<li><a href="#"> CodeHows <span>▼</span></a>
<ul>
<li><a href="#"> HTML</a></li>
<li><a href="#"> GIT </a></li>
<li><a href="#"> GIT Hub</a></li>
</ul>
</li>
<li><a href="#"> CyberSecurity <span>▼</span></a>
<ul>
<li><a href="#">Network Sec</a></li>
<li><a href="#">System Sec</a></li>
<li><a href="#">Info Sec</a></li>
<li><a href="#">Mal Analysis</a></li>
</ul>
</li>
<li><a href="#">Inquiry</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"> Notice </label>
<input type="radio" id="tab2" name="tabs">
<label for="tab2"> Gallery </label>
<div id="notice" class="tabContent">
<h2> Information</h2>
<ul>
<li> [News] New Hacking way detected !! </li>
<li> [Apply] New Recruit for Macquarie Mantee </li>
<li> [Event] Winter Festival On Coming.. </li>
<li> [News] Apply for scholorship before.. </li>
<li> [News] How to apply for internships </li>
</ul>
</div>
<div id="gallery" class="tabContent">
<h2> Gallery Info </h2>
<ul>
<li><img src="images/img-1.jpg"></li>
<li><img src="images/img-1.jpg"></li>
<li><img src="images/img-1.jpg"></li>
<li><img src="images/img-1.jpg"></li>
<li><img src="images/img-1.jpg"></li>
<li><img src="images/img-1.jpg"></li>
</ul>
</div>
</div>
<div id="links">
<ul>
<li>
<a href="#">
<span id="quick-icon1"></span>
<p>Piece</p>
</a>
</li>
<li>
<a href="#">
<span id="quick-icon2"></span>
<p>Work shop</p>
</a>
</li>
<li>
<a href="#">
<span id="quick-icon3"></span>
<p>Inquiry</p>
</a>
</li>
</ul>
</div>
</div>
<footer>
<div id="bottomMenu">
<ul>
<li><a href="#"> Sarimus </a></li>
<li><a href="#"> Personal Infomation </a></li>
<li><a href="#"> Terms and Conditions </a></li>
<li><a href="#"> Site map </a></li>
</ul>
<div id = "sns">
<ul>
<li><a href="#"><img src="images/facebook.jpg"></a></li>
<li><a href="#"><img src="images/insta.jpg"></a></li>
<li><a href="#"><img src="images/youtube.png"></a></li>
</ul>
</div>
</div>
<div id="company">
<p>Changwon-si, Gyeongsangnam-do, Bong-gok-dong (hp) 751-4485 (mb) 123-456-7890 </p>
</div>
</footer>
</div>
<script src="js/slideshow.js"></script>
</body>
</html>
그리고 실행햿을때 아래에 보여주고싶지만 전부 CSS에 있어서요 ^_^
직접 다운받는수밖에
그외에 images 들
728x90
'Full Stack Course 풀스택과정 > HTML_CSS_JAVASCRIPT' 카테고리의 다른 글
| DB 없이 HTML 파일을 AWS 서버구축후 배포하기 (엔진엑스 - Nginx ) (0) | 2024.08.04 |
|---|---|
| DAY_007_HTML (0) | 2023.12.14 |
| DAY_006_HTML (0) | 2023.12.14 |
| DAY_005_HTML (0) | 2023.12.14 |
| DAY_004_HTML (0) | 2023.12.14 |