Design도 잘하고 markup도 잘 작성하는 사람이 있다면 더 없이 좋겠지만, 단점이 있다.
Design을 하면서 markup생각을 하게 된다. 아무래도 상상의 나래를 펼치는데 제약이 될 수밖에 없다. 웹디자이너도 사람인지라 디자인 할때는 디자인만, 마크업할때는 마크업만 생각할 수가 없다.

디자인하면서 "이런 레이아웃은 마크업 작성할때 까다롭거나 크로스브라우징에서 분명 문제가 생길꺼야" 라는 생각 안해 본사람이 있을까?

이건 그저 정신수양 말고 다른 방법이 없을것 같다.
아니면 내안에 다중이를 키우거나...

최근에 책에서 본건데...
그럴때는 컴퓨터 앞을 떠나서 연필을 들고, 종이에 스케치를 하라고 한다.
그런다고 markup 생각이 없어 질까만은.... 아예 효과가 없을것 같지는 않다. 
TAG markup
홈페이지를 만드는 일이 업이거나 혹은 지망할 경우 기본적인 디자인 실력은 물론 markup skill도 갖춰야 한다. 물론 국내 유수의 웹에이전시나 세분화가 잘 되어 있는 대규모의 업체라면 논외이지만, 우리나라 대부분의 기업에서는 디자인도 잘하고, 코딩도 잘하고, 기왕이면 자바스크립트 베껴쓰는 정도의 능력을 갖추면 금상첨화이고, 프로그래밍에 기본적인 지식까지 있다면 완전 사랑받는 디자이너라고 할 수 있을것 같다. (우리나라에서 웹관련 종사자들은 정말 슈퍼맨이다.)

markup도 visual design 못지 않게 창의적이고 체계적인 사고방식이 필요한것 같다. 오랜시간 블로그 관리자 화면과 블로그 스킨을 만들면서 하나의 markup이 모든 상황을 모두 커버할수 있는건 아니지만, 어느정도 업무의 효율성은 가져올 수 있다.... 라는 당연한 이론을 뼈저리게 깨닫기 까지는 참 오랜이 걸린것 같다.

사실 나도 수년전만 해도 table로 layout을 구성할 때가 있었다. 그러다가 웹표준, 접근성, 웹2.0등을 접했는데... 사람은 변화를 받아들이는데 참 인색한것 같다. 전에는 몇시간안에 끝났던 코딩이 두배, 세배의 시간이 걸리기 시작하고, 브라우저마다 출력을 달리해주는 통에 고생은 또 배가 되면서 무작정 회의적인 생각만 들었었다.

어느정도 코딩에 익숙해지고, Cross browsing을 당연하게 생각하게 되면서부터 생각이 달라지기 시작했다. 어떻게 하면 더 효율적으로 markup을 할 수 있을지 고민하기 시작했는데.... 그러면서 markup하는데 또 엄청난 시간이 들었다. 이렇게도 해보고 저렇게도 해보고... 뭔가 정답을 바랬던것 같다.

그러다가 효율적인 markup에는 정답이 없다며 포기하기 시작하니까 마음도 편해지고, 또 다른 시선이 생기기 시작했다. 그건 그냥 자신이 정답을 만들면 되는것 같다. 나름대로의 rule을 만들어 그 rule대로 일관성있게 작업을 하면 된다.

사설이 너무 길었는데...
자신만의 knowhow를 서로 공유하면 좋을것 같아서 몇가지만 얘기해보려고 한다.

1. 축약하지 말고 가능하면 변수에 모든 의미를 담아라

authorProf(△) → 틀렸다기보다는 별로 좋지 않음.
authorProfile(O)

축약하고나면 나중에 긴가민가 한다. 직관적이지 않아서 본인조차 헛갈리는 경우가 생긴다.

2. rule을 만들었으면 일관성있게 끌고나가는게 중요한것 같다.

1번의 rule에 따르면 두 단어 이상일 경우가 많다. 그럴경우 class name을 만들때 세가지정도의 방법이 있다. 분명 더 많은 rule들이 존재하겠지만, 일반적인것들만 예를 든다면,

