XE 독학하기 그 9번째 걸음-의외로 가까운 곳에 있었는 해답

안녕하세요?

지난번 포스팅에서 모바일 페이지에서 그림을 추가하는데, 사이즈가 제대로 나오지 않은 문제가 있었습니다. 그래서 우선 이것을 해결해 보고자 먼저 html태그를 손 보기로 하였습니다.

위 스크린샷에서 보이는 [소스]라는 단추를 누르면, 내용 직접추가 항목에서 html 태그를 수정할 수 있습니다. 여기서 기존에는 

<p style="text-align:center,"> 라는 태그를 

<p style="text-align:center,;width:100%;height:auto;">

이런 식으로 html코드를 바꾸어 보았습니다. 하지만 그 결과는 그다지 시원하지는 않았습다. 아니 시원치 않기는 커녕, 아무런 변화가 없었습니다.

그래서 이번에는 노을지는 호수 배경화면이 너무 큰가 싶어서 한번 사이즈를 줄여 보기로 하였습니다.

각각 사이즈를 줄여서 한번 해 봤지만, 우측의 가장 작은 호수의 사진과 같이 줄인 것만 그런데로 나오기는 하였습니다. 하지만 문제가 여기도 여전히 존재하였는 것이......

위 스크린샷은 PC이기는 하지만, 스마트폰 상에서도 큰 차이가 없었습니다. 분명 노을지는 호수가 나오기는 다 나왔는데, 이번에는 사이즈가 너무나 줄은 나머지 쪼그라 들어서 나오는 것이지, 스마트폰 화면에 맞추어 져서 나오는 것은 전혀 아니었습니다.

이런 것을 원한 것은 아니었기 때문에, 무언가 다른 방법이 없는지를 찾아 보다가 다음과 같은 애드온이 있다는 이야기를 들었습니다.

이미지 리사이즈 애드온이라고 해서 사이즈를 조절해 준다고 합니다. 이런 애드온을 XE 관리자 페이지로 가서, 고급탭에서 쉬운설치 항목으로 가서 애드온을 설치합니다.

이번에는 고급탭에서 설치된 애드온 항목에 가서, 방금전에 설치한 이미지 리사이즈 애드온 항목으로 가서, PC와 Mobile 항목을 모두 체크박스를 클릭해서 체크해 두도록 합니다. 이렇게 해서 애드온을 설치해서 가동시켜서 이번에는 모바일 화면에서 노을지는 호수 화면이 제대로 나오기를 기대했습니다만,

이번에도 변한 것이 없었습니다.

무엇이 문제인지 모르던 와중에 다음과 같은 항목이 페이지 수정에 있다는 것을 알았습니다.

여기 위젯크기를 지정하는 메뉴가 있었는데, 여기서 위젯 크기가 있습니다. 이것을 원래는 px단위였던가? 일정 단위로 수치가 정해져 있었습니다. 이 수치를 지우고 그냥 100%로 처리를 하였습니다.

그 결과가 위 스크린샷입니다. 실제 스마트폰에서 원본 사진이 제대로 나오는 것을 확인 할 수 있었습니다. 의외로 해답이 가까운 곳에 있었는데, 이걸 몰라서 이래저래 헤메었습니다. 그래도 지난번에 해결이 안 되었는 문제가 이제 해결되었으니 개운하다는 느낌이 듭니다.