1upz

em의 필요성

일반적으로 폰트의 크기를 지정하기 위해서 px, 혹은 pt 와 같은 단위를 습관적으로 사용 해 왔습니다만 Screen display의 경우에는 플랫폼간의 부조화나 브라우저에서 폰트 사이즈를 인위적으로 조절하는 것이 불가능한 경우가 생기기 때문에 이를 지양하고 em 과 같은 상대 단위를 사용하는 것이 좋습니다.

em의 크기는 어떻게 가늠하는가.

em은 대문자 M의 폭을 기준으로 그 사이즈가 정해지는 상대적 단위이기 때문에 원하는 크기를 지정하기 위해서는 상위 엘리먼트로 거슬러 올라가야 합니다. 마치 부모와 자식과의 관계처럼 자식은 부모에게 영향을 받는 속성을 갖고 있죠.

/* CSS */
#parent {
  font-size:20px;
  }

<!-- HTML -->
<div id="parent">
  <div id="child">Who Am I?</div>
</div>

위의 예(이해를 돕기 위해 px 단위를 사용 했습니다)를 보면, Who Am I? 의 기본 크기는 별다른 지정이 없으므로 20px로 표현이 됩니다. 만약 child 엘리먼트의 폰트 사이즈를 1em으로 지정 했을 경우 Who Am I?는 parent의 100% 크기인 20px로 나타나고, child가 2em 라면 40px, 0.5em 라면 10px로 나타나게 되는 형식이 em의 원리 입니다.

처음 크기는 무엇으로 결정 되나?

앞서 얘기 한데로 em은 상대적 단위 이기 때문에 상위 엘리먼트의 값을 참조하게 됩니다. body 그리고 html까지 올라가서 그 값을 참조하게 되는 것이죠. 그렇다면 최상위 엘리먼트는 무엇을 참조하게 될까요? 네, 브라우저의 설정 값을 참조하게 됩니다. 바꿔 얘기하자면 브라우저의 설정 값을 변경하면 페이지의 폰트 크기들을 조절할 수 있게 되는 겁니다. (참고로 Opera나 IE7의 경우에는 줌 브라우징이 가능하고 Fire Fox는 절대 단위 폰트들도 resizing이 가능하므로 em은 IE6를 위한 선택이라 해도 과언이 아닙니다.)

일반적으로 브라우저의 기본 크기는 12pt (16px)로 설정 되어 있기 때문에 12pt를 기준으로 페이지 전체를 디자인 해야 하고, 또한 기본 설정의 변경에 따라 변화되는 모습을 융통성 있게 제작하는 것이 무엇보다 중요 합니다.

Resizing bug in IE6

em을 사용하여 텍스트 크기 조절이 가능토록 디자인 해야 하는 주된 이유는 사용자 편의성에 있습니다. 만일 시력이 좋지 않은 사용자라면 작은 글씨로 된 텍스트는 읽을 수가 없으므로 이를 적당히 키워 읽기 편하도록 만들자는 것이 그 목적 이죠. 그런데 단순히 em의 사용만으로는 IE6 에서 확대/축소율의 문제점이 발생합니다. 폰트가 지나치게 커지거나 지나치게 작아져서 오히려 더욱 불편해 지는 문제 입니다.
파이어폭스의 모습과 비교한 아래 이미지를 보시면 그 차이를 느끼실 수 있을 겁니다.

이 문제는 최상위 엘리먼트의 폰트 사이즈 단위를 %로 지정하여 간단히 해결할 수 있습니다. 만약 font-size를 body부터 시작 했다면 html을 추가해 % 값을 지정해 주십시오.

html {
  font-size:100%;
  }

폰트의 크기를 브라우저 기본값의 100%로 보여주라는 코드라 이론상으로는 아무런 의미가 없지만 사이즈의 근본을 em이 아닌 %로 우회하여 IE에서도 확대, 축소의 비율을 적당하게 적용 시킬 수 있도록 한다는 원리 입니다.

만일 html 에 이미 폰트 사이즈를 지정했거나 html이 아닌 다른 곳에 %를 지정하고 싶다면 폰트가 지정된 최 상위 엘리먼트(보통은 body가 되겠죠)의 수치와 단위를 em 에서 %로 변경 해 주시면 됩니다.

body {
  font:75%/1.6 'Trebuchet MS', Helvetica, sans-serif;
  }

그 밖의 문제

IE에서 하이퍼링크를 클릭할 경우 본문의 텍스트 크기가 순식간에 줄어들거나 커지는 증상도 앞서 얘기한 것처럼 최상위 단위를 %로 지정해 줌으로써 해결이 가능할 것 같습니다. 그렇지만 확실한 것은 아니고, 어디까지나 추측일 뿐인데, 일단은 제 환경에서는 재현이 되지 않기 때문에 혹시라도 이런 증상이 나타나시는 분은 테스트를 부탁 드립니다.

이번 학기에 수강하고 있는 웹 디자인 수업은 테크니컬 적인 내용은 배제하고 인터렉티브를 기반으로 한 디자인을 다루고 있습니다.

