[🥸HTML/CSS]📝랜딩페이지 좌우 여백, 헤더 고정, 스크롤 탑 버튼➰(반응형 웹페이지)

📍 진행상황

🧷 랜딩페이지 헤더와 메인 페이지 👉🏻 4of7 진행 완료
◾ 미디어 속성 이용하여 모바일 버전 화면 작업 👉🏻 글꼴 크기, 간격 세부 작업 미진행
◾ 반응형 웹을 위한 컨테이너 max-width 속성 적용시 오류 해결
◾ 첫 번째 섹션의 레이아웃에 overflow 속성 적용하여 이미지 하단 자르기 완료
◾ 갤러리 형태의 여러 이미지 flex → grid 레이아웃 변경
◾ 헤더 고정과 스크롤 탑 버튼 구현 완료

---

📌 개발 완료 부분 시연 영상

---

📁 컨테이너를 활용한 페이지 좌우 여백

왼: 화면이 늘어남에 따라 텍스트와 이미지 사이의 여백이 계속 늘어나는 현상 발생 / 오: 해결

 

이전 게시글을 보면 반응형 웹이 왼쪽 이미지처럼 막 늘어나도 되는건지 의문을 가졌었는데요.

여러 홈페이지를 서치해보니 단순히 제가 잘못 만든 부분이라는 것을 알게 되었습니다.

---

---

반응형 웹 페이지는 여백은 늘어나되 콘텐츠 부분은 너무 많이 늘어나면 안된다고 합니다.

따라서 `margin`을 이용한 컨테이너를 만들어 HTML에 <div>로 묶어주어 위와 같은 현상을 해결했습니다.

또한 콘텐츠가 일정 너비 이상으로 확장되지 않도록 `max-width` 값을 주었습니다.

 

🧷 컨테이너 예제

.container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
}

---

📁 갤러리 형태의 이미지 배치

💭 Flex, Grid 중에 어떤 것을 선택할까?

3*2 배열로 이미지를 배치 후 미디어 쿼리를 이용하여 일렬로 배치되게끔 화면을 구현하고 싶었습니다.

원래는 Flex 레이아웃을 사용하려고 하였으나 조금 더 간편하게 코드를 구성할 수는 없을까 고민하다가

그리드의 repeat() 함수를 쓰면 열과 행을 반복적으로 설정할 수 있어서 이걸로 채택하였습니다.

 

🧷 갤러리 이미지 모음 구현 코드

