hail2y.log

여러 도서사이트를 보면 헤더 아래 슬라이더를 구현해 요즘 일어나는 일에 대해서 소개한다. 살펴보니 db에서 가져오는 정보도 있지만 배경을 입히고 그림을 넣어 화려함을 줄 때는 대부분 이미지였다. 팀에서 화면 정의서를 만들 때 슬라이더 아래 주간 랭킹을 두었기 때문에 비슷한 형식을 슬라이더에도 지정하면 메인 홈페이지가 너무 밋밋해질 것이라 우려했다. 그래서 이번 기회에 figma로 이미지 슬라이드를 개별 작업하여 진행했다.  화면 정의서에서는 신간 도서만 다루었지만 이벤트, 회원 혜택, 신간 도서, 추천 카테고리 등 새로운 소식들을 추가했다. 슬라이더는 처음부터  js를 당장 배우고 시작할 수 없어서 기존에 구현되어 있는 slider를 변형하고 이해하는 쪽을 택했다. 중간중간 명확하게 이해해야 할 부분은 ..

Layout1. block항상 새로운 라인에서 시작폭 전체 차지 2. inline 새로운 라인에서 시작하지 않고 필요한 만큼의 영역 차지 3. inline-blockdisplay: inline으로 하면 폭, 높이, 마진 균일하지 않음display:inline-block으로 하면 균일한 폭, 높이로 맞출 수 있음4. flexflexible items에 flexible length 지정flexible item이 아니라면 flex 속성 효과 없음가로/세로 정렬을 쉽게 조정할 수 있는 layout 시스템부모 요소(컨테이너)에 display: flex를 적용하면 그 안의 자식 요소(item)들이 flex 규칙에 따라 배치됨flex-direction: row, column을 활용해 정렬 방향 결정, 기본이 row..

홈페이지의 네비게이션 메뉴를 구현해야 하는데 대/중/소별 카테고리가 다 분리되어 있고, 검색바를 통한 도서 리스트 출력도 해야 해서... 머리가 너무 너무 복잡했었다. 내 자신의 능력을 하찮게 여기고 싶지 않았지만 같은 팀원 분들이 빨리 빨리 결과물을 내는 것을 보고 자꾸만 불안감이 밀려왔다.  할 수 있다고 마음을 500번 되뇌이고 일단은 메모장에 해야하는 것들을 적어두었다. 검색바 옵션(통합검색, 저자명, 도서명) 넘기기카테고리 id (ex. cs_1, cs_2, ...) 넘기기궁극적으로 필요한 정보는 다음과 같다.도서 리스트에서 해당 조건에서의 도서 개수해당 조건에 맞는 도서 리스트우리는 하나의 도서가 하나의 소분류와 연결되어서 전체 카테고리 경로를 확인하려면 소-중, 중-대로 타고 올라가야 했는데..

다른 팀원 분이 거의 작업하신 프론트 화면을 수정하여 네비게이션 메뉴를 구현했다. 아직 세부 메뉴 클릭 시 화면 이동하는 것까지는 구현 안 했지만, js를 이용해 화면 겹치기를 성공했다는 게 뿌듯했다. 프론트에서 정렬과 화면 겹치기는 수업을 들어도 잘 이해가 안 됐기 때문에 마음 속으로 '할 수 있다'를 수 십번 외치면서 해나갔다.  겹치기는 위에 겹치는 부분을 따로 만들고 아래 위 position 속성을 조정한다.부모는 relative, 자식은 absolutedisplay: none과 visibility: hidden의 차이는 공간을 차이하는지의 여부로 다르다. 전자는 공간을 차지하지 않고 후자는 눈에는 안 보일 뿐 자리차지를 한다.git으로 공동 작업하고 있었기 때문에 복잡도를 낮추려고 w3schoo..