201226 잡다한 제작일지

블로그

검색 취소 버튼 & 햄버거 버튼

검색 취소 버튼도 햄버거 버튼과 똑같은 스타일을 적용해, 통일감을 높였습니다.

또한, 버튼이 화살표로 변경됐을 때 1px 정도 오차가 있길래 수정했습니다.
몇몇 브라우저에선 1px이 어긋나니 뭔가 이상한 게 눈에 보일 정도로 뒤틀리더라고요.

페이지네이션 버튼

4페이지 이상(1페이지 버튼이 안 보이는 상황)에선 첫 페이지로 가는 버튼을 추가하고, 마지막 페이지 버튼이 안 보이는 상황에선 마지막 페이지로 가는 버튼을 추가했습니다.

처음에 infinite scroll에서 페이지네이션으로 넘어올 땐 좀 회의적이었는데, 확실히 원하는 구역으로 갈 땐 편하고, 페이지가 많이 쌓여도 기기에 큰 부담도 없어서 좋긴 하네요.

로고 업데이트

좌우대칭을 완벽하게 맞추고, 모서리를 조금 더 각지게 수정했습니다.
또한 파비콘처럼 아이콘이 작아졌을 때도 형태가 일그러지지 않도록 좌측 끝과 우측 끝의 선을 조금 더 두껍게 변경했습니다.

manifest.json 업데이트

PWA의 Manifest 작성하기를 적으며 제 manifest.json도 업데이트를 좀 해봤습니다.
shortcuts도 추가하고, categories 등도 추가해봤는데, categories, lang 같은 건 솔직히 크게 의미가 있나 싶긴 하네요.

`<article>`

<article class="indexArticle reveal" style="top: 50px; left: 10px">
    <a
        href="https://marshallku.com/dev/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%eb%8c%93%ea%b8%80-%ed%85%9c%ed%94%8c%eb%a6%bf-%eb%a7%8c%eb%93%a4%ea%b8%b0"
    >
        <figure class="thumbnail_wrapper">
            <img
                class="index_thumbnail"
                src="https://i1.marshallku.com/wp-content/uploads/2020/12/댓글-템플릿-제작하기-400x400.png"
                alt="워드프레스 댓글 템플릿 만들기"
            />
        </figure>
        <header class="index_information">
            <h2 class="title">워드프레스 댓글 템플릿 만들기</h2>
            <p class="desc">wp_list_comments의 html 구조를 변경하는 방법</p>
            <time class="date" datetime="2020-12-20 00:32">6일 전</time>
        </header>
    </a>
</article>