지난밤, 포스팅 직후에 해결되지 않는 문제를 해결하기 위해 몇 시간 동안 코드를 들여다 보고 구글링도 거친 끝에 텍스트가 가운데로 정렬 되지 않는 문제를 해결할 수 있었다.
문제점은 다음과 같았다.
- 텍스트 및 아이콘이 가운데로 정렬되지 않는 문제
문제 해결을 위한 대응
- text-align: center 명령을 통해 가운데로 정렬한다. = 실패.
- flex 명령을 통해 가운데로 정렬한다. = 실패.
- position 명령을 통해 가운데로 정렬한다. = 실패.
- transform 명령을 통해 가운데로 정렬한다. = 실패.
- 각 icon및 text에 span태그를 입힌 뒤 margin값을 할당해 강제로 간격을 띄운다. = px단위로 하나 하나 찍어보며 이동해야 하므로 효율도 나쁘고, 뭣보다 아이콘이나 텍스트가 바뀌면 다시 처음 부터 맞춰야 되는 상황이 발생해 실패.
이 밖에도 나름대로 머릿속에 떠오르는 다양한 방식의 대응을 해봤지만, 모두 작동하지 않거나 실패했다.
잠시 코딩을 접어두고 저녁식사를 하고 다시 코드를 보는 중, 말도 안되는 오류를 찾아낼 수 있었는데, 근본적으로 |div|를 사용해 영역을 나누지 않고 |div|를 사용했다고 생각한 부분이 모두 |dev|라는 말도 안되는 오타로 구성 돼 있었다.
이후 |div|로 모두 변경하고, 스타일 시트를 정비하고, 요소 별 스타일을 다시 정비하고 나니 거짓말 처럼 텍스트가 가운데로 정렬 되더라.
어떻게든 해결하고 나니 뿌듯한 마음 보다는 너무 간단하고 어이없는 실수에 헛웃음만 나왔다.
그렇게 자정을 조금 넘길 때 까지 다음 과정을 진행하고 현 상황을 기록으로 남겨둔다.
