CSS로 로고 정렬

사이트에서는 사이트 제목이 필요하고 그 옆에 붙는 것이 바로 로고이다.

흔히 로고와 사이트 제목의 간격과 라인을 잘 맞춰줘야 하는데, 본 작업은 여간 귀찮은 작업이 아니다.

나는 로고에 position: absolute; 로 설정해주고 top, left 속성을 조절하며 제목과 맞추었었는데,

최근 알아낸것이 로고의 position 속성을 absolute가 아닌 relative 로 설정해주고 top, left 속성을 부여해주는 방식이다.

내가 원래 썻던 방식은 로고의 상위 객체에 position: relative를 설정해주어야 하는 반면,

(absolute는 relative에 종속되니까 그렇습니다.)

처음부터 로고에 position: relative를 설정해주면 앞과같은 귀찮은 설정을 안 해도 top, left 로 쉽게 조정할 수 있었다.

(이렇게 간단한 방법을 몰랐었다니 ㅋ..)