하이픈 : content-header(O)
언더라인 : content_header(O)
카멜표기 : contentHeader(O)

작업할때마다 어떤때는 하이픈이 좋아보이고, 어떨때는 언더라인이 좋아보이지만, 사실 좋아보이는 어떤건 없는것 같다. 일단 일관성을 가지는게 중요한것 같다.

3. common한 요소와 unique한 요소를 찾아라.

효율적인 markup의 핵심인것 같다. unique와 common을 적절히 사용하면 css의 코드 수를 확실히 줄일 수 있으며, 유지보수가 쉬워진다.
예를 들어 블로그 사이드바를 만들경우 각 사이드바 요소들마다 unique한 class명을 각각 주고, 모든 사이드바 요소에 common 클래스명을 동일하게 부여하면, 해당 사이드바 요소들을 동일한 디자인으로도 표현이 가능하고, 사이드바 요소중 원하는 요소의 디자인을 달리 할 수도 있다.

<div id="notice" class="widget">공지사항 리스트 </div>
<div id="category" class="widget">카테고리</div>
.
.
.
<div id="recentPost" class="widget">최글 글 </div>
<div id="recentComment" class="widget">최근에 올라온 댓글 </div>
<div id="recentTrackback" class="widget">최근에 받은 트랙백 </div>

widget라는 공통된 클래스명을 사용하여 일괄적으로 style를 적용할 수도 있고, 각각의 unique한 요소로 각각 다른 style를 적용할 수도 있다. 이 부분은 나중에 다시 다뤄볼 기회가 있으면 좋겠다.

4. 너무 많은 case에 대한 상황을 고려하지는 말자.

이건 주의해야할점에 가까운데 당장 생기지도 않을 너무 많은 상황에 대해 고려를 하기 시작하면 markup은 나도 모르는 괴물로 변해간다. 나중에 그 markup을 봤을때 이 레이어는 왜 넣은거지? 하며 아리송해진다. 엄청난 중첩 레이어에 side effect 때문에 결국 재활용은 커녕 markup을 새로 해야할지도 모른다. 당시 상황에 맞는 최적화된 markup은 나중에 재활용하기도 쉽다.



http://browsershots.org/

아는 사람은 이미 알고 있는 웹사이트를 각종 브라우저에 따라 스크린샷을 제공하는 사이트입니다. 결과 화면도 느리고, 요청이 많으면 나중에 시도하라는 메세지도 나옵니다. 그렇기 때문에 개발용으로 사용하기보다는 그냥 자신의 블로그가 다른 OS의 다른 브라우저에서 어떻게 보이는지 재미삼아 해보세요.

IETester 새로운 버전

Web standards/ETC | 2008.09.23 22:40 | leezche
대충 요랬던 IETester가 다음과 같이 버전업 되었네요.
 
사용자 삽입 이미지


탭브라우징이 대세이긴 한가 봅니다. 어쨌거나 정말 편해졌지 뭡니까.
다시 텍큐 만들고 다듬는 작업에 박차를 가해야겠습니다.  ^____________________^

IETester Download : http://www.my-debugbar.com/wiki/IETester/HomePage

얼마전 MS가 IE7을 내 놓으면서 골치거리가 하나 더 생겼다.
크로스브라우징에 하나의 브라우저가 더해진것이다.
보통 FF, IE6, Opera 세개의 브라우저 맞춤 작업을 진행했었는데.. 이제는 IE7 이라는 IE6와 같지만 다른 브라우저 하나가 더 생긴 것이다.

IE7 과 IE6는 하나의 운영체제에 동시에 존재하지 못하기 때문에 보통은 노트북을 이용하거나 상황이 여의치 않을때에는 VM(Virtual Machine)이라는 소프트웨어를 이용하여 또하나의 운영체제를 설치한 다음에 IE6또는 IE7을 이용했었다. 또하나의 OS를 설치한다는 것은 그만큼 시스템의 리소스를 차지하기 마련이다. 포토샵, 일러스트등을 사용하는 디자이너들에겐 반갑지 않은 방법이긴 하지만 방법이 없으니 울며겨자먹기다.

