달력

09

« 2010/09 »

  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  •  
  •  
2009/02/02 12:58

IE7에서 text-decoration이 이상하게 나올때. 작은 팁2009/02/02 12:58

IE7에서 text-decoration: underline 이 이상하게 표현될 때가 있습니다.
조금 더 정확하게 표현을 하자면 밑줄이 제자리에 있지 않는 증상이죠.
font-family가 어떤것이냐에 따라 1px 올라가느냐 2px이 올라가느냐 정도의 차이가 있습니다.

문제의 원인은
  1. vertical-align:middle속성을 가진 DOM이
  2. text-decoration: underline 속성을 가진 DOM과
  3. 같은 레벨에 있을때
나타납니다. 아마 IE7의 Bug인것 같네요.
증상의 스크린샷

IE7에서 같은 레벨상에 vertical-align: middle의 DOM이 있을경우 text-decoration: underline인 DOM이 이상하게 표현되는 경우



해결책은 아주 간단합니다. vertical-align: middle의 객체를 div같은 display:block으로 감싸주면 되죠. 만약 이 객체의 우측에 위치해야 한다면 float: left로 Positioning을 해주시면 됩니다.
그 외 세세한것들은 디자인에 맞춰서 Styling 하면 되는것이죠.

위 스크린샷의 HTML&CSS 코드 입니다.
<h2>해결</h2>
<p>vertical-align:middle 객체를 div같은 display:block으로 감싸면 해결이 됩니다. 디자인에 따라 float을 부여하고 Styling을 하시면 됩니다.</p>
<p>
    <div style="float:left"><input type="text" style="vertical-align:middle;width: 160px" value="vertical-align:middle" /></div>
    <div style="float:left;padding:2px 0 0 5px">
        <span style="text-decoration: underline">It's span: 이것은 span입니다.</span>
        <a href="#">It's a: 이것은 a입니다</a>
    </div>
</p>
<p style="clear: both">
    <div style="float: left"><img src="vami.gif" style="vertical-align: middle" /></div>
    <div style="float:left;padding:15px 0 0 5px">
        <span style="text-decoration: underline">It's span: 이것은 span입니다.</span>
        <a href="#">It's a: 이것은 a입니다</a>
    </div>
</p>

크리에이티브 커먼즈 라이선스
Creative Commons License

'작은 팁' 카테고리의 다른 글

[Rails] 2.2.2 로 개발하던 것을 2.3.2 로 바꿀때.  (0) 2009/04/07
gem으로 mime-types update 혹은 install 시 나는 Error(on Gentoo)  (2) 2009/03/10
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
[JS] IE6인지 구분하기  (0) 2008/08/20
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
TAG CSS, IE7, text-decoration, vertical-middle
Trackback (0) : Comment (0)
Posted by Johan Kim 기다림
2008/06/25 11:21

CSS Editors Reviewed 웹/프로그래밍2008/06/25 11:21

http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/

OS에 상관없이 CSS Editor를 16개나 Review 한 것입니다.
영어의 압박이 있긴 하지만..심심풀이 땅콩으로 볼만한 것 같습니다.

세세하게 둘러보진 않았지만..지금보니.. Mac용 Editor도 많네요. 괜찮아 보이는것들도 있고...
메인 OS가 Windows여서 Windows용이 사실 좋은데..
왠지 Mac Editor가 더 이뻐보이네요.. 이뻐보여서 그런지 왠지 기능도 더 좋을거 같고;;
(Rails랑 svn용으로만 쓰는 불쌍한 내 MacBook의 활용도가 조금 더 올라갈려나;;)

둘러보니 Linux에서도 구동되는 CSS Editor(CSSED)도 있네요!!
그리고 CSS 천재라고 불리는 Eric Meyer가 CSS Editor도 만들었다는 사실도 알았습니다.
듣는순간 촌티가 확 나면서 왠지 안쓰고 싶은 느낌이 드는 이름을 가진 Editor..
그 이름하여 Eric Meyer’s CSS Sculptor..............;;;

그래도 Eric Meyer인데!! 라는 생각으로 Eric Meyer’s CSS Sculptor 에 들어가는 순간..
순간 두 눈을 의심하게 되며, 머리속이 하얗지면서 두 손과 어깨의 힘이 쭉빠지게 됩니다.
요즘 흔히들 말하는 "멍~" 때리게 됩니다. 그리고 정확히 2.515초 후에 Scream!!! 하게 될 수 도 -ㅁ-;;
(역시 서양인들의 쎈쓰!! ㅎㅎ)

아래는 http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/ 에서 리뷰한 CSS Editors입니다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹/프로그래밍' 카테고리의 다른 글

