'HTML & CSS'에 해당되는 글 3건

최근에 Adobe Labs에서 Adobe Shadow라는 것을 내놓았다.

간단히 설명하자면, PC에서 보는 웹페이지 화면을 모바일 단말기와 싱크해서 모바일에서는 어떻게 보여지는 확인 할 수 있게 해 준다.
이 뿐만 아니라, Inspector와 같은 크롬용 개발자 도구를 모바일에 연결해서 볼 수 있게 해준다!!!!!
정말 이런 기능이 필요했다.

올바른 작동을 위해서 맥또는 윈도우에서 구동될 호스트 프로그램, 확장 기능이 설치된 크롬 브라우저, 동일 네트워크에서 구동이라는 조건이 필요하다. (윈도우일경우에는 봉주르 서비스 설치가 추가로 필요하다)

백문이 불여일견 아래의 소개 동영상을 보자. 

 

동영상에서 보여주는것처럼, 아이폰, 아이패드, 안드로이드 등의 모바일 단말기를 한번에 연결해서 볼 수 있다.
맥에서 설치해서 해보니, 간혹 Inspector가 연결을 잘 못하는 경우가 있었지만 대체적으로 쓸만했다.

 
자세한 소개 및 설치 방법은 아래의 공식 사이트에서 확인하면 된다.

http://labs.adobe.com/technologies/shadow/ 

이제 뉴 아이패드 한국 발매 시점에 맞추어, 아이패드의 필요성을 회사에 강조하기만 하면 되겠다!!

모바일용으로 디자인된 페이지를 작업하면서, 그 동안 해결하지 못하고 계속 궁금해 했던 문제를 드디어 해결했다.

다름이 아니라, 상단 메뉴바를 만들때, UL과 LI로 메뉴를 구성하다 보면 넓이를 도합 100%가 되도록 정확히 구성했음에도 불구하고, 100%를 차지하지 못하는 경우가 생긴다.

예를 들어, 메뉴가 3개라고 하면, 34%, 33%, 33%로 구성하거나, 33.33%로 새개 모두를 구성하게 된다.
그런데 이렇게 하면 아래 그림과 같이 오른쪽 끝에 빈 공백이 생긴다.

디자이너가 이와 같은 문제를 가지고 여러번 문의해 왔지만, 정확한 해결책을 찾지 못해 고심했다
그러다가 오늘, 본격적으로 이 문제를 짚고 나가야겠다는 생각을 했다.

문제는 webkit 계열 브라우저에서 width 속성을 퍼센트로 주었을때 발생하는것이었다.

아이폰 기준으로 320px의 넓이를 3등분하면, 106.666666.....px이 나온다. 아마도 webkit 계열 브라우저는 소수점 이하 값을 무시하고 넓이를 계산해서 렌더링하는것으로 보인다.
때문에, 소수점이 없이 정확히 떨어지는 퍼센트 값에 대해서는 정확하게 보여줄 수 있었던 반면, 소수점이 나오는 값에 대해서는 실제보다 작게 계산되어 여백이 생기는것 같다.

그렇다면, 이에 대한 해결책은 무엇일까?

약간의 꼼수 같지만, 위와 같은 스타일로 보기 싫은 공백 없이 메뉴바를 보여줄 수 있게 되었다.
최종 결과 화면은 아래와 같다.

깔끔하게 문제를 정리하게 되었다.

 

오늘 회사에서 오전부터 디자이너와 마케터가 계속 자리를 오가며 뭔가를 열심히 수정하고 있었다.

마케터가 바로 나의 건너편 자리인 관계로 가끔식 들려오는 얘기를 들을 수 있었다.

별로 귀담아 듣지 않았었는데, 퇴근 시간이 가까워질때까지 문제가 해결되지 않자 디자이너가 나에게 와서 문의를 했다.

문제인즉슨, html형식으로 보내는 마케팅 메일의 디자인이 이번에 개편이 되어서 테스트를 하고 있는데, 다른 웹메일등에서는 잘 보여지는데, 유독 Outlook에서는 메일 하단에 하얀 가로줄이 생긴다는 것이었다.

디자이너는 이 문제가 메일 내용의 길이를 줄이면 가로줄이 안생기는 것으로 보아,  길이가 길어서 그런것 같다고 하였다.

좀 납득이 되지 않았지만, 현상을 보니 정말이었다.

그래서 Outlook의 html 렌더링 엔진에 대해서 찾아보기 시작하였다.

결국 알아낸 결론은,


1. Outlook 2007 이상은 MS-Word의 엔진을 사용하고 Outlook 2003은 IE의 엔진을 사용한다.

2. Outlook 에서의 html 렌더링은 상당히 많은 제약이 따른다.
    (MSDN에서 자세히 설명해 준다 http://goo.gl/4L6c, http://goo.gl/BF9sS)
 
3. 그리고... html 메일에서 레이아웃을 잡기 위해 필수로 사용하게 되는 Table 의 길이가 23.7inch (약 1,790pixel)보다 크면 자동으로 구분줄을 삽입한다!! (이것이 바로 예의 하얀 가로줄이다)


하얀 가로줄이 생기는 것에 대한 해결책은 몇가지가 있는것 같은데, 가장 확실한 것은 가로줄이 생길만큼의 긴 Table을 만들지 않는 것이다.

다행히도 디자이너가 코딩한 결과물은 하나의 큰 테이블이 컨텐츠를 담은 여러개의 테이블을 감싸고 있는 형태였다.

그래서 바깥쪽의 긴 테이블을 빼고 컨텐츠 테이블만으로 구성을 하자 Outlook에서의 하얀 가로줄이 나오는 현상이 사라졌다.