버뜨.
방법이 있었다.
http://tredosoft.com/Multiple_IE
이곳에 가면 인터넷 익스플로러를 버전별로 설치하여 사용할 수 있다.
꽤 날렵하게 잘 돌아간다. ^^

설치를 원하는 IE 버전을 선택

설치를 원하는 IE 버전을 선택


현재 내 PC에 깔려 있는 브라우저의 아이콘들

현재 내 PC에 깔려 있는 브라우저의 아이콘들


p.s
그동안 IE6의 크로스브라우징 문제 때문에 내 노트북이 회사에 상주해 있었는데
이제 노트북을 집으로 가져가서 맘 편히 포스팅을 할 수 있을것 같다.

웹페이지 해킹? - IE hack

Web standards/ETC | 2007.02.15 14:08 | leezche
IE7이 나오면서 디자이너들 골치가 더 아파졌습니다.
IE7은 IE6과는 달리 css 표준안을 준수하고 있다고는 하지만, 어쨌거나 FF, IE7, IE6은 모두 다른 view를 보여줍니다. (결국 MS의 구라?)

어떻게든 Cross Browsing 완벽 구현을 추구하는 디자이너에게 고민거리만 하나 더 늘게 됐다고나 할까요. 권장하진 않지만... 급할때 꼭 필요한 것이 hack 입니다.

IE7용 hack -  *:first-child+html
사용예)
#SearchType {  height:18px;}
 *:first-child+html #SearchType { height:20px;}
 



IE6용 hack - *html
사용예)
  .notice ul { padding-left:5px;}
  *html .notice ul {  padding-left:12px;}
 

이로서 css 파일에 IE의 흔적들이 더 깊이 패여지는군요.. 쌍으로다가...



읽어보면 좋은글!
FireJune´s Blog :: 인터넷 익스플로러 7 RC1의 웹표준
인터넷 익스플로러7(이하IE7)의 가장 최근 테스트 버전인 RC1설치해 보았습니다. 베타 버전은 설치를 완료해도 실행 하자마자 죽는 바람에 테스트하지 못했습니다만, RC1은 무사히 실행되는군요. ...
Cross Browsing 가이드
1993년 4월 22일 미국 일리노이 대학에서 일단의 학생들이 개발한 모자이크(Mosaic)라는 작은 공개 소 프트웨어 웹브라우저는 오늘날 웹이 전 세계에 영향을 끼치게 하는 혁명적인 첫 출발이었다. ...


TAG CSS, Hack

깨지지 않아요..

Web standards/Knowhow | 2007.02.02 01:02 | leezche

아래 이미지 두개를 이용해서 깨지지 않는 라운드형 박스를 만들어 보겠습니다.

사용자 삽입 이미지사용자 삽입 이미지

일단 원리는 이렇습니다.
사용자 삽입 이미지
라운드되어 있는 네 귀퉁이를 표현하기 위해서는 위 그림과 같이 네개의 엘리먼트가 필요합니다. 설명을 쉽게 하게 위해 일일이 네번의 마크업을 추가했습니다. 쓸데 없는 레이어를 줄이기 위해 상자안의 내용에 들어가는 엘리먼트를 응용해도 되겠지요.. 예를 들면 <a>태그나 <ul>태그 같은...

step01.
네 귀퉁이의 라운드를 표현하기 위한 마크업을 하겠습니다.
<div class="box_rt">
 <div class="box_lt">
  <div class="box_lb">
   <div class="box_rb">
    <h3>최근글 리스트</h3> 
    <ul>
     <li>뜬금없는 광고 - 빨간중독...</li>
     <li>이미지 메뉴탭 만들어 보기.</li>
     <li>살아 돌아왔습니다..</li>
     <li>burning eolin!.</li>
     <li>골라먹는 떡볶이 소스 받아...</li>                
    </ul>
   </div>
  </div>
 </div>
</div>

step02.
라운드형 박스를 디자인해 보겠습니다.
.box_rt { background:url(round_right.gif) right top no-repeat; float:left;}
.box_lt { background:url(round_left.gif) left top no-repeat; padding:9px 0 0 0;}
.box_lb { background:url(round_left.gif) left bottom no-repeat; padding:0 0 0 9px;}
.box_rb { background:url(round_right.gif) right bottom no-repeat; padding:0 9px 9px 0;}

