06 - Type Ahead

개요

 

특정 단어를 포함하는 도시명,  주명을 아래에 리스트로 보여준다.

 

 

style.css

 

	z-index   - 정수값이며 (= 음수, 0, 양수) - 여럿을 겹치게 놓을 수 있으며 - 클 수록 앞에 놓이게 된다. → 소스에서는 여기에만 쓰이며, 다른 녀석들보다는 항상 위에 두겠다는 것이다.
	검색된 값이 아코디언처럼  보이게 해주는 부분이다.   1) even, odd 로 표현할 수 있는 것이 재미있다. - 자연어에 점점 가까워지는 프로그래밍 언어이다.   2) 각도를 각각 3, -3씩 돌리고, 그에 따라 비어지는 공백을 y 좌표를 조금 내리면서 해결한게 아닐까 싶다. scale 역시 좀더 자연스럽게 보이게 값을 넣어가면서 조절한 것일듯 → 실제 값을 변화시켜가며 확인해보면 될듯 하다.
	1) 아무것도 안먹였을때   2)  rotateX(-10deg)   3) rotateX(-10deg) translate(10px)
	1) 2, 3번째 li 를 추가하고, even 에 아무것도 안했을때                       2) 기울여주고, y 축을 조절한다음, 크기까지 조절한 결과 - 임의로 translateY(), scale() 값을 조절하여  맞췄다.   transform: perspective(100px) rotateX(10deg) translateY(5.7px) scale(0.97);   물론  강좌의 설정이 더 보기 좋지만 연습삼아 한 것임

 

index-START.html

 

딱히 특별한 것은 없다.

 

	검색철자를 넣을 부분과 아래의 리스트 부분이다.
	인터넷에서 가져올 정보이다. 아래와 같이 도시와, 주, 그리고 위치와 인구 정보 등이 들어있다.

 

 

index-FINISHED.html

 

1) 인터넷 상의 값을 fetch() 로 가져와서 cities[] 에 넣어준다. - const 에도  값을 넣어줄 수 있다. push() 를 이용하자. - fetch() 의 리턴값인 promise 를 이용한다.   2) findMatches() 는 맞는 object 들을 추려낸다. - regex 를 만족하는 도시, 주 이름을 가진 경우만 리턴하게 하는 것이다.   3) numberWithCommas() 는 3자리마다 comma 를 찍어주게 하는 것 - 이정도는 구글링으로 찾아 복붙하는게 맞다. - 일일이 정규식의 의미를 들여다 볼 필요는 없을 것이다.   4) displayMatches() - 우선 findMatches 를 통해 맞는 리스트를 확보한다. - 그리고 화면에 뿌려줄 html 을 만들어준다. - replace  를 통해 검색철자를 다르게 보여주는 부분에 주목 - 리턴값이 html 들의 리스트이고, 그걸 join 으로 하나로 묶어준다.   - 그리고 suggestions.innerHTML 이 의미심장한데     를 보면 해당 class 안을 통째로 바꿔 넣어주라는 의미로 이해했다.   5) 그리고 이벤트 리스너를 설정해주면 된다.