제작기
CSS에는 수많은 속성들이 존재한다. 가끔은 아주 기초적인 것조차 기억이 나질 않아 구글링을 한다고 시간을 허비하곤 하는데, 필요할 때마다 구글링 하지 않고 바로바로 검색해서 간단한 핵심설명만 보면 이해가 되려니 싶어 검색할 수 있는 웹사이트를 만들어보았다.
디자인
디자인을 뛰어나게 잘하지는 못하지만 여러가지 디테일을 살려보고자 노력했다.
- 남성스러움을 강조하는 핑크색 배경
- 어디서 본듯한 노란색과 보라색 폰트의 조합
- 말해주지않으면 알 수 없을 것만 같은 그림자효과
코딩은 물론이거니와 미적인 부분은 수련이 아주 많이 필요해 보인다. 구상을 멋지게 해도 그걸 차마 구현해 낼 수 없는 코딩실력으로는 미적인 부분은 꿈도 꿀 수 없으려니..
지옥
CSS 속성들의 설명을 찾고 손으로 하나하나 써 내려가기 시작했을 때 무언가 잘못됐음을 깨달았다.
"이거 끝나긴 하는 걸까"
그래도 끝나긴 하더라
핵심 기능
01. 총 개수
const searchList = document.querySelectorAll(".search__list li");
document.querySelector(".search__info span").textContent = serchList.length;위 코드로 serch__list 안에 있는 li의 개수를 span에 텍스트로 표현할 수 있었다.
02. 검색
const searchBox = document.querySelector(".search__box input");
searchBox.addEventListener("keyup", () => {
const userWord = searchBox.value;
serchList.forEach(el => {
const cssName = el.dataset.name;
if(cssName.indexOf(userWord)){
el.classList.add("hide");
} else {
el.classList.remove("hide");
}
})
});사용자가 검색어를 입력할 때마다 해당 검색어와 일치하는 항목들을 보여주고, 일치하지 않는 항목들은 감추는 검색기능을 구현해 보았다.
느낀 점
- JS보단 CSS를 작성하는 것에 조금 더 신경을 쓰게 된 것 같다.
- 적은 분량의 JS로 마무리하기엔 아쉽다 보니 CSS를 이것저것 추가하는 과정에서 디자인이 산으로 간듯한 느낌이다.
- 216개의 CSS속성들을 일일이 찾아보고 손으로 작성하는 과정에서 수십 번은 "그냥 하지 말까..!?", "주제를 바꿀까..?" 생각하곤 했지만, 돌이켜 보니 꽤 괜찮은 경험이었다. 생소할법한 CSS속성을 마주쳐도 완벽히 이해를 하진 못해도 아얘 낯설지는 않은 그런 긍정적인 효과를 가져다주었다.
- 1년 뒤, 2년 뒤, 더 공부하고 성장했을 때 같은 주제로 같은 기능을 가진 웹사이트를 만들어본다면 얼마나 다를지, 만들면서도 기대가 됐다.
댓글