[Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 2

SMALL

목표

이미지 슬라이드 쇼 만들기
css로 버튼 스타일 지정하고 js로 이미지 이동하도록
탭 메뉴 만들고 내용과 연결하기 (css 사용)

1. 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/jeju_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="tab-menu">
                tab-area
            </div>
            <div id="links">
                quick-link
            </div>
        </div>
        <div id="footer">
            footer
        </div>
    </div>
    <script src="./js/slideshow.js"></script>
</body>
</html>

2. css

@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

#container {
    margin: 0 auto; /* 화면 중앙에 배치 */
    width: 1200px;
    background-color: aliceblue;
}

header {
    width: 1200px;
    height: 100px;
    background-color: #07c;
}

header>#logo{
    float: left;
    width: 250px;
    height: 100px;
    line-height: 100px; /* height 값과 같게 만들어서 세로 중간에 오도록 */
    padding-left: 20px;
}

#logo h1{
    font-family: 'Merienda', cursive;
    font-weight: 700;
    font-size: 40;
    color: #fff;
    text-shadow: 0 -1px 0 #222; /* 그림자색 (좌우 그림자) */
}

header>nav{
    float: right;
    width: 900px;
    height: 100px;
    background-color: skyblue;
    padding-top: 38px; /*메뉴 자체를 좀 밑으로 내리려고*/
}

#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(225, 225, 225, 0.6);
    left: 20px;
    margin: 0;
}

#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;
    /* background-color: yellow; */
    overflow: hidden; /*영역이 넘치면 감춤*/
    position: relative;
    /*하위 영역 (slides)에 position: absolute를 쓰려고 여기에 기준 설정*/
}

#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; /*투명도 50%*/
}

#prev{
    left: 0;
}

#next{
    right: 0;
}

button:hover{ /*버튼에 마우스를 올리면*/
    background-color: #222; /*짙은 회색*/
    color: #fff;
    opacity: 0.6;
    cursor: pointer; /*포인터 모양으로 바꿈*/
}

button:focus{ /*마우스를 떼면*/
    outline: 0; /*아웃라인을 없앰*/
}

#contents {
    width: 1200px;
    height: 300px;
    background-color: violet;
}

#contents>#tab-menu{
    float: left;
    width: 600px;
    height: 300px;
    margin-top: 10px;
}

#tab-menu input[type="radio"]{
    display: none; /*버튼 감추기*/
}

#tab-menu label {
    display: inline-block;
    margin: 0 0;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #aaa;
    border: 1px solid transparent;
}

#tab-menu label:hover{
    color: #222;
    cursor: pointer;
}

#tab-menu 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-block; /*가로배치*/
}

/*탭 내용과 메뉴 연결*/
#tab1:checked ~ #notice, 
#tab2:checked ~ #gallery{
    display: block;
}

#contents>#links{
    float: left;
    width: 600px;
    height: 300px;
    background-color: tomato;
}

#footer{
    width: 1200px;
    height: 100px;
    background-color: springgreen;
}

3. 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" 
        // 슬라이드 이미지의 display값을 none으로
    }
    slides[n].style.display = "block" // n번째 이미지만 표시
}

function prevSlide(){
    if (current>0) {
        current -= 1 // 이전 이미지를 보여줌
    } else {
        current = slides.length - 1 
        // 첫번째 이미지에서 이전 이미지는 맨 마지막 이미지임.
        // 맨 마지막 이미지의 인덱스는 총 길이 - 1
    }
    showSlides(current)
}

function nextSlide(){
    if (current < slides.length - 1) {
        current += 1
    } else {
        current = 0 
        // 맨마지막 다음 이미지는 맨 첫번째 이미지
        // 맨 첫번째 이미지의 인덱스는 0임.
    }
    showSlides(current)
}

4. 결과

** 이전버튼이 실행 안 됨 (수정 필요)

728x90

저작자표시

'HTML & CSS' 카테고리의 다른 글

[Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 3 (0)	2022.07.17
[Do it!] HTML+CSS+JS 웹표준의 정석 실전 프로젝트 1 (0)	2022.06.23
[FrontEnd1] 토이스토리 페이지 보강 (컨텐츠 영역 설정, 푸터 영역 추가- 로고, 카피라이트) (0)	2022.05.10
[FrontEnd1] 5월 첫째주 한페이지 개념 정리 (0)	2022.05.07
[FrontEnd1] 토이스토리 페이지 보강 (로고 삽입, 메뉴 설정, 폰트 설정, 검색창 만들기) (0)	2022.05.01