21.09.09

학습내용

9월 6일부터 팀 프로젝트에 들어갔다. 일지 작성은 각 팀별 보고서 제출로 대체하기 때문에 하지 않는다고 했다. 하지만 6일부터 오늘까진 스쿨 측에서 업체와의 조율을 하느라 대부분 자습을 했다. 그 시간 동안 어제까지 쭉 js 강의를 복습하거나 sk 사이트를 고쳤기 때문에 오늘은 따로 일지를 작성해본다.

오늘은 저번에 만들던 sk 그룹 사이트를 이어서 만들었다.

사실 디자인이나 css는 며칠 사이에 완성했지만 js 적용이 안돼서 계속 그걸 혼자 해결해본다고 오래걸렸다. 겨우 header부분만 js 효과를 만들었다.

디자인 영역에서 가장 어려웠던 것은 단언컨대 header영역,
두번째로는 이미지를 넣는 법이었다.

▶ css

header 영역

첫째로는 li태그를 수평정렬하는 문제였고 두번째로는 position 문제였다.

며칠 전 일이라 정확하게 기억이 안나는데 li 태그에 flex를 적용해두고 다른 곳에 뭔가를 적용해서 수평이 안먹히는 상태였다. 그래서 inline-block으로 해야하나 싶어서 적용했는데 이미 플렉스를 적어둔 거라 계속 오류가 떴다. 다행히 중간에 이상하게 적용한 건 지웠으나 display를 충돌시키게 했으니 원하는 대로 작동할 리가 없었다. 개발자도구로 오류가 뭔지 계속 고민하다가 display는 이미 flex라는 걸 깨닫고 inline-block을 지우니까 정상 작동했다.

position은 중간 과정이 많았으나 생략하자면 흰색 내비와 빨간 내비가 둘 다 fixed라 형제 간의 겹침 현상이 발생했다. 빨간 내비의 top 값을 흰색 내비의 높이만큼 해주면 해결되는 간단한 문제였다. 많이 헤매긴 했지만 말이다.

추가로 z-index를 바로 기억 못 해서 다시 개념을 봤다.

이미지 영역

백그라운드 이미지로 넣을지 html에서 src로 넣을지 잠깐 고민하고 html 속성값으로 골랐다. 이전에 수업 때 배운 실습에선 백그라운드 이미지를 써서 background-size: cover;를 이용해 사진을 알맞게 정렬했었다. 그러나 이번에 혼자 할 땐 백그라운드가 아니기 때문에 구글링에서 맞는 속성과 속성값을 찾아 적용해야했다.

동일한 속성값은 object-fit: cover;이다. 헌데 원하는 위치로 이미지 삽입이 안돼서 한참을 헤맸다. 부모, 자식 태그의 가로, 높이값 설정이 중요하다는 것을 여기서 깨달았다. 또한 object-position 값을 잘 조정해주니 원하는 위치대로 삽입을 했다.

▶ 자바스크립트

header 영역

처음엔 흰색 내비만 보이다가 스크롤을 내리면 흰색 내비는 사라지고 빨간 내비만 보인다. 다시 스크롤을 올리면 흰색, 빨간 내비가 둘 다 보이다가 맨위에 도착하면 흰색만 보인다.

이 기능을 따라하려고 몇 날 며칠을 머리를 싸매도 답이 안나왔다.

해결을 위해 fixed header on scroll를 검색했다. 여러 페이지가 나왔지만 거기서 알려주는 방법을 이해하기엔 아직 내 수준이 따라가질 못 했다. 때문에 수업에서 알려준 방법을 이용하기로 했다.

처음 설명을 들을 땐 그냥 어려웠으나 다시 들으니 조금은 이해가 되었다. 한참을 고치고 고치다가 스크롤을 내릴때와 올릴 때의 코드는 완성했다.

var fixedWhiteNav = document.querySelector('.header-inner')
var fixedRedNav = document.querySelector('.red-menu')

var oldVal = 0;

window.addEventListener('scroll', function() {
	var newVal = window.scrollY 
				|| window.pageYOffset 
				|| document.documentElement.scrollTop 
				|| document.body.scrollTop

	if(oldVal - newVal < 0) {
		fixedWhiteNav.classList.add("active");
		fixedRedNav.classList.add("on");
	}

	if(oldVal - newVal > 0) {
		fixedWhiteNav.classList.remove("active");
		fixedRedNav.classList.remove("on");
	}
	oldVal = newVal;
})

그렇지만 스크롤이 맨위에 있을 때 빨간 내비를 없애는 법을 몰랐다. (newVal = 0)라고 적어도 먹히질 않았다. 결국 질문을 통해 해결했다. (newVal === 0)라고 썼어야 했다. 아래에 새로운 if문을 추가했다.

var fixedWhiteNav = document.querySelector('.header-inner')
var fixedRedNav = document.querySelector('.red-menu')

var oldVal = 0;

window.addEventListener('scroll', function() {
	var newVal = window.scrollY 
				|| window.pageYOffset 
				|| document.documentElement.scrollTop 
				|| document.body.scrollTop

	if(oldVal - newVal < 0) {
		fixedWhiteNav.classList.add("active");
		fixedRedNav.classList.add("on");
	}

	if(oldVal - newVal > 0) {
		fixedWhiteNav.classList.remove("active");
		fixedRedNav.classList.remove("on");
	}

	if (newVal === 0) {
		fixedRedNav.classList.add("on");
	}
  
	oldVal = newVal;
})

이렇게 하니 실제 sk 사이트와 유사한 효과가 적용됐다. 정말 기쁜 순간이었다.

어려운 내용

1. 헤더부분에 흰색 내비와 빨간 내비가 자꾸 꼬여서 position을 적용하는데 엄청 오래 걸렸다. 특히 fixed를 적용하니 빨간 내비가 형제간 겹침 현상으로 난리가 났다.

2. 헤더 부분 자바스크립트 : 여러가지 문제가 있었으나 스크롤이 맨위에 있을 때 빨간 내비를 없애는 법이 가장 어려웠다.

해결 방법

1. 흰색 내비와 빨간 내비 영역이 둘 다 fixed인 상태였다. 겹쳐지니까 멘붕이 와서 당장 해결방법이 생각나지 않았으나 조금 고민하니 빨간 내비의 top을 흰색 내비 높이만큼 설정하면 되는 문제였다. 그렇게 하니까 해결됐다.

2. 질문을 통해 해결했다. if 조건을 쓸 때 (newVal === 0)라고 써야할 걸 (newVal = 0)라고 쓴 게 화근이었다. 부등호 때문에 이콜을 =으로 생각한 것이다.
   =은 값을 넣는 데에만 쓰니 연산자로 쓰지 말라는 답변이었다. 컴퓨터 세상에서 이콜은 무조건 ==이다.

느낀 점

열심히 배울 땐 알 것 같다가 혼자서 하니까 머리에 든 게 없는 것 같아서 괴로웠다. 그래도 결국 해결해서 뿌듯하다. 특히 문제가 생긴 걸 한참을 고친 거라 나중에도 잊지 않을 것 같다. 문제 해결 방법을 하나 배운 거라고 생각한다.

낮까지만 해도 머리가 터질 것 같았는데 해결하니까 편히 잘 수 있겠다.