1. 반응형 이메일 디자인에서 스택형 컬럼 배열하기

    ※ 이 글은 How to set the order of stacked columns in a responsive email design을 번역한 글입니다. 

    ※ 미숙한 실력이라 의역과 오역이 많습니다.


    반응형 이메일 디자인에서 스택형 컬럼 배열하기

    by Ros Hodgekiss

    반응형 이메일 디자인에서 설정한 2단 이상의 컬럼들이 모바일 기기에서 원하는 배열처럼 보이지 않습니까? 간단한 코딩 기술로 이 문제를 해결할 수 있습니다.

    이메일을 코딩할 때 무언가 조금 더 내 마음대로 할 수 있었으면 좋겠다고 느낄 때가 있습니다. 예를 들어, 모바일 기기에서의 편의를 위해 여러개의 컬럼(기술적으로 표현하자면 ‘테이블 셀’)을 포함한 레이아웃을 구성할 때, % column width 방식에서 자연스러운 컬럼 배열은 왼쪽 컬럼이 오른쪽 컬럼의 위에 오는 것입니다. 하지만, 오른쪽 컬럼의 이미지를 왼쪽 컬럼의 텍스트 위로 배열하고 싶을 때는 어떻게 해야할까요? 해답은 바로 the dir attribute에 있습니다.

    dir은 HTML 요소들의 배열 순서를 꽤 간단하게 바꿀 수 있습니다. dir의 본 목적은 오른쪽에서 왼쪽으로 쓰는 텍스트를 출력하기 위한 것이었습니다. (여러분도 아시다시피, 로마자를 사용하는 곳에서는 왼쪽에서 오른쪽으로 글을 출력하는 것이 브라우저의 기본 설정입니다) dir은 우리가 알고있는 모든 이메일 클라이언트를 지원합니다.

    Left to Right
    % column width 방식에서의 자연스러운 칼럼 배열


    (스택형 칼럼의 배열 순서를 바꿔주기 위해서) 테이블에 dir=“rtl”를 적용시켜주고, (텍스트는 원래의 방법대로 왼쪽부터 오른쪽으로 출력하기 위해서) 셀 안쪽에 dir=ltr을 적용시켜 줍니다. 이렇게 브라우저/이메일의 기본 설정을 바꾸어 작은 화면에서 스택형 컨텐츠들을 안정적으로 배열할 수 있습니다. 다음은 이를 활용한 간단한 코드입니다:

        /* Media query for mobile*/
        @media only screen and (max-width: 480px)  {
          .full {
            display:block;
            width:100%;
          }
        }
    
        ...
    
        /* HTML */
    
        <table dir="rtl" width="100%">
          <tr>
            <td width="50%" dir="ltr" class="full">
    
              <p>Right-hand side content: Stacks on top on mobile</p>
    
            </td>
            <td width="50%" dir="ltr" class="full">
    
              <p>Left-hand side content: Stacks underneath on mobile</p>
    
            </td>
          </tr>
        </table>        
    

    Left to Right
    dir=rtl 을 적용한 % column width 방식의 칼럼 배열


    무엇이 다른지 비교해보세요.
    - 오른쪽 칼럼이 왼쪽 칼럼의 밑으로 (브라우저 기본 설정)
    - 오른쪽 칼럼이 왼쪽 칼럼의 위로 (dir=“rtl”을 적용)

    여기까지입니다. 이 테크닉을 알려준 Brett DeWoody에게 큰 감사를 표합니다. 모든 이메일 클라이언트에서 잘 작동하는 반응형 레이아웃에 대해 관심이 있다면, Creating a centered, responsive design without media queries를 추천합니다. 이 테크닉을 이해하여, 모든 디바이스에서 원하는 대로 컨텐츠를 배열하세요.

     
  2. 버스 전광판이 불금에 내 늦은 퇴근을 힙합정신 충만하게 위로해준다. 요요요요! 요요오요! #HipHop

     
  3. DDP 루시카토 아쿠아빙수 a.k.a. 돌고래빙수 #맛은별로 #먹스타그램

     
  4. 혼자 술을 안마시고 취한애들과 있자니 꼭 나만 취한것 같네. #camping #한강난지캠핑장 (난지캠핑장 Nanji Camping ground에서)

     
  5. Summer Soltice, Great White & Bacon Cheese Fries. #BEER #먹스타그램 (The Alibi Craft Beer Gastropub에서)

     
  6. 전화 콘센트 오랜만에 보네. 전화국 시절이 좋았지… #telephone #plug

     

  7. 100이라는 숫자가 세상에서 제일 큰 숫자인줄 알았던 때가 있다. 아마 모두가 나에게 백점을 바라던 시절이었던 것 같다. 그렇다고 100보다 큰 숫자가 있다는 걸 알았을때 신기하거나 놀랍거나 하진 않았다. 그때쯤엔 이미 그걸 당연하게 받아들일 준비가 되어 있었던 것 같다.

    세상에서 가장 큰 숫자는 그럼 뭘까? 그런 숫자가 존재하는지조차 모르겠지만, 100보다는 훨씬 큰 숫자임에 분명하다. 100의 100배보다도 큰 숫자일 것이다.

     
  8. #flower #pot

     
  9. #flower #pot

     
  10. 선거가 얼마 안남았네요. #vote #june4th (쌍용아파트 너네 집 우편함 앞에서)

     
  11. 왜 ‘이@규님’이 아니라 ‘이@님규’ 인지가 의문… #스케일링 #아프다

     
  12. 우면동산 산책중

     
  13. the first #watermelon i ate this year. so #yummy! #먹스타그램

     
  14. 일층중앙에 새햐얀마네킹+새하얀옷+새하얀조명. 마네킹 DP가 인상깊은건 처음. #명동 #H&M

     
  15. #레트로나파이 #먹스타그램