1. TeamProject (관광지 소개)

화면설계, 페이지 만들기

홍윤

Sep 03, 2024

Contents

1.프로젝트 정하기 2.화면 설계 하기 3. Page 만들기 (틀 만들어 놓기 나중에 수정 함)

1.프로젝트 정하기

💡

프로젝트 명 - 관광지 소개

참고사이트: https://korean.visitkorea.or.kr/main/main.do

2.화면 설계 하기

내가 하기로 한 부분은 테마,여행지도, 회원가입&로그인 담당 하기로 했다.

1. 로그인 화면

2. 회원가입 화면

3. 테마 화면

4. 여행지도 화면

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

1. loginpage.html, CSS

loginpage.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/loginpage.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/layoutstyle1.css">
    <!-- CSS 파일 경로를 지정합니다. -->


    <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="aaa">
        <div class="login-container">
            <h2>로그인</h2>
            <form>
                <div class="form-group">
                    <label for="userid">아이디</label>
                    <input type="text" class="form-control" id="userid" placeholder="아이디 입력">
                </div>
                <div class="form-group">
                    <label for="password">비밀번호</label>
                    <input type="password" class="form-control" id="password" placeholder="비밀번호 입력">
                </div>
                <button type="submit" class="btn btn-primary btn-block">로그인</button>
                <div class="form-group text-center mt-3">
                    <a href="#">비밀번호를 잊으셨나요?</a>
                </div>
                <hr>
                <div class="text-center">
                    <p>계정이 없으신가요? <a href="#">회원가입</a></p>
                </div>
            </form>
        </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>

loginpage.CSS


.aaa {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #e9ecef;

}

.login-container {
    width: 100%;
    max-width: 400px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    /* 투명도와 블러 효과로 배경과 자연스럽게 어우러지게 함 */
}

.login-container h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #007bff;
}

.btn-primary {
    background-color: #007bff;
    border: none;
}

.btn-primary:hover {
    background-color: #0056b3;
}

a {
    color: #007bff;
}


a:hover {
    text-decoration: none;
    color: #0056b3;
}

2. regpage.html, CSS

regpage.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/regpage.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/layoutstyle1.css">
    <!-- CSS 파일 경로를 지정합니다. -->


    <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="aaa">


        <div class="signup-container">
            <h2>회원가입</h2>
            <form id="signup-form">
                <!-- 아이디 입력 및 중복확인 -->
                <div class="form-group">
                    <input type="text" class="form-control" id="user_id" placeholder="아이디 입력">
                    <button type="button" class="btn btn-secondary duplicate-check"
                        onclick="checkDuplicate('user_id')">중복확인</button>
                </div>

                <!-- 비밀번호 입력 -->
                <div class="form-group">
                    <input type="password" class="form-control" id="user_password" placeholder="비밀번호 입력">
                    <button type="button" class="btn btn-secondary duplicate-check invisible">중복확인</button>
                </div>

                <!-- 닉네임 입력 및 중복확인 -->
                <div class="form-group">
                    <input type="text" class="form-control" id="user_nickname" placeholder="닉네임 입력">
                    <button type="button" class="btn btn-secondary duplicate-check"
                        onclick="checkDuplicate('user_nickname')">중복확인</button>
                </div>

                <!-- 이메일 입력 및 도메인 선택 -->
                <div class="form-group">
                    <input type="text" class="form-control" id="user_email" placeholder="이메일 입력">
                    <select class="form-control" id="email_domain" onchange="toggleCustomEmail(this)">
                        <option value="">도메인 선택</option>
                        <option value="@naver.com">@naver.com</option>
                        <option value="@google.com">@google.com</option>
                        <option value="@nate.com">@nate.com</option>
                        <option value="custom">직접 입력</option>
                    </select>
                    <button type="button" class="btn btn-secondary duplicate-check"
                        onclick="checkDuplicate('user_email')">중복확인</button>
                </div>

                <!-- 전화번호 입력 및 중복확인 -->
                <div class="form-group">
                    <input type="text" class="form-control" id="user_phone" placeholder="전화번호 입력">
                    <button type="button" class="btn btn-secondary duplicate-check"
                        onclick="checkDuplicate('user_phone')">중복확인</button>
                </div>

                <!-- 회원가입 버튼 -->
                <button type="submit" class="btn btn-primary btn-block mt-4">회원가입</button>
            </form>
        </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>


    <!-- javaScript 입니다. 기능이 제대로 작동하지 않아 일단 주석 처리 하겠습니다.
    <script>
        // 중복확인이 완료된 상태를 저장할 객체
        const duplicateCheckStatus = {
            user_id: false,
            user_nickname: false,
            user_email: false,
            user_phone: false
        };

        // 중복확인 함수
        function checkDuplicate(field) {
            alert(field + ' 중복확인 완료!');
            duplicateCheckStatus[field] = true;
            document.getElementById(field).setAttribute('data-checked', 'true');
        }

        // 이메일 도메인 선택 시 동작
        function toggleCustomEmail(selectElement) {
            const emailInput = document.getElementById('email_domain');

            if (selectElement.value === 'custom') {
                selectElement.value = ''; // 'custom'을 선택했을 때, 셀렉트 박스를 빈칸으로 설정
                emailInput.focus(); // 이메일 입력란으로 포커스 이동
            } else if (selectElement.value !== "") {
                emailInput.value = emailInput.value.split('@')[0] + selectElement.value; // 선택된 도메인 추가
            }
        }

    </script> -->

    <!-- 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>


.aaa {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f8f9fa;
}

.signup-container {
    width: 100%;
    max-width: 500px;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: white;
}

.signup-container h2 {
    text-align: center;
    margin-bottom: 30px;
}

.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.form-control,
.form-group select {
    flex: 1;
    margin-right: 10px;
}

.duplicate-check {
    white-space: nowrap;
    flex-shrink: 0;
}

.custom-email {
    display: none;
    margin-top: 10px;
}

See more posts

1. TeamProject (관광지 소개)

1.프로젝트 정하기

2.화면 설계 하기

1. 로그인 화면

2. 회원가입 화면

3. 테마 화면

4. 여행지도 화면

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

1. loginpage.html, CSS

2. regpage.html, CSS

More articles

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

Blog-v3(리팩토링)

Optional 클래스

git hud 협업 포크(fork)와 싱크(sync)