➕ 레이아웃 리팩토링
매우 비효율적인 방법을 사용하고 있던 diary, note, music, design의 레이아웃을 모두 리팩토링했다.
✔ 문제점
기존에는 middle 섹션을 각각 middle1, 2, 3로 나누고 width: 33%를 할당하는 방식으로 단락을 나눴다. 하지만 node.js를 이용해서 readdir과 readFile을 통해 자동으로 저장된 데이터를 불러와 디스플레이하는 방식을 사용하기에 불편하였다.
✔ 해결방안
-
핀터레스트 스타일 레이아웃을 생각했고, 구글링을 통해 관련 자료를 찾을 수 있었다.
-
middle안에 새로운div인three를 만든 뒤, CSS의column-width와column-gap을 이용해 문단을 나누어 주었다.
.three{
column-width:270px;
column-gap: 15px;
...
}- 그 후, 각 게시물들은
imgBlock이라는div로 묶어주었고,inline-block으로 처리해 주었다.
.imgBlock{
display: inline-block;
...
}imgBlock속 이미지들은width: 100%로 설정해, 크기가 자유자재로 바뀔 수 있도록 했다.
.imgBlock img{
width: 100%;
...
}✔ 한계점
imgBlock속 이미지들을 핸들링 하는데에 있어서, width: 100%로 설정할 경우에, 각자의 크기에서 100%로 디스플레이를 하므로 이미지들의 크기가 다르다면 다르게 디스플레이 되는 모습을 볼 수 있었다. 이미지들의 크기가 달라도 일괄적으로 이미지의 크기를 디스플레이시에 결정할 수 있는 방법이 없을까?
✔ 개선방안
갑자기 생각났는데, 각 이미지들을 새로운 div로 묶고, 그 div의 width: 100%로, 그리고 이미지의 width 또한 100%로 설정하면 될까?
-> div로 묶을 필요 없이, 이미 묶여있는 imgBlock을 width: 100%로 설정해주니 바로 해결되는 모습이다.
➕ 이미지 리팩토링
메인 디렉토리에 중구난방 존재하던 이미지들을 img 폴더로 theme마다 묶어서 정리했다 (normal과 wave만 존재하긴 하지만...) 훨씬 더 정돈된 작업을 할 수 있을 듯
👍 참고 사이트