CSS Frameworks  (0) 2008/08/01
다음 이메일 청구서, 정말로 재인증이 필요할까?  (3) 2008/07/04
CSS Editors Reviewed  (0) 2008/06/25
Firefox3가 나오면서 개발자가 한번쯤 읽어봄직한 문서  (0) 2008/06/23
firefox3를 설치했습니다. (내용 추가08/06/18)  (4) 2008/06/17
flowchart.com의 js  (0) 2008/05/23
TAG CSS, css editor, Editor
Trackback (0) : Comment (0)
Posted by Johan Kim 기다림
2008/03/06 14:53

탭메뉴는 어떻게 코딩 해야 할까? 작은 팁2008/03/06 14:53

우선 먼저 말하고 싶은것은 내가 적은 방법이 정답은 아니다.
정수 '2' 라는 값을 만들기 위해서
  • 1+1
  • 2/8*((16-4)/3)*2
  • sin 5/6 pi * 4
같은 많은 식들이 존재하듯이, 아래에 나온 방법도 그중 하나 일 뿐이다.

별 내용없는 두서는 이제 접기로 하고...
  • semantic markup
  • CSS가 없을때도 제대로 보이도록
  • Javascript가 동작하지 않을때도 동작하도록
위의 사항들을 고려하며 코딩되었다.

<menu id="tab_menus">
html markup 결과

    <li class="selected"><a href="#Menu_01">Menu 01</a></li>
    <li><a href="#Menu_02">Menu 02</a></li>
    <li><a href="#Menu_03">Menu 03</a></li>
</menu>
<div class="tab_right"></div>

<div id="Menu_01" class="content">
    <h3>Menu 01</h3>
    <p>Menu 01...blablablablabla</p>
    <a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>
<div id="Menu_02" class="content">
    <h3>Menu 02</h3>
    <p>Menu 02...blablablablabla</p>
    <a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>
<div id="Menu_03" class="content">
    <h3>Menu 03</h3>
    <p>Menu 03...blablablablabla</p>
    <a href="#tab_menus" class="go_tab_menu"><img src="btn_top.gif" alt="go tab menu" /></a>
</div>

tab menu 의 링크를 각각의 content에 걸어줌으로 인해 quick link의 역활을 수행하여 접근성을 높였고, 각 content 하단에 tab menu로 바로 가는 quick link도 제공함으로 더욱 완성도 높은 접근성이 보장되었다. 하지만 이렇게 보면 전혀 tab menu같지가 않다.

이제는 tab menu스럽게 꾸며보자.

body {
    font:12px arial;
}
a {
    text-decoration:none;
}
img {
    border:0;
}

/* tab menu */
#tab_menus {
    margin:0;
    padding:0;
    list-style:none;
}
#tab_menus li {
    margin-bottom:16px;
    float:left;
    padding:0px;
}
#tab_menus li a {
    padding:8px 10px;
    color:#505050;
    border-width:1px 0 1px 1px;
    border-style:solid;
    border-color:#ae9f96;
    background-color:#eae4e0;
    background-image:none;
    font-weight:bold;
    font-size:0.9em;
    display:block;
}
#tab_menus li a:hover {
    color:black;
}
#tab_menus li.selected a {
    border-bottom:0 solid white;
    background:white url("blt_arrowdown.gif") no-repeat center bottom;
    color:black;
}
CSS 적용 후 모습

.tab_right {
    margin-bottom:16px;
    border-width:0 0 1px 1px;
    border-style:solid;
    border-color:#ae9f96;
    width:80px;
    height:31px;
    float:left;
}

/* content */
.content {
    clear:both;
    padding-left:10px;
}
.content h3 {
    margin:0;
    padding:0;
    font-size:1.2em;
    color:#ff4800;
}

tab menu의 a를 block으로 잡고 hover를 주어 onMouse상태일때 Javascript없이도 변화를 줄 수 있게 하였다.
#Menu_02, #Menu_03에 display:none을 안 준 것을 궁금해 하는 독자가 있다면, 당신은 천재!
Javascript없이도 모든 content의 접근성을 보장하기 위해서다. 이건 조금 후 다시 설명하기로 하고..

자 이제는 마무리. Javascript로 tab menu 동작을 만들자.
mootools 1.11(Element.Event, Element.Selectors)을 이용하였다
var selected_menu = 0;
Javascript 적용 후 모습

var menus = $$('#tab_menus li');
var contents = $$('div.content');
contents.each(function(div, i) {
    if (i != 0) {
        div.setStyle('display', 'none');
    }
})

menus.each(function(quick_link, i) {
    quick_link.getElement("a").blur();
    quick_link.addEvent('click', function(event) {
        e = new Event(event).stop();
        contents[selected_menu].setStyle('display', 'none');
        menus[selected_menu].removeClass('selected');

        contents[i].setStyle('display', 'block');
        quick_link.addClass('selected');
        selected_menu = i;
    });
});