아래와같이 박스안의 내용이 늘어나거나 폰트사이즈가 커진다고 하더라도 박스가 깨지지 않습니다. .box_lb, .box_rb를 클래스명으로 사용하고 있는 레이어를, h3이나 ul로 대체 한다면쓸데 없는 레이어의 사용을 자제할 수 있습니다. (위의 마크업은 어디까지나 설명을 쉽게하기 위함이고 어떠한 상황에서도 응용이 가능하도록 하기 위함입니다.)
사용자 삽입 이미지

주의! 박스가 무한대로 커져도 깨지지 않는 것이 아니라 배경이미지 사이즈에 따라 달라 집니다. 여기서 사용한 이미지는 가로 세로 400px 의 이미지를 사용했기 때문에 그 이상 넘어가면 박스가 깨지겠지요.. 배경이미지가 쓸데없이 커지면 이또한 효율적이지 못하므로 디자인 하면서 적절한 사이즈를 예상해서 제작하면 됩니다.

no_break_box.zip

소스파일 다운로드 받기


이런 모양의 메뉴를 만들어 보겠습니다
사용자 삽입 이미지
 

재료
는 메뉴탭의 라인을 나타내주는 배경이미지와  메뉴 이미지 5개가 필요합니다.
 


step01.

html 코드는 의미에 맞게 리스트업하고, 디자인이 가능하도록 클래스를 부여하고 되도록 심플하게 코딩해 보겠습니다.
<div class="tab_type01">
 <ul class="tab_navi">
  <li class="tab_home"><a href="#">첫페이지</a></li>
  <li class="tab_media"><a href="#">미디어로그</a></li>
  <li class="tab_local"><a href="#">지역로그</a></li>
  <li class="tab_tag"><a href="#">태그</a></li>
  <li class="tab_guestbook"><a href="#">방명록</a></li>  
 </ul>
</div>

[그림1] 옷을 입히지 않은 html 코드의 모습입니다

[그림1]옷을 입히지 않은 html 코드의 모습입니다




step02.
자 이제 옷을 입혀 보겠습니다.

- 먼저 메뉴바의 가로와 세로 사이즈를 지정합니다. ① ②
- 리스트의 형식을 감춰줍니다. ③
- 아래 라인을 표현하기 위해 배경이미지를 넣고 여백도 적절히 조절합니다 ④ ⑤
- 리스트를 세로가 아니라 가로로 정렬합니다. ⑥

.tab_navi {
 width:500px;  ①
 height:24px;  ②
 list-style:none;  ③
 padding:0 0 0 5px;  ④
 background:url(tab_bg.gif) repeat-x;  ⑤
 }
 
.tab_navi li {
 display:inline;  ⑥
 }


[그림2] step2의 스타일을 적용한 모습입니다

[그림2] step2의 스타일을 적용한 모습입니다


step03.
각 메뉴에 이미지를 입혀 보겠습니다
- 각 메뉴의 텍스트를 감추고 메뉴와 메뉴사이의 간격을 조절합니다.
- 해당 메뉴별 배경 이미지를 넣어 줍니다.

.tab_navi a { ⑦
 float:left; 
 padding:24px 0 0 0; 
 overflow:hidden; 
 height:0px;
 margin:0 1px; /* 메뉴와 메뉴 사이의 간격 조절 */
 }

.tab_home a { ⑧
 width:71px; 
 background:url(tab_home.gif) no-repeat;
 }
 
.tab_media a { ⑧
 width:78px; 
 background:url(tab_media.gif) no-repeat;
 }
 
.tab_local a { ⑧
 width:70px; 
 background:url(tab_local.gif) no-repeat;
 }
 
.tab_tag a { ⑧
 width:58px; 
 background:url(tab_tag.gif) no-repeat;
 }
 
.tab_guestbook a { ⑧
 width: 61px;
 background:url(tab_guestbook.gif) no-repeat;
 }


[그림 3] 각 메뉴별 이미지가 적용된 모습입니다

