※ TIP 무료 이미지 다운로드 사이트: pixabay, unsplash
푸터 영역의 span태그 사이에 공백이 있어서, before로 만든 바가 중앙 정렬이 안 되는 게 신경쓰였다.
검색해보니 html문서 안에서 span태그 사이의 줄바꿈을 공백으로 인식해서 생기는 문제라고 하는데, 해결방법은 여러가지가 있었다.
1. html문서 안에서 span태그를 다 붙여서 작성
2. html문서 안에서 span태그 사이에 주석을 붙여서 작성
3. span태그를 감싸는 부모 태그에 font-size의 값을 0으로 주기
4. span태그의 margin-right의 값을 -4로 주기(※공백이 4px이기 때문에)
이전에 멘토님이 알려주셨던 방법과 같은 방법(3번)으로더 해결이 된다는 걸 알게되어 그 방법으로 정렬했다.
여러가지 class를 미리 만들어두고 필요한 게 있으면 그때그때 덧붙여 쓰는 방법이 편하긴 한데, 그런 class들도 많아지기 시작하면 헷갈릴 것 같아서 그런 것들을 잘, 알아보기 쉽게 정리하는 요령은 뭐가 있을지 고민하게 된다.