25.02.18 TIL - 웹개발 미니 프로젝트(1)

1. 와이어프레임

2. header, navbar 구현

Navbar는 Bootstrap의 코드를 가지고 수정하여 사용하였다.

메인페이지만 사용하는 것이 아니라 방명록 페이지도 있기 때문에 Navbar를 통해 방명록 페이지로 이동하고자 구현하였다.

Navs and tabs

Documentation and examples for how to use Bootstrap’s included navigation components.

getbootstrap.com

구현된 화면

header, navbar 구현 코드.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Header</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
    <style>
        .mytitle {
            height: 150px;
            background-color: #112D4E;
            font-family: 'NanumSquareBold';
            color: #F9F7F7;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-position: center;
            background-size: cover;
        }
        .nav {
            background-color: #3F72AF;
        }
        .nav-link {
            color: #DBE2EF;
        }
        a {
            font-family: 'NanumSquare';
        }
        //마우스를 글자 위에 올렸을 경우
        .nav-link:hover {
            color: #F9F7F7;
            font-weight: bold;
        }
        .nav-link:visited{
            color: #DBE2EF;
        }
    </style>
</head>
<body>
    <div class="mytitle">
        <h1>ELEVEN</h1>
    </div>
    <nav class="nav justify-content-center">
        <a class="nav-link" href="#">Home</a>
        <a class="nav-link" href="#">방명록</a>
    </nav>
</body>
</html>

3. 인적사항 등록 페이지

와이어프레임 상에서는 보통 프로필 하면 자연스럽게 연상되는 것처럼 이미지를 옆에 미리보기 식으로 넣었지만,

이미지 링크로 대체하는 방식은 어떻냐는 튜터님의 의견과 나를 포함한 팀원들의 의견 역시 일치하여 형식을 바꿨다.

나름대로 링크된 이미지를 미리보고 싶어서 Open Graph 데이터를 이용해서 할 수 있는지 찾아봤었는데, 구글의 이미지 주소 복사 시에 복사되는 주소가 meta 태그에 적용하기는 어려운 것 같아서 포기했다.

보통 .jpg나 .png로 끝나야하는데 이미지 주소 복사 시에는 그렇게 끝나지 않기 때문이다.

(참고한 블로그)

[HTML&JSP] SNS에서 URL 공유시 미리보기meta 태그

링크를 SNS를 통하여 URL을 공유할 때 링크 상단에 썸네일, 타이틀, 설명 등 다양한 정보가 노출됩니다. 어떠한 정보들이 노출되며, 어떻게 설정을 할 수 있는지 확인해보고자 합니다. 아래와

hajoung56.tistory.com

OG(오픈그래프) 태그 적용하기

og 태그란 웹 페이지의 메타데이터를 정의하는 태그 중 하나이다. 이 태그는 페이스북에서 개발되었으며, 웹사이트가 소셜 미디어에 공유될 때 해당 웹페이지의 제목, 설명, 이미지 등을 정의할

velog.io

인적사항 등록페이지 구현 코드

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>정보 등록하기</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link href="https://hangeul.pstatic.net/hangeul_static/css/nanum-square.css" rel="stylesheet">
    <style>
        #intro {
            width: 650px;
            margin: 30px auto 30px auto;
            border: 2px solid black;
            border-radius: 2em;
            text-align: center;
            padding: 20px;
        }

        h3 {
            font-family: 'NanumSquareBold';
        }

        .mybtn {
            padding-top: 20px;
        }


        a {
            font-family: 'NanumSquare';
        }
        input {
            font-family: 'NanumSquare';
        }

        textarea {
            font-family: 'NanumSquare';
            resize: none;
        }

        .custom {
            width: 500px;
            /* 입력 필드 크기 통일 */
            margin-bottom: 5px;
        }

    </style>
    <script type="module">
         // Firebase SDK 라이브러리 가져오기
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


        //Firebase 연동코드
        

        // Firebase 인스턴스 초기화
        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

        $('#registerbtn').click(async function () {
            let image = $('#image').val();
            let name = $('#name').val();
            let age = $('#age').val();
            let mbti = $('#mbti').val();
            let oneWord = $('#oneWord').val();
            let hobby = $('#hobby').val();
            let selfIntro = $('#selfIntro').val();


            let doc = {
                'image': image,
                'name': name,
                'age': age,
                'mbti': mbti,
                'oneWord': oneWord,
                'hobby': hobby,
                'selfIntro': selfIntro
            };

            await addDoc(collection(db, "profile"), doc);
            alert('등록완료!');
            window.location.href = '상세페이지로 이동';

        });

        $('#cancelbtn').click(async function () {
            window.location.href = '메인페이지로 이동';
        });
    </script>
