1주차 팀 프로젝트(3) 팀원소개페이지 제작하기. 2024_08_29

SJ.CHO·2024년 8월 29일

CSS html js 팀과제 프로젝트

스파르타코딩클럽_Spring3기_본캠프

목록 보기

5/37

기능 추가사항

와이어 프레임 최적화
메뉴별 이동 내비게이션 추가
최상단 이동 버튼 추가

사용기술

HTML
CSS
JAVAScript

진행과정

1. 와이어 프레임이 너무 추상적이라 구체적 이미지로 재작업

2. 보여줄게 많다보니 아무래도 페이지 자체의 길이가 길어지고 문단별 분단상황이 너무 안보이는 이슈가 발생.

- 네비게이션 바를 추가해 직접 이동하는게 아닌 원하는 곳으로 이동할수 있게 기능을 구현.

3. 역으로 올라가는 기술 또한 같이 구현.

1.

처음에는 매니저분이 사용하신다는 피그마를 사용하려했으나 내생각대로 배치가 잘 안되서 그냥 파워포인트를 사용했다.

2, 3.

처음에는 a태그를 이용하려고 했으나 깔끔하지 않고 하이퍼텍스를 이용하기에 브라우저에서 자꾸 링크 형식의 글자로 나와서 버튼과 JS를 사용하기로 변경.

CSS
//smooth 는 부드럽게 스크롤 한다는 의미
html {
 scroll-behavior: smooth;
}
=================================================
html
<a href="#tab1"></a>
<div id="tab1"></div>

참조 :
https://amorweb.tistory.com/7
https://mjmjmj98.tistory.com/122

해당기능을 사용하더라도 작동의 결과물은 동일하다.

data-속성

사용자 지정데이터데이터 특성 이라는 특성클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM사이에서 환하는 방법중 하나이다.
간단히 이해하자면 데이터를 특정하여 그 데이터와 문법을 연결시킬때 사용한다고 생각하면 좋을거같다.

<div class="menu-bar">
        <nav class="navbar bg-body-tertiary">
            <form class="container-fluid justify-content-start">
                <button data-link="#miniinfo" class="btn btn-outline-dark" data-bs-toggle="button" type="button"
                    style="margin-right: 5px;">Member Information</button>
                <button data-link="#teaminfo" class="btn btn-outline-dark" type="button"
                    style="margin-right: 5px;margin-left: 5px;">Team Information</button>
                <button data-link="#goal" class="btn btn-outline-dark" type="button"
                    style="margin-right: 5px;margin-left: 5px;">Bootcamp Goals</button>
                <button data-link="#teamPromise" class="btn btn-outline-dark" type="button"
                    style="margin-right: 5px;margin-left: 5px;">Team Ground Rule</button>
                <button data-link="#comment-space" class="btn btn-outline-dark" type="button"
                    style="margin-left: 5px;">Guset Book</button>
            </form>
        </nav>
    </div>

data-'link' 라는곳에 해당 요소들의 ID들을 담아둔다.

const navbarMenu = document.querySelector('.menu-bar');
        navbarMenu.addEventListener('click', (event) => {

            const target = event.target;
            const link = target.dataset.link;

            console.log(event.target.dataset.link);
            if (link == null) {
                return;
            } else {
                const scroll = document.querySelector(link);
                scroll.scrollIntoView({ behavior: "smooth" }); //option으로 애니메이션을 smooth하게 만든다
            }
        });

이후 버튼을 클릭하면 dataset 안에있는 link의 id값을 리턴받고
scrollIntoView 속성을 통해 link안의 id값의 위치까지 스크롤링해준다. link 가 제대로 묶여있지않는 값은 무시.

참조 :
https://eunne.tistory.com/106
https://velog.io/@phrygia/2021-09-21-html-scroll

TOP 버튼 같은경우는 별도의 JS작업없이 html만으로 작업이가능하다.
앞에서 언급한 앵커 태그를 활용해서 작업을 실행하면되는데, 버튼을 이미지로 작업하면 깔끔하게 완료가 가능하다.

<div style="position: fixed; bottom: 20px; right: -410px; z-index: 5;">
        <a href="#mytitle"><img src="https://cdn-icons-png.flaticon.com/512/55/55008.png" style="width: 15%;"
                title="위로 가기"></a>