TeamProject

1. TeamProject (관광지 소개) 테마, 여행지도 페이지 만들기

홍윤's avatar
홍윤
Sep 04, 2024
1. TeamProject (관광지 소개) 테마, 여행지도 페이지 만들기
Contents
1. Page 만들기 (틀 만들어 놓기 나중에 수정 함)
 

1. Page 만들기 (틀 만들어 놓기 나중에 수정 함)

1. theme.html, CSS

  • theme.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>테마페이지</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="/css/theme.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/layoutstyle1.css">
    <!-- CSS 파일 경로를 지정합니다. -->


<body>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const userImg = document.querySelector('.user__img');
            const dropdownMenu = document.querySelector('.dropdown__menu');

            userImg.addEventListener('click', function () {
                // Toggle the dropdown menu visibility
                dropdownMenu.classList.toggle('show');
            });

            // Close the dropdown if clicking outside of it
            document.addEventListener('click', function (event) {
                if (!userImg.contains(event.target) && !dropdownMenu.contains(event.target)) {
                    dropdownMenu.classList.remove('show');
                }
            });
        });
    </script>
    </head>
    <header>
        <div class="logo">로고</div>
        <div class="menu__box">
            <div>메인</div>
            <div>테마</div>
            <div>지역</div>
            <div>핫플</div>
            <div>축제</div>
            <div>지도</div>
        </div>
        <div class="user__info">
            <div class="info__login">
                <div class="user__img" style="display: none;"><img src="/images/userImg1.png">
                    <div class="dropdown__menu">
                        <div>마이페이지</div>
                        <div>로그아웃</div>
                    </div>
                </div>
            </div>
            <div class="info__logout">
                <div>로그인</div>
                <div>회원가입</div>
            </div>
        </div>
    </header>

    <body>
        <div class="div-title">
            <h3>다채로운 즐거움이 가득한 대한민국 구석구석 추천 테마여행!</h3>
        </div>

        <!-- Main Content -->
        <div class="container">
            <div class="row justify-content-center">
                <!-- Theme Card 1 -->
                <div class="col-md-3 d-flex justify-content-center">
                    <a href="https://korean.visitkorea.or.kr/localfood/main.do" class="theme-card-container">
                        <div class="theme-card">
                            <img src="/img/맛집차트.png" alt="Theme 1">
                        </div>
                        <div class="theme-description">
                            <p>빅데이터 맛집차트</p>
                        </div>
                    </a>
                </div>

                <!-- Theme Card 2 -->
                <div class="col-md-3 d-flex justify-content-center">
                    <a href="https://korean.visitkorea.or.kr/travelweekend/index.do" class="theme-card-container">
                        <div class="theme-card">
                            <img src="/img/여행주말.jpg" alt="Theme 2">
                        </div>
                        <div class="theme-description">
                            <p>여행이 있는 주말</p>
                        </div>
                    </a>
                </div>

                <!-- Theme Card 3 -->
                <div class="col-md-3 d-flex justify-content-center">
                    <a href="http://worcation.sba.kr/" class="theme-card-container">
                        <div class="theme-card">
                            <img src="/img/워케이션.jpg" alt="Theme 3">
                        </div>
                        <div class="theme-description">
                            <p>워케이션</p>
                        </div>
                    </a>
                </div>

                <!-- Theme Card 4 -->
                <div class="col-md-3 d-flex justify-content-center">
                    <a href="https://gocamping.or.kr/" class="theme-card-container">
                        <div class="theme-card">
                            <img src="/img/고캠핑.jpg" alt="Theme 4">
                        </div>
                        <div class="theme-description">
                            <p>고캠핑</p>
                        </div>
                    </a>
                </div>

                <!-- Add more cards similarly... -->
                <div class="col-md-3 d-flex justify-content-center">
                    <a href="https://korean.visitkorea.or.kr/other/otherService.do?otdid=228bfd20-946d-4cc1-9dbf-f5d28de3549e"
                        class="theme-card-container">
                        <div class="theme-card">
                            <img src="/img/market.jpg" alt="Theme 5">
                        </div>
                        <div class="theme-description">
                            <p>전통시장 K-관광마켓 10선</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-3 d-flex justify-content-center">
                    <a href="https://safestay.visitkorea.or.kr/usr/main/mainSelectList.kto#"
                        class="theme-card-container">
                        <div class="theme-card">
                            <img src="/img/세이프스테이.png" alt="Theme 6">
                        </div>
                        <div class="theme-description">
                            <p>세이프스테이</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-3 d-flex justify-content-center">
                    <a href="https://korean.visitkorea.or.kr/other/otherService.do?otdid=64e29192-8939-11e8-8165-020027310001"
                        class="theme-card-container">
                        <div class="theme-card">
                            <img src="/img/한국관광의별.jpg" alt="Theme 7">
                        </div>
                        <div class="theme-description">
                            <p>한국관광의별</p>
                        </div>
                    </a>
                </div>

                <div class="col-md-3 d-flex justify-content-center">
                    <a href="https://www.durunubi.kr/" class="theme-card-container">
                        <div class="theme-card">
                            <img src="/img/두루누비.jpg" alt="Theme 8">
                        </div>
                        <div class="theme-description">
                            <p>두루누비</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <hr class="divider">
        <!-- 추가된 여행지도 섹션 -->
        <div class="container travel-map-container">
            <div>
                <H3><strong>테마가 있는 여행을 즐겨보세요</strong></H3>
            </div>
            <!-- Map Image -->
            <div class="map-image">
                <img src="/img/지도.png" alt="Korea Map" class="img-fluid">
            </div>

            <!-- Travel Recommendations -->
            <div class="travel-recommendations">
                <h4>오늘의 여행을 내일로 미루지 말자!</h4>
                <a href="#">
                    <div class="recommendation-item">
                        <img src="/img/백수해안도로.jpg" alt="백수해안도로">
                        <div>
                            <p>백수해안도로</p>
                            <small>전남 영광군</small>
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="recommendation-item">
                        <img src="/img/탄도항누에섬.jpg" alt="탄도항누에섬">
                        <div>
                            <p>탄도항누에섬</p>
                            <small>경기 안산시</small>
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="recommendation-item">
                        <img src="/img/세방낙조.jpg" alt="세방낙조 전망대">
                        <div>
                            <p>세방낙조 전망대</p>
                            <small>전남 진도군</small>
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="recommendation-item">
                        <img src="/img/선유도.jpg" alt="선유도해수욕장">
                        <div>
                            <p>선유도해수욕장 (명사십리)</p>
                            <small>전북 군산시</small>
                        </div>
                    </div>
                </a>

            </div>
        </div>
        <footer>
            <div>
                <div class="footer__info">
                    <div><a href="#">개인정보 처리 방침</a></div>
                    <div><a href="#">이용약관</a></div>
                    <div><a href="#">위치기반서비스 이용약관</a></div>
                    <div><a href="#">저작권 정책</a></div>
                    <div><a href="#">Q&A</a></div>
                </div>
                <div class="footer_make">
                    카피라이트
                </div>
            </div>
        </footer>


        <!-- Bootstrap JS and dependencies -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </body>

