의문을 가지는 습관

이미지 위에 어두운 배경컬러를 넣었는데 이상하게도 이미지요소 아래로 5px만큼의 여백이 생기는 걸 발견했다. 따로 여백을 주지 않았기에 이게 무엇이지. height가 왜 5px만큼 늘어난걸까 멈춰서 생각했다. 왜 그런지는 모르겠지만 뭐 손쉽게 해결하자면 하드코딩으로 height:100%를 height:98%를 살짝 조정해주면 됐다. 그렇지만 나중에 이 코드를 수정할 때면 height:98%을 이해 못하겠지. 라는 마음이 들어 이런 저런 시도를 하다 display:block을 적용하니 해결되었다. 해결은 했지만 왜 이런 이미지 요소 밑에 여백이 생기는지에 대한 이유는 알 수가 없었다. 다른 작업을 하다가 한 번씩 다시 검색해봤는데 드디어 발견했다!! 이미지 요소가 baseline기준으로 배치되는 inline요소이기 때문에 기준선 밑으로 내려가는 글자들을 위해 생긴 여백이었다. 이유를 알게 되니 나의 해결방법이 왜 통했는지도 이해가 되어서 기뻤다. 다음에 작업하다 같은 상황을 만나도 잘 해결할 수 있을 것 같다.

애니메이션 끙끙

애니메이션 개념을 아는 것과 적용하는 건 다른 이야기다. 그리고 적용된 애니메이션을 스무스하게 만드는 건 또 다른 일이다. 아무래도 지금 컴포넌트 스타일 구조가 복잡해서 코드 가독성이 떨어지니 스타일 적용, 수정하기가 번거로운 부분이 있다. 내일 작업할 때 리팩토링을 진행해서 컴포넌트 가독성을 높인 다음에 애니메이션을 다시 적용해봐야겠다.