.container {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 이미지 가로 3개씩 배치 */
      gap: 72px;
    }

 @media (max-width: 768px) {
 .container {
	grid-template-columns: 1fr; /* 일렬 배치 */
    gap: 32px;
}

 

코드가 간결하고 어떤 의도로 썼는지 한 눈에 보이시지 않나요?

여기서 놀라운 점은 2행은 따로 추가하지 않아도

HTML에 이미지를 넣어주면 자동으로 행이 추가 된다는 점입니다!

❗Flex 레이아웃에서는 자동으로 행이 추가되지 않아 열을 지정해준 후 컨테이너에 wrap을 이용 해주어야합니다.

말로만 들어도 너무 복잡하기 때문에 넘어가겠습니다.

⭐ 코드리뷰➰헤더 고정, 스크롤 탑 버튼

✏️ 요구사항

1️⃣ 헤더 고정
◾ 스크롤시 헤더가 고정(단, 처음에는 고정된 상태❌)

2️⃣ 스크롤 탑 버튼
◾ 스크롤 탑 버튼은 스크롤시 나타납니다.
◾ 스크롤 탑 버튼은 푸터 아래로 내려가지 않습니다.
◾ 스크롤 탑 버튼을 누르면 스크롤이 최상단으로 올라갑니다. (단, 부드럽게 올라가야 합니다.)

 

✅ 헤더 고정

`position` 속성에서 `sticky` 를 이용하여 일정 수준으로 스크롤하면 고정되도록합니다.

반대로 `fixed`는 스크롤에 영향을 받지 않고 무조건적으로 특정 위치에 헤더를 고정시키는 방식입니다.

✍🏻요구사항을 살펴보면 처음에는 헤더가 고정되지 않아야 하며

스크롤한 다음 바로 고정되는 형식으로 구현을 해야되는데요.

 

🧷 헤더(메뉴) 고정 구현 코드

/* CSS */
<style>
.sticky{
	position: sticky;
	top: 0;
}
</style>

/* JavaScript */
<script>
window.addEventListener('scroll', () => {
    const header = document.querySelector('header');
    if (window.scrollY > 102) { // 스크롤 값이 헤더 높이 102px을 초과할 경우
         header.classList.add('sticky'); // 헤더에 sticky 클래스 추가
    } else {
        header.classList.remove('sticky'); // 헤더에 sticky 클래스 제거
    }
});
</script>

 

✅ 스크롤 탑 버튼

처음에는 `if ~ else` 문으로 스크롤 값을 체크함에 따라 버튼의 활성화 여부를 주었는데요.

else 문을 삭제해도 무방하지만 코드를 세밀하게 작성하기 위해서는 다 써주는 것이 좋습니다.

if (scrollLength > 100) {
	scrollTopButton.classList.add('active'); // 스크롤값 100px 초과시 버튼 활성화
} else {
	scrollTopButton.classList.remove('active'); // 스크롤값 100px 이하시 버튼 비활성화
}

 

여기서 중점은 스크롤 할 때마다 값이 누적되는 게 아니고 실시간 업데이트된다는 점입니다!

보통 한 번 스크롤 할 때 100px이 넘어가니까 초기상태에는 스크롤 버튼이 비활성되고,

이후로 계속 버튼이 활성화 되는 것처럼 보이는 겁니다.

 

코드가 간결했으면 해서 if ~ else 문을 `toggle( )` 메서드로 수정해주었습니다.

👉🏻 toggle(클래스이름, true/false)

`true`일 때 클래스 추가되고 `false`인 경우 클래스 제거

이렇게 하면 조건에 따라 클래스를 추가하고 제거할 수 있습니다.

 

`scrollTo( )`는 자바스크립트의 내장 메서드로 페이지를 특정 위치로 스크롤하여 이동합니다.

top 값이 0이니까 최상단으로 스크롤할 수 있는 것이고,

반대로 최하단으로 스크롤하려면 페이지 전체 높이인 `document.body.scrollHeight`를 써주면 됩니다.

 

🧷 스크롤 탑 버튼 구현 코드

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const scrollTopButton = document.getElementById('scrollTopButton');
		
        // 스크롤 값 100px이 넘어가면 버튼이 보이도록 활성화(초기에는 비활성화)
        const checkActive = () => {
            scrollTopButton.classList.toggle('active', window.scrollY > 100);
        };

        window.addEventListener('scroll', checkActive);
        // 스크롤탑 버튼 클릭시 최상단 이동
        scrollTopButton.addEventListener('click', () => {
            window.scrollTo({ top: 0, behavior: 'smooth' });// 스크롤 애니메이션 처리
        });

        checkActive();
    });
</script>

 

---

📝 10일차 부트캠프 회고

1️⃣ 잘했던 점
순서를 조금 뒤죽박죽 개발을 하긴 했는데 자바스크립트 코드리뷰할 때 뭔가 하나씩 뜯어보는 재미가 있는 것 같았습니다. 또한 에러가 있었던 부분도 해결이 될 때 쾌감이 잊혀지지 않습니다! 수업시간에 배운 것도 최대한 활용해보고 배우지 않았던 내용도 공부하면서 적용해보았던 점이 새로운 걸 더 많이 알아가는 느낌이라 흥미로웠습니다.

2️⃣ 부족했던 점
미디어 쿼리를 이용해 모바일 버전 화면에서 글꼴 정렬, 크기 등을 보완해야겠다고 느꼈습니다. 전체적인 레이아웃은 구현했는데 세부적인 개발 내용은 부족하다고 생각이 됩니다.

3️⃣ 향후 개선 방향
사소한 디테일도 피그마와 최대한 동일하게 만들어볼 것!