flick 사진모음

about Blog

안녕하세요. 이윤한 입니다. ㅋㅋ 현재 사이트 작업중!

html/css category 를 보고 계십니다.

Candle

Download

rss리더 선택

현재 방문중인 유저 hit counter

html/css’ Category

ie와 ff에서 table border와 td border의 우선도

먼저, table과 td(혹은 th)들의 border style이 동일할경우 문제가 되지 않지만, border-color나 border-style이 다를경우가 문제가 된다.

다음 그림은 ie와 그외 (ff,opera,safari)에서 보여지는 화면인다.
border

  1. 1. css의 우선순위에 상관없이 ie와 그외 브라우저는 다르게 렌더링 됨.
  2. 2. table과 td의 border사이즈가 다를경우엔 더 큰 border가 우선시 됨 - 모든 브라우저에서 동일함.

결국, border두께가 같다면 ie와 그외 브라우저를 통일할수가 없다는 결론! (진짜로?!!)

그 대책으로는…

첫번째tr과 첫번째 td(th)에 클래스를 주는방법이 있다.
혹은 마지막 tr과 마지막 td… 아무래도 첫번째가 낫겠군.

레어어를 뚫는 select 메뉴 가리기

IE6에서 select 메뉴를 숨기기 위해서는 몇가지 방법이 있다.
1. 레이어가 뜨는 영역의 select박스를 hidden 시키키
2. slelet box위에 iframe을 만들어주고 그 위에 레이어 띄우기

1번의 경우는 레이어가 고정값과 고정위치에서 보여진다면 쉽게 적용가능하나, 레이어의 위치등이 변하거나 셀렉트 박스가 중간에 걸쳐질경우에는 적용하기 힘들다.

2번의 경우엔 불필요한 태그가 들어가기도 하지만 어쨌든 유동적인 레이어에 적합한 형태이다.
단, 2번의 경우 매번 해당 레이어의 사이즈와 위치값을 계산하기 힘든점이 있어서 좀 간단하게 써먹기 위해 javascript로 만들어보았다.

(more…)

웹표준 사이드 스토리 2

때는 난세, 어둡고 혼탁한 세상을 배경으로 한 사나이의 여행이 시작되려 하고 있다.

그의 이름은 ‘H’라 불리었고 본명을 아는이는 없었다.
혹독한 무공수련으로 다부진 몸이었지만, 올바르고 독창적인 ‘contents’를 찾아 이미 여러 마을을 전전하고 있던 중 몸과 마음이 지친것이 사실이었다.

새로운 마을로 가는 중 H는 황량한 길가에 쓰러져 있던 소녀를 발견하고 구해준다.
“저는 당신이 찾는 컨텐츠가 아니에요.. 한때 노예로 팔려왔다가 지금은 도움도 안된다고..버려졋지요”
소녀는 흐느끼면서 H에게 감사했다.
“제가 당신을 따라가도 될까요”
H는 힘든 여행이 될거라 거절했지만, 소녀는 H의 왠지모를 부분에 이끌려 따라가기로 결심하였다.

도착한 마을에선 난잡하고 이해하기 어려운 ‘contents’들이 가득 할 뿐이었다.
그곳에서 올바른 ‘contents’를 찾으려는 H는 그곳을 지배하는 무리들에게 습격을 받기 시작했다.
그들은 힘없는 ‘contents’를 지배하는 ’sub main’들 이었다.
“너냐? 우리 마을에서 쓸데없는 짓을 하는 녀석이!”
한명의 ’sub main’이 뱉어내는 수많은 ‘br’과 ‘blank.gif’들이 H의 옷이 스치면서 부~욱 하고 찢겨져 나갔다.

H의 가슴 한가운데에는 선명하게 ‘Body’라는 흉터가 새겨져 있었다.

그때 눈에 보이지도 않는 몸짓으로 H가 움직이자 ’sub main’들은 움찔했으나..
“뭐야 하나도 아프지 않쟎아” 라면서 다시금 H를 향해 다가왔다.
순간… H가 나지막히 되뇌었다. “maring:0; padding:0;”

“으 으아악~” 갑자기 ’sub maiin’들은 몸이 일그러지면서 고통스럽게 쓰러졌다.
“너희들의 몸을 구성하는 markup을 올바르게 손보았다. 당분간은 일어나기 힘들터”

“으으..이런짓을 하고 무사할줄 아느냐! 이제 곧 ‘index’님이 오신다. 너같은 녀석은 한방에 없애줄…으아아…”

- 중략 -

‘index’의 손에서 뿜어져 나오는 수많은 색채들의 font와 쉽게 부서지지 않는 table 방어막….이것들이 H를 수세에 몰리게 하고 있었다.

그때 소녀가 뛰쳐나왔다.
“제가 도와드릴께요”
소녀는 손을 ‘index’에게 뻗치면서 큰소리로 외쳤다.
“document.getelementById……”
소녀의 입에서 나오는 소리에 H는 귀를 의심할수 밖에 없었다.

소녀의 손등에는 ‘DOM’이란 문신이 새겨져 있었다.

소녀의 도움으로 능력이 증폭된 H는 섣불리 사용하지 않았던 ‘position, float, word-space’등의 초식을 사용했다.
그의 내공은 이미 xhtml strict 까지 도달해 있었다.

쿵! 하며 큰소리를 내고 ‘index’가 쓰려졌다.
“으으..네 놈은 어디서 온놈이냐…”
“악당에게 남겨줄 말은 없다”

마을을 구해준 H는 소녀와 함게 마을 사람들의 구조를 변경해 주고 다시금 여행길에 올랐다.

.
.
.
.

지금도 어느곳에서는 한 남자의 목소리가 들리고 있다.
.
.
.
.
“너는 이미 리뉴얼 되었다”

————————

유치하지만 생각 하는 내내 재밌게 이야기를 만들어봤습니다.

저희가 회사에서 하는건 웹을 최대한 의미있게 표현하는 것이지만, 웹이 가진 중요성은 컨텐츠- 즉 내용이라는 점을 강조하고 싶었던 건데 잘 표현이 된건지 모르겠네요 ^ ^