Interact는 '상호적인(Inter)' 이라는 단어와 '활동, 작용(Act)'을 뜻하는 단어의 합성어로 '상호 작용하다', '서로 영향을 끼치다' 라고 풀이되는데, 상호적으로 작용한다는 의미는 일방적인 활동으로 그치는 것이 아니고 작용에 대한 반응(React)과, 또 반응으로 인해 새로운 행동 반응이 연거푸 일어나는 작용이라 할 수 있습니다. 이해를 돕기 위해 한가지 예를 들자면, 앞에 있는 놈을 한대 쥐어 박았을 경우 그것으로 끝나는 것이 아니라 그 놈의 머리에서 혹이 나고, 눈물을 흘리며 나에게 주먹질을 해오는 이러한 작용과 반응이 인터렉티브라 할 수 있겠죠.

그렇다면 웹사이트에서 가장 기본적인 인터렉티브는 무엇이 있을까요?

a {text-decoration:underline;}
a:link {color:#09c;}
a:visited {color:#906;}
a:hover {font-weight:bold; color:#0c3;}
a:active {color:#c00;}
a:focus {background-color:#eee;}

네, 저는 a 태그의 가상 클래스 라고 생각 합니다. 링크를 확인하고, 마우스를 올리고, 클릭하는 행위가 이뤄지는 부분이죠.

위와 같은 평범한 링크 스타일로도 충분히 상호작용이 일어나지만 일반적으로 mouse over 에 대한 반응에만 신경을 쓰고 있지, 클릭에 대한 반응은 생략하는 경우가 많아 클릭했을 경우의 스타일을 생각 해 봤습니다.

a 태그를 간단하게 버튼 모양으로 만들어 보도록 하겠습니다. 예제 보기

a {
    display:block;
    width:8em;
    padding:.5em 0;
    background-color:#eee;
    font-size:1em;
    text-align:center;
    text-decoration:none;
    border:1px solid #ddd;
    border-width:0 1px 1px 0;
    }

a:link, a:visited {
    color:#000;
    }

a:hover {
    color:#c06;
    }

a:active {
    position:relative;
    top:1px;
    left:1px;
    background-color:#e3e3e3;
    color:#f39;
    }

active 클래스에 position을 relative로 설정하고 위치를 위쪽, 왼쪽에서 각각 1px씩 이동하라고 지정해 뒀습니다. 링크를 클릭하는 순간 마치 버튼을 클릭 한 것과 같은 시각적 효과를 보여줌으로써 자신이 클릭했다는 사실을 눈으로 확인 할 수 있게 되는 것이죠. 클릭과 그 작용에 대한 시각적인 반응, 즉 인터렉트가 일어나는 것입니다.

물론 페이지 이동은 짧은 순간에 이뤄지고 마우스의 커서도 자동으로 바뀌거나 시스템에 따라서는 효과음도 출력되기 때문에 굳이 이러한 노력을 들이지 않더라도 클릭에 대한 반응을 인지할 수는 있습니다만 CSS를 응용하여 좀 더 멋지고 쉬운 인터렉티브 디자인을 만들어내는 것은 디자이너로서 상당히 매력있고 의미있는 일 이라 생각 합니다.

티스토리에서 Eolin Plug-in 을 활성화 시키면 본문 하단에 북마크, 추천 버튼이 생깁니다.
이 Plug-in 은 본문 내용을 표시해 주는 치환자 ([ ##_article_rep_desc_##]) 내부에 포함되기 때문에 skin.html 에서 수정이 힘들죠.
하지만 버튼을 왼쪽으로 정렬하고 싶다거나 아이콘을 변경하려는 경우에는 간단하게 CSS로 해결 할 수 있습니다.

<div class="EolinBmVote">
  <span class="EolinBookmarkBtn">
    <a title="이올린에 북마크하기" ~~~~~>
      <img ~~~ /> 이올린에 북마크하기
    </a>
  </span>(<span class="EolinBookmarkCount" id="bookmarkeolin11">13</span>) 
 
  <span class="EolinVoteBtn">
    <a title="이올린에 추천하기" href="#void">
      <img ~~~~ /> 이올린에 추천하기
    </a>
  </span>(<span class="EolinVoteCount" id="voteeolin11">10</span>)
</div>

/* Eolin Plug-in */
.EolinBmVote {
  border-top:1px dashed #ddd; 
  padding:5px 0 0 0 !important; 
  text-align:left !important; 
  font-size:0.9em; 
}

.EolinBmVote img {
  display:none;
}

/* Bookmark Button */
.EolinBookmarkBtn a:link,
.EolinBookmarkBtn a:visited,
.EolinBookmarkBtn a:hover,
.EolinBookmarkBtn a:active
{
 background: url(./images/***.***) 0 0 no-repeat; 
 padding: 0 0 0 25px; 
}
 
/* Vote Button */
.EolinVoteBtn a:link,
.EolinVoteBtn a:visited,
.EolinVoteBtn a:hover,
.EolinVoteBtn a:active
{
 background: url(./images/***.***) 0 0 no-repeat; 
 padding: 0 0 0 25px; 
}