XE 레이아웃 수정 시 상단 여백 생길 때

XE 레이아웃 작업을 하다보면 코드상에는 전혀 문제가 없음에도 불구하고 상단에 여백이 생겨 짜증을 유발하는 경우가 있다.

이 경우 살펴봐야할 것은 현재 작업중인 파일이 UTF-8 with BOM(Byte-Order)로 저장되어 있는지 확인 해 봐야 한다.

정확히는 XE의 문제가 아니라 "UTF-8/BOM 타입 파일에는 파일 헤더에 공백을 생성할 수 있는 코드가 탑재되어 있어 알수 없는 공백이 생기는 문제가 생길 수 있다." 라며 구글신이 알려주었다.

결국 해결 방법은 UTF-8/BOM 타입 파일을 UTF-8 no BOM으로 저장을 해주면 끝!

참고로 이번에 내가 이 문제를 접한 이유는 과거 작업했던 파일을 재 사용함에 따라 에디터가 자동으로 UTF-8/BOM으로 저장 했기 때문이다.

UTF-8 with BOM / UTF-8 no BOM 차이

UTF-8 with BOM 파일의 경우 css에서 적용하지 않은 = 의도치 않은 공백이 삽입되어 있으나, UTF-8 no BOM의 경우 공백이 사라진 것을 볼 수 있다.

울트라 에디트의 경우 Save AS항목에서 UTF-8 no BOM을 선택하면 BOM이 제거 된다.