</html>
 
  • CSS
.div-title {
    text-align: center;
    padding: 100px 0px;
    background-color: #fdd835;
}

.theme-description p {
    font-family: 'Arial', sans-serif;
    /* 멋진 글꼴로 변경 */
    font-weight: bold;
    /* 텍스트를 두껍게 */
    color: #007bff;
    /* 파란색으로 텍스트 색상 변경 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    /* 텍스트에 약간의 그림자 추가 */
    transition: transform 0.2s, color 0.2s;
    /* 마우스를 올렸을 때 효과 추가 */
}

.theme-description p:hover {
    transform: scale(1.1);
    /* 텍스트가 커지는 효과 */
    color: #0056b3;
    /* 텍스트 색상이 진한 파란색으로 변경 */
}

.theme-card-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 20px auto;
    width: 220px;
    height: 300px;
}

.theme-card {
    border-radius: 10%;
    overflow: hidden;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.theme-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.theme-description {
    text-align: center;
    font-size: 16px;
    white-space: nowrap;
}

.travel-map-container {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.map-image {
    width: 60%;
    max-width: 600px;
}

.travel-recommendations {
    width: 35%;
    padding-left: 20px;
}

.travel-recommendations h4 {
    font-weight: bold;
}

.recommendation-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.recommendation-item img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 15px;
}

.recommendation-item div {
    flex: 1;
}

.divider {
    margin: 40px 0;
    border-top: 2px solid #ddd;
}
notion image
notion image
  • 지도는 잠깐 사진으로 대체함
 

2. tourmap.html, CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>여행지도페이지</title>
    <!-- 부트스트랩 CSS 링크 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS 파일 링크 -->
    <link rel="stylesheet" href="/css/layoutstyle1.css">
    <link rel="stylesheet" href="/css/tourmap.css">
</head>

<body>
    <header>
        <div class="logo">로고</div>
        <div class="menu__box">
            <div>메인</div>
            <div>테마</div>
            <div>지역</div>
            <div>핫플</div>
            <div>축제</div>
            <div>지도</div>
        </div>
        <div class="user__info">
            <div class="info__login">
                <div class="user__img" style="display: none;"><img src="/images/userImg1.png">
                    <div class="dropdown__menu">
                        <div>마이페이지</div>
                        <div>로그아웃</div>
                    </div>
                </div>
            </div>
            <div class="info__logout">
                <div>로그인</div>
                <div>회원가입</div>
            </div>
        </div>
    </header>

    <!-- 사이드바 -->
    <div class="sidebar">
        <div class="loactionwe">
            <h4>지역(ex: 부산진구 38도)</h4>
        </div>

        <ul class="insider">
            <li>
                <a href="#">
                    <div class="icon">&#127759;</div>
                    <div class="text">주변여행지</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon">&#127828;</div>
                    <div class="text">음식점</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon">&#9749;</div>
                    <div class="text">카페</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon">&#127970;</div>
                    <div class="text">숙소</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon">&#9889;</div>
                    <div class="text">전기차충전소</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon">&#127881;</div>
                    <div class="text">여행테마</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon">&#128200;</div>
                    <div class="text">나의여행</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon">&#127973;</div>
                    <div class="text">주유소</div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="icon">&#127968;</div>
                    <div class="text">편의점</div>
                </a>
            </li>
        </ul>

        <!-- 장소 목록 -->
        <div class="place-item">
            <h3>놀이터</h3>
            <p>주변 여행지 - 내 위치로부터 0.1 km</p>
        </div>
        <div class="place-item">
            <h3>서면미술관</h3>
            <p>주변 여행지 - 내 위치로부터 0.1 km</p>
        </div>
        <div class="place-item">
            <h3>부산광역시립 부전도서관</h3>
            <p>주변 여행지 - 내 위치로부터 0.2 km</p>
        </div>


    </div>

    <!-- 메인 콘텐츠 -->
    <div class="content">
        <div class="map">
            <img src="/img/지도.png" alt="지도" style="width: 1000px; height: auto;">
        </div>
    </div>

    <!-- 부트스트랩 JS 및 Popper.js 링크 -->
    <footer>
        <div>
            <div class="footer__info">
                <div><a href="#">개인정보 처리 방침</a></div>
                <div><a href="#">이용약관</a></div>
                <div><a href="#">위치기반서비스 이용약관</a></div>
                <div><a href="#">저작권 정책</a></div>
                <div><a href="#">Q&A</a></div>
            </div>
            <div class="footer_make">
                카피라이트
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const userImg = document.querySelector('.user__img');
            const dropdownMenu = document.querySelector('.dropdown__menu');

            userImg.addEventListener('click', function () {
                // Toggle the dropdown menu visibility
                dropdownMenu.classList.toggle('show');
            });

            // Close the dropdown if clicking outside of it
            document.addEventListener('click', function (event) {
                if (!userImg.contains(event.target) && !dropdownMenu.contains(event.target)) {
                    dropdownMenu.classList.remove('show');
                }
            });
        });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>