[그림 3] 각 메뉴별 이미지가 적용된 모습입니다


step04.
마우스 오버했을때 표현해 보도록 하겠습니다.

- 배경으로 지정되어 있는 이미지의 위치를 위로 올려줍니다.
  (overflow:hidden;으로 숨겨져있던 24픽셀이 보이게 됩니다.)
.tab_navi a:hover { ⑨
 background-position:0 -24px;
 }
 

step05.
마지막으로 자신이 현재 머물고 있는 곳의 위치는 어떻게 알릴수 있을까요?

<body>의 id를 이용하면 됩니다.
예를 들어 각각의 페이지에
<body id="home">
<body id="media">
<body id="local">
<body id="tag">
<body id="guestbook">

이런식으로 아이디값을 부여 합니다.
그리고 다음과 같이 스타일을 지정합니다.

body#home .tab_home a,
body#media .tab_media a,
body#local .tab_local a,
body#tag .tab_tag a,
body#guestbook .tab_guestbook a {
 background-position:0 -24px;
 }



tab_type_img.zip

소스파일 다운로드 받기

일반적으로 체크박스에 체크(?)를 하기 위해서는 체크박스를 클릭해야 합니다. 하지만 그 영역이 너무 작고, 성질급한 저같은 사람에겐 속터지는 일이지요... 체크박스와 연관되어 있는 텍스트에까지 클릭의 영역을 지정하고 싶을 경우를 위한 태그가 있습니다. 바로 <label>이라는 것인데... 아는 사람은 다 알지만 필요성을 느끼지 못해 사용하지 않는 경우가 있습니다. 그런데 예를 들어서
 


이럴경우는... 일일이 체크하려면 눈이 빠지고, 손가락 후달립니다... 게다가 글작성시마다... 카테고리를 분류하기 위해 빈번하게 체크가 일어날 경우라면 여간 짜증나는 일이 아닐 수가 없겠죠..
이럴때 작은 배려가 큰 감동이 될수 있다나요.. ㅋㅋㅋ 방법은 간단합니다. 체크박스와 텍스트를 연결 시켜주는 label을 사용하면 됩니다.


<input type="checkbox" name="check" id="email_save" />
<label for="email_save">
이메일 저장</label>

여기서 중요한것은 체크박스의 id값입니다. 모 굳이 얘기 하자면 email_save라는 아이디값을 가진 체크박스를 위한 레이블!.. 정도로 해석이 되겠지요.. 영작문 해석하는것 같군요.. ^^;;

이것은 클릭할 수 있는 영역이 넓어져 사용자 편의를 위한것도 있지만, 레이블과 폼의ID 관계를 정의해 주어 스크린리더가 각 폼에 해당하는 레이블을 올바르게 읽어주게 하는 아주 중요한 태그입니다. 게다가 마크업에 한발 다가서는 태그기도 하구요..

