'Web standards/Knowhow'에 해당되는 글 5

  1. 2009.07.28 디자인도 잘하고, 코딩도 잘하고 (3)
  2. 2009.07.27 효율적인 마크업 뼈대만들기 (1)
  3. 2007.02.02 깨지지 않아요.. (7)
  4. 2007.01.14 이미지 메뉴탭 만들어 보기 (15)
  5. 2006.12.05 클릭을 좀더 편하게 - label (7)
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은 나중에 재활용하기도 쉽다.


깨지지 않아요..

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