아이리버의 과감한 이미지 컷팅

예전 광고를 찾아 볼 것이 있어서 아이리버 사이트에 갔다가, 인덱스에 예쁜 신제품이 나온 것을 봤습니다. 깜찍하게 생긴 것이 그냥 지나칠 수가 없어서 들어가서 스펙을 보다가..
평소 습관대로 페이지 드래그를 했는데…

헛..
페이지 전체가 다 이미지 인 것 아니겠습니까! 안티앨리어싱 안먹힌 텍스트에 속고 말았습니다!

아이리버

iriver
Image border mode

S10을 소개하는 페이지입니다.
코딩하신 분이… 오픈 날짜가 엄청 임박했거나, 엄청 과감한 사람이 아닌가 싶습니다.

코드를 살펴 보면, 예전의 테이블 기반 방식을 철저히 따라갔다고 볼 수는 있는데, 그 중에서도 굉장히 독특한 케이스가 아닌가 싶습니다.

보통 테이블의 셀 안에 이미지와 텍스트를 하나씩 넣는다고 해도 컨텐츠의 형태에 맞게 자르는 경우가 대부분인데, 지금 이 경우는… 아무런 고민없이 격자로 툭툭 잘라버린게 눈에 보입니다.
보통 텍스트를 가로 질러서 이미지를 자르지는 않는데 말입니다. 이분은 아주 과감하게 텍스트를 분리시켜버렸습니다!
아래는 테이블 시작 부분 코드입니다.

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img src="http://spec.iriver.co.kr/product/s10_img_feat02.jpg" alt="" /></td>
<td><img src="http://spec.iriver.co.kr/product/s10_img_feat03.jpg" alt="" /></td>
</tr>
<!-- 중략 --></tbody>
</table>

이런이런.. 살짝 살펴보니 문서안에 DTD 선언도 없고, img에 alt값도 없습니다.
그나마 E10을 소개하는 페이지는 이미지와 텍스트를 살짝 섞어서 코딩했습니다. 약간 여유가 있었던것 같습니다.

애플

0610_apple
컨텐츠나 컨텐츠를 배열하는 형식이 비슷한 애플을 한번 둘러보겠습니다.

역시나 습관처럼 페이지를 마우스로 긁어 보았어요. 역시나.. 텍스트와 이미지를 넣고 CSS로 적절히 배치를 해준 구조입니다.
아래는 HTML코드, 그 아래는 CSS코드입니다.

<!-- apple -->
<div id="content" class="column">
<div class="subcolumn1-2">
<p class="intro">매번 새로운 동기화가 이루어집니다. iTunes를 사용하면 iPod shuffle에서 언제나 새로운 방식으로 음악을 감상하게 됩니다. iPod shuffle을 Mac이나 PC에 연결하고 무슨 모험이 기다리고 있는지 알아보십시오.</p>
<img class="left" src="images/syncdockanimation20060912.gif" alt="Into the dock." width="135" height="130" border="0" />
<h3>빠른 동기화</h3>
iPod shuffle은 Dock과 함께 제공되므로 USB를 통해 Mac이나 PC에 연결할 수 있습니다. 빠른 동기화가 필요할 때마다 iPod shuffle을 Dock에 놓기만 하면 <a href="/itunes/overview/">iTunes</a>가 저절로 동작합니다.
<!-- 중략 -->
</div>
</div>
#content {float: left; width: 450px;}
#content .subcolumn1-2 {float: left; width: 215px;}
#content .subcolumn2-2 {float: right; width: 215px;}
#content .subcolumn1-3, #content .subcolumn2-3, #content .subcolumn3-3 {width: 135px; float: left;}
#content .subcolumn1-3, #content .subcolumn2-3 {margin-right: 22px;}
#content img.left { margin:4px 20px 10px 0; }
#content img.right { margin:4px 0 10px 20px; }
#content img.flushleft { margin-left:-30px; }
#content img.flushright { margin-right:-30px; }

img에도 .left나 .right등의 항목을 미리 지정해 놓고 사용하는 것을 볼 수 있습니다.

흠.
그렇다고요~
별얘기 아니었습니다~