XE 독학하기 그 8번째 걸음 -모바일 페이지 공사와 암초

안녕하세요?

지난 시간에는 XE에서 댓글알림이 제대로 되는 것 까지 보여드렸는데요. 우연히 모바일 페이지를 확인해 보니, 여기는 공사가 제대로 되지 않은 것을 확인할 수 있었습니다. 그래서 이번 포스팅에서는 모바일 페이지를 공사하고자 합니다.

위 스크린샷에서 우측 하단의 PC란 항목에서 알 수 있듯이, 모바일 홈페이지는 전혀 공사가 되지 않았습니다. 그래서 이 부분을 공사하기 위해서 먼저 페이지 수정을 누릅니다. 그리고 나서 기본적으로 있는 페이지는 삭제하고, 여기다가 최신 글을 보여주는 위젯을 설치합니다.

최신글과 인기글, 최신댓글이 보여지는 위쳇으로 보여지게 되었습니다. 하지만 이것만으로는 어딘가 허전하다는 느낌이 들기에, 어떻게 상당에 배경 이미지가 들어갈 수 있도록 만들어 보도록 해 보겠습니다.

우선 pixabay라는 곳에서 무료로 쓸 수 있는 사이트가 있는데, 여기서 보기 좋아 보이는 사진을 하나 골라서 가져옵니다.

우선 보기 상당히 좋아 보이는 석양이 지는 호수를 배경으로 한 사진을 가져옵니다. 다음으로는 이를 모바일 사이트에 올리기 위해서 페이지 수정을 누르고, 여기서 [내용 직접 추가] 버튼을 누릅니다.

마치 게시판에 직접 글을 쓸 수 있는 것 처럼 되어 있는 에디터가 뜨는데, 여기서다가 본문에 이미지를 삽입하는 방식으로 위에서 보았는 노을지는 배경의 호수를 올려봅니다.

이미지의 크기가 너무 커서 사진의 일부만 보이는 문제점이 노출이 되었습니다. 하는 수 없이 이번에는 그림의 사이즈를 줄이는 작업을 그림판에서 시행하여, 다시 그림을 업로드 해 보았습니다.

이번에는 첨부한 사진이 제대로 나오는 것을 확인하였습니다. 하지만 이건 어디까지나 PC에서 모바일 화면을 요청해서 보여지는 화면이기 때문에, 한번 휴대폰으로 사이트에 접속해서 어떻게 나오는지 봐야 하는 단계가 남아 있습니다.

문제는 여기서 발생하였습니다.

휴대폰상 화면에는 사진이 절반 짤려서 나오는 것을 확인할 수 있었는데, 이 문제를 어떻게 해결해야 하는데, 지금 당장은 어떻게 방법이 없으니 뭐라 더는 올릴 일이 없습니다. 그래서 이번 포스팅의 제목에다가 '암초'를 집어넣은 이유이기도 합니다.

다음 포스팅에서는 어떻게 해서 이 문제를 해결하는 방향으로 가야 하며, 그 내용을 올려드릴 것을 약속드리며, 이번 포스팅을 마치겠습니다.