</head>

<body>
    <!-- header는 공통 적용 예정 -->
    <div id="header">
    </div>
    <div class="container-fluid row justify-content-center align-items-center" id="intro">
        <div>
            <h3 style="text-align: center; padding-bottom: 10px;">인적 사항 등록하기</h3>
        </div>
        <div style="display: flex; justify-content: center;">
            <form>
                <div>
                    <div>
                        <input type="text" class="form-control custom" id="image" placeholder="이미지">
                        <input type="text" class="form-control custom" id="name" placeholder="이름">
                        <input type="text" class="form-control custom" id="age" placeholder="나이">
                        <input type="text" class="form-control custom" id="mbti" placeholder="MBTI">
                        <input type="text" class="form-control custom" id="oneWord" placeholder="한마디">
                        <input type="text" class="form-control custom" id="hobby" placeholder="취미">
                        <textarea class="form-control custom" id="selfIntro" placeholder="자기소개"></textarea>
                    </div>
                </div>
                <button type="button" id="registerbtn" class="btn btn-dark mt-3" style="font-family: 'NanumSquare';">등록하기</button>
                <button type="button" id="cancelbtn" class="btn btn-outline-dark mt-3" style="font-family: 'NanumSquare';">취소</button>
            </form>
        </div>
</body>

</html>

데이터가 잘 들어가도록 설정되었는지 확인해보기 위해서 내 Firestore와 연결해서 테스트 해보았다.

데이터가 잘 들어간 것을 확인할 수 있다.

4. 해결되지 않은 문제

튜터님께서 공통적인 부분(header)는 html 파일로 따로 뺀 다음 include 하면 된다고 하셔서 방법을 찾고 있는데, 아직까지 방법을 찾지 못했다.

firestore를 연동하면 <script type="module"> 로 설정해주어야되는데, script type이 module이 되면 이벤트들이 제대로 실행되지 않아서 $(document).ready(function(){ }); 을 사용할 수 없게 된다.

fetch를 사용하면 해결할 수 있다는 글을 보았는데 아직 성공하지 못했다.

(참고한 블로그)

JavaScript / fetch() 로 html include 하기

이전에 php로 include 하여 html을 불러와 사용해보았다. (무료) 이번에는 깃헙페이지에 배포를 하려하는데 php는 지원을 하지 않는다고 한다. 그래서 헤더와 풋터를 자바스크립트 fetch()로 불러왔다.

92yeol.tistory.com

저작자표시 비영리

'스파르타 내일배움캠프 > TIL(Today I learned)' 카테고리의 다른 글

25.02.20 TIL - 웹개발 미니 프로젝트(3) (0)	2025.02.20
25.02.19 TIL - 웹개발 미니 프로젝트(2) (1)	2025.02.19
25.02.17 TIL - Git & Github (0)	2025.02.17
25.02.14 사전캠프 TIL - SQL JOIN문 (0)	2025.02.14
25.02.14 사전캠프 TIL - SQL 조건문 (1)	2025.02.14

하나씩 차근차근

25.02.18 TIL - 웹개발 미니 프로젝트(1)

1. 와이어프레임

2. header, navbar 구현

3. 인적사항 등록 페이지

4. 해결되지 않은 문제

'스파르타 내일배움캠프 > TIL(Today I learned)' 카테고리의 다른 글

티스토리툴바

25.02.18 TIL - 웹개발 미니 프로젝트(1)

1. 와이어프레임

2. header, navbar 구현

3. 인적사항 등록 페이지

4. 해결되지 않은 문제

'스파르타 내일배움캠프 > TIL(Today I learned)' 카테고리의 다른 글

관련글

티스토리툴바