이렇게 하면 코드가 한결 깔끔해 지겠지요.. ^ ^v
TAG Label
태터툴즈 기본스킨을 보면 아이콘이 있다.
이 아이콘에는 rss를 구독할 수 있는 링크 주소가 걸려 있다.
rss주소를 나타내는 치환자로 [##_rss_url_##]을 쓰고 있으니까
<a href="[##_rss_url_##]"><img src="./images/rss.gif"></a>
코드를 이런식으로 작성하면 될것이고,

이를 새창으로 띄우기 위해서는
<a href="[##_rss_url_##]" target="_blank"><img src="./images/rss.gif"></a>
이렇게 작성하면 된다 이렇게 작성하면 안된단다.
<a href="[##_rss_url_##]" onclick="window.open(this.href); return false">
이런식이 되어야 한다. 왜 간단한 target="_blank"를 놔두고 저런짓을 해야만 하는걸까...

웹표준이 좋긴 하지만 너무 과도한건 아닐까 단물 다 빠진 껍을 씹어대듯이 입속가득 불만을 씹다가 그라피티에님에게 자문을 구했다. 왜 저렇게 해야만 하는걸까?

그라피티에님 曰 :  에~~ 그거는 말이죠! 시각장애인을 위한 겁니다. 어떤 링크를 클릭했을때 새창으로 뜨게 된다면 시각장애인은 자신이 기억하고 있는 포커스(위치)를 잃어 버리게 됩니다. 아주 당황스러운 일인거죠. 이렇게 하는 것은 그들을 위한 작은 배려가 아니라 기득권의 횡포를 이제 막아 주는 거죠. onclick은 어떻게 해서든 새창을 띄우고 싶은 사람들의 꼼수인거죠. 어떤 링크를 정말 필요해서 새창으로 열고 싶다면, 오른쪽 버튼 클릭하면 "새창에서 열기"라고 있는데 그걸 이용하면 됩니다.

이상은 언제나 약자의 시선에서 생각하는 그라피티에님 말씀이셨습니다.  짝짝짝~~~~

사실 처음엔 도대체 왜 있는 기능을 없애면서 까지 저래야 하나 싶었습니다. 하지만 제가 시각장애인이라는 생각으로 네이버를 접속해서 검색을 해 봤습니다. 온통 새창 일색입니다. 그러니까 시각장애인은 검색도 하지 말라는... ㅜ ㅜ;;;
IE Developer Toolber 장착 브라우저

[IE Developer Toolber 장착 브라우저]

IE에 add-in 되는 웹문서 분석 툴로  웹 개발뿐만 아니라 css를 주로 다뤄야 하는 디자이너에게도 아주 유용한것 같습니다. 참고로 저는 view DOM과 css를 disable 시키는 기능, div elements 아웃라인을 보여주는 기능, 브라우저를 리사이징해주는 기능등을 주로 사용하는데 도움을 톡톡히 받고 있습니다. 특히 w3c로 바로 연결하여 validate 결과를 볼수도 있습니다.



픽셀 단위의 폰트 사이즈가 왜! (왜 나만 갖고 그래~)
저 처럼 눈이 나쁜 분들이나, 나이 많은 어르신들에게 12px나 혹은 그것보다 더 작은 폰트 사이즈는 버거울수 있습니다. px, pt를 사용함으로서 IE나 FF에서 제공되는 좋은 기능을 원천적으로 못쓰게 되는거죠.

그럼 어떤 폰트 사이즈 단위를~~~
브라우저에서 제공되는 폰트크기 메뉴를 사용할수 있게 하려면 절대크기 키워드나 상대 길이단위를 사용하면 됩니다. 12px와 비슷한 단위를 찾아 보면 절대크기 키워드의 small 이나 0.75em 이 비슷한 모양을 하고 있습니다.
12px : small : 0.75em (비슷한 폰트 사이즈를 나타냅니다)

모양이 모두 조금씩 틀려욧!
디자이너들이 선호하는 픽셀크기 단위를 포기 하고, 절대크기 키워드를 사용한다고 했을때 두 단위 사이의 gap이 크다면 난감한일이 아닐 수 없습니다. 이미지에서 볼수 있듯이 100%일치
한다고 볼수 없습니다.
이를 비교해 보면 일단 같은 브라우저 내에서 12px와 0.75em은 완벽하게 일치하지만 small 키워드는 자간이 훨씬 넓습니다.자간은 매우 민감한 문제입니다. 텍스트가 많은 페이지에서 자간을 small로 했을때 흔히 쓰는 말로 "없어" 보입니다.
그럼 small은 포기? ... ^^ 약간의 조정이 필요하겠죠
자간이 문제였으니까.. 자간을 조정해 보겠습니다. 아.. 그런데. 문제가 하나 있습니다. 자간을 표현하는 방식이 브라우저마다 틀립니다. 뭐가 이렇게 걸리는게 많은지.. - -;;;


비교해 보겠습니다.
아래 이미지에서 처럼 ie에서는 소수점 자간을 표현하지 못하고 있습니다.
결국 letter-spacing:0; 이나 letter-spacing:-0.5px;나 같다는 말이죠.


꽁수를 이용하면 방법이 있을지는 모르겠으나 일단 소수점을 사용하지 않는걸로 하고, 결론을 내리면 다음과 같습니다.
12px = 0.75em (일치)
12px = small, letter-spacing:-1px (비슷)

각자의 웹페이지를 제작하시는 분들 판단에 맡기겠지만, 저는 굳이 방탄웹에서 사용했듯이 small 단위를 사용하지 않고, em 단위를 사용하려고 합니다.(아마 방탄웹이 영문활자를 기본으로 했기때문에 small을 사용해도 문제가 없을수도 있겠죠.)

그동안 폰트 단위때문에 혼돈이 많았는데 이렇게 정리해놓고 보니 속이 다 시원하네요.. ^^


위의 결론을 도출하기 위한 과정에 나온 html 문서입니다. 참고하셔요~~


폰트 단위의 종류

Web standards/ETC | 2006.08.25 02:22 | leezche
홈페이지를 만드는 사람은 종종 그 홈페이지를 이용하는 사람에게 자신의 결과물을 강요하곤 합니다. 방탄웹에도 언급했듯이 가장 대표적인 예가 폰트 사이즈일 것입니다. 디자이너는 보통 픽셀단위의 폰트 사이즈를 사용합니다. 그것이 비단 작업하기 편해서만은 아닐것입니다. 디자이너는 언제 어떠한 경우든 자신의 결과물이 동일하게 보여지길 원합니다. 자존심과 직결되는 문제일수도 있으니까요. 자신이 작업한 포토샵 파일과 프로그램 입히는 과정을 거친 결과물이 조금이라도 틀려지는 날엔 그날로 자신의 프라이드에 상처입고, 프로그래머를 가시눈으로 쳐다보게 될것입니다. 디자이너가 이만한 프라이드도 없다면 그것도 문제아닌가?싶기도 한데 ^^;;;

그 자존심을 조금더 내세워~ 만드는 사람이나 이용하는 사람이나 둘다 만족시키는 방법을 다양한 각도로 찾아 보는건 어떨까요?

방탄웹에 따르면 절대크기 키워드와 퍼센트를 적절히 사용한다고 한다. 아마 익숙치 않은 사람에겐 상당히 골치아플수도 있을것 같습니다. 게다가 IE나 FF 둘다 신경써야 하니까...

공부도 할겸 하나둘 정리해 보려고 합니다.


절대 크기(absolute-size)

글꼴 크기를 지정하지 않았을 경우 기본값은 medium으로 지정됩니다.
  • xx-small
  • x-small
  • small
  • medium (← 기본값)
  • large
  • x-large
  • xx-large

상대 크기(relative-size)

상위 엘레먼트의 현재 글꼴 크기에 의해 결정됩니다.
현재 글꼴 크기가 medium으로 지정되어 있다면 larger는 large로 smaller는 small로 현재 글꼴 크기가 지정됩니다.
  • larger
  • smaller

백분율(percentage)

상위 엘리먼트에 지정된 글씨 크기에 상대적인 크기가 지정됩니다
상위 엘리먼트 글씨 크기가 12pt로 지정되어있는 상태에서 글씨 크기를 120%로 지정했다면 글씨 크기는 14.4pt가 됩니다.

길이 단위

  • em : 1em은 브라우저 기본 글꼴의 100%를 말합니다. 백분율과 같이 상대적인 길이 단위
    브라우저 기본 글꼴 medium이 16px라고 가정 한다면 1em = 16px, 0.75em = 12px
  • px : 글꼴이 화면(모니터)에 출력될때 글꼴이 차지하는 픽셀의 수. 동일 장치 내에서는 절대적 크기를 나타냅니다. 흔히 화면에 표시되는 세로폭의 픽셀수를 나타냅니다.
  • pt : 글꼴이 화면이나 지면에 출력될때 글꼴의 세로폭. 동일 장치 내에서는 절대적 크기를 나타냅니다.


속성별  글꼴 크기 비교 샘플1



글 글꼴 크기 비교 샘플2 : px, pt, em, %비교


다~ 아는거 확인 사살!

firefox에서 폰트 사이즈 키워 보기

explorer에서 폰트 사이즈 키워 보기

safari에서 폰트 사이즈 키워 보기



safari 는 Mcfuture님이 제공해 주셨습니다. (맥북을 쓰고 있는 관계로다가.. )
또 브라우저가 뭐가 있더라..