모바일 스마트디자인 편집창에서 전체화면보기 탭 클릭하여
레이아웃 > 기본레이아웃 > 공통레이아웃에서 수정합니다.

화면보기에서 보이는 로고에 마우스를 오버하면 편집버튼이 나타납니다.



속성에서 이미지를 교체할 수 있습니다.
모바일에서 실제 보여지길 원하는 사이즈보다 이미지를 크게 제작해야 선명하게 보입니다.
이미지는 여백없이 잘라 올려주시고 여백은 css에서 수정합니다.



사이즈와 여백 조정을 위해 전체화면보기 > 레이아웃 > css >layout.css 혹은 공통레이아웃.html 페이지의 최상단에서
layout.css 주석을 찾아 ‘파일열기’로 스타일시트로 이동합니다.



layout.css 페이지에서 h1이 로고 영역의 스타일입니다.
height은 로고 영역의 높이, line-height은 로고글자 또는 이미지의 줄간격, paddig은 로고영역 안쪽의 여백,
text-align:center는 중앙정렬입니다.
위 그림의 예시는 로고영역을 80px로 고정하였고, padding-top으로 로고 이미지 위쪽에 여백을 주어
로고가 더 아래로 내려오게 설정하였습니다. line-height 또한 로고이미지의 위 아래 위치를 조정할 수 있습니다.

h1 img 는 로고이미지에 적용되는 스타일입니다.
max-height은 모바일 해상도에 따라 이미지 크기가 달리 보이는데 최대 높이를 지정하여
일정 크기 이상으로 커지지 않도록 제한하는 것입니다.
이미지 형태에 따라 max-width로 넓이를 제한해주셔도 됩니다. 넓이나 높이 중 한 가지만 지정해주면
이미지의 비율은 변함없이 사이즈가 조정됩니다.

여러 모바일기기에서 확인해보시고 적절한 이미지 사이즈와 위치를 잡아주세요.