</html>
body {
    margin: 0;
    font-family: Arial, sans-serif;
    padding-top: 100px;
    /* 헤더 높이만큼 패딩 추가 */
}

.sidebar {
    height: calc(100vh - 100px);
    /* 헤더 높이만큼 빼서 사이드바 높이 설정 */
    background-color: #f8f9fa;
    padding: 15px;
    position: fixed;
    top: 100px;
    /* 헤더 아래에 오도록 설정 */
    left: 0;
    width: 220px;
    border-right: 1px solid #ddd;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 1100;
    /* 헤더보다 위에 오도록 설정 */
}

.content {
    margin-left: 240px;
    /* 사이드바 너비에 맞춰 조정 */
    padding: 20px;
}

.insider {
    list-style: none;
    padding: 0;
    margin: 0;
}

.insider li {
    margin-bottom: 10px;
}

.insider a {
    display: flex;
    align-items: center;
    color: #333;
    padding: 10px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.insider a:hover {
    background-color: #e9ecef;
    color: #000;
}

.icon {
    margin-right: 10px;
    font-size: 18px;
}

.place-item {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.place-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

.map {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
    padding: 20px;
    box-sizing: border-box;
}

.footer__info,
.footer_make {
    text-align: center;
    padding: 10px 0;
}
notion image
Share article

More articles

See more posts

제네릭(Generic), 아작스(Ajax)

September 6, 2024
제네릭(Generic), 아작스(Ajax)

Blog-v3(리팩토링), 댓글기능

September 5, 2024
Blog-v3(리팩토링), 댓글기능

Blog-v3(리팩토링),양방향 매핑, 인라인 뷰, 테이블 쪼개기

September 4, 2024
Blog-v3(리팩토링),양방향 매핑, 인라인 뷰, 테이블 쪼개기

Blog-v3(리팩토링)

September 3, 2024
Blog-v3(리팩토링)

Uni

RSS·Powered by Inblog