#Menu_01을 제외한 다른 content들은 가려주었고, tab menu의 박스에 click 이벤트를 걸어줌으로써 toggle 기능이 완성이 되었다.
만약 content들을 CSS에서 가려주었다면(#Menu_02, #Menu_03 display:none) CSS는 render가 되었는데 Javascript가 동작이 안되는 상황이 오면 다른 content에 접근할 방법이 없어진다.
Javascript로 원하는 content를 display:block으로 바꿔줘야 하는데 Javascript가 동작이 안되니 tab을 백날눌러도 그 tab의 content는 볼 수 가 없게 되는 것이다.


결론.
결국은 content는 CSS와 Javascipt에 영향을 받지 않게 설계,코딩 되어야 하고 더불어 semantic하게 markup되어야 한다는 것이다.

다운로드
미리보기 (링크걸리는줄 알았는데 그게 아니네요. 아..이럴때 개인서버가 살아있었다면..)
tab-menu.html




압축파일(html, js, images)
tab-menu.zip





ps > 이거 스크롤의 압박이;;
크리에이티브 커먼즈 라이선스
Creative Commons License

'작은 팁' 카테고리의 다른 글

[JS] IE6인지 구분하기  (0) 2008/08/20
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (3) 2008/03/06
IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)  (0) 2008/02/04
IE6 에서 print 했는데 글씨가 겹쳐서 나올때  (0) 2008/02/01
mac profile  (0) 2008/01/31
TAG CSS, HTML, JavaScript, MooTools, Semantic, tabmenu, 탭메뉴
Trackback (0) : Comment (3)
Posted by Johan Kim 기다림
2008/03/05 16:30

WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데.. 웹표준/접근2008/03/05 16:30

일전에 적었던 CSS 에 바라는것들에서 border options에 관한것을 Tell the CSS WG what you want from CSS3에다가 남기고 왔다.
(WSP에 CSS3에 추가했으면 하는 IDEA를 접수하고 있다. 자세한것은 군우님이 Standard Magazine에 쓰신 글을 참고 http://forum.standardmag.org/viewtopic.php?id=1962)

역시 영어는 어렵다 ㅠ,.ㅠ
친한 동생한테 번역을 부탁해서, 그걸로 코멘트를 남기긴 했는데..
흠..번역한걸 읽어보니...내가 한글로 보낸거랑 조금 내용이 틀린것 같기도 하고 ㅠ,.ㅠ
뭐 WSP에서 알아서 듣겠지 -ㅅ-;; 난 동생을 믿는다!

아참. CSS 에 바라는것들에 적었던 parent selector 가 추가가 되었다. 물런 사용법은 틀리지만 ㅎㅎ
round에 관련된것은 이미 많은 분들이 코멘트를 남겨 놓으셧다.
reset도 번역해서 올리고 싶은데..역시 짧은 영어실력으론..크흑;
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹표준/접근' 카테고리의 다른 글

웹 표준 경진대회  (2) 2008/05/22
Martian Headsets  (0) 2008/04/15
WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..  (0) 2008/03/05
메뉴들은 뭐로 마크업 해야 될까?  (0) 2008/02/13
HTML5 초안 릴리즈, IE8 Acid2 성공~  (2) 2008/01/31
IE 접근금지..?  (2) 2007/12/21
TAG border dashed, border dotted, CSS, css3, parent selector, Web Standards Project
Trackback (0) : Comment (0)
Posted by Johan Kim 기다림
2008/02/04 17:46

IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때) 작은 팁2008/02/04 17:46

IE에서 display:none인 element를 toggle할때(block/none) IE에서 전 과 후의 여백이 틀려지는 상황이 발생하는 경우가 있는데
사용자 삽입 이미지

이럴때 해결책은 min-height를 넣어주면 된다.

IE6은 min-height를 지원않으므로 어쩔 수 없이 Hack을 써야한다.

height:37px; /* IE6 */
height /**/:auto; /* FF, IE7 */
min-height:37px; /* FF, IE7 */

height만 적어주어도 되지 않느냐~? 란 의문이 들 수 도 있겠지만 그렇게 되면 display:none인 element가 block(show)상태가 되었을때 position:absoulte된 것 처럼 위에 덮어쓰게 된다.
사용자 삽입 이미지

크리에이티브 커먼즈 라이선스
Creative Commons License

'작은 팁' 카테고리의 다른 글

코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (3) 2008/03/06
IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)  (0) 2008/02/04
IE6 에서 print 했는데 글씨가 겹쳐서 나올때  (0) 2008/02/01
mac profile  (0) 2008/01/31
table 에서 overflow:hidden 하기  (0) 2008/01/24
TAG CSS, display, IE, margin, toggle
Trackback (0) : Comment (0)
Posted by Johan Kim 기다림