'CSS'에 해당되는 글 24건

  1. 2011/03/17 CSS for iPad Orientation (화면회전)
  2. 2011/03/14 CSS for Retina Display (background) (1)
  3. 2009/02/02 IE7에서 text-decoration이 이상하게 나올때.
  4. 2008/06/25 CSS Editors Reviewed
  5. 2008/03/06 탭메뉴는 어떻게 코딩 해야 할까? (4)
  6. 2008/03/05 WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..
  7. 2008/02/04 IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)
  8. 2008/02/01 IE6 에서 print 했는데 글씨가 겹쳐서 나올때
  9. 2008/01/24 table 에서 overflow:hidden 하기
  10. 2008/01/23 애용하는 CSS Hack 2가지. (4)
  11. 2008/01/03 CSS visibility vs display
  12. 2007/12/28 IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제
  13. 2007/12/28 CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기 (6)
  14. 2007/12/27 IE 7 에서 dt, dd 좌측여백이 생기는 문제 (2)
  15. 2007/10/17 CSS 에 바라는것들 (7)
  16. 2007/04/05 CSS Naked Day라서 CSS 뺏더니.. (1)
  17. 2007/02/14 CSS Selector에 대해 알아봅시다~ [응용편 #3] (4)
  18. 2007/02/13 CSS Selector에 대해 알아봅시다~ [응용편 #2]
  19. 2007/02/09 CSS Selector에 대해 알아봅시다~ [응용편 #1] (2)
  20. 2007/02/07 CSS Selector에 대해 알아봅시다~ [초급편] (6)
  21. 2007/02/06 font-size: em을 처음쓰시는 분들을 위한 간단한 팁 (12)
  22. 2007/01/18 웹접근성에 대한 고민.. (2)
  23. 2006/12/28 Ajax로 Select Box 비스무리하게 구현하기
  24. 2006/12/28 CSS 생일 축하 합니다~
웹[기술|표준|접근]/작은 팁2011/03/17 11:47

CSS for iPad Orientation (화면회전)

CSS for Retina Display 에 이어 이번엔 IPad 화면 회전에 따른 CSS 적용법에 대해 간략하게 적어보겠다.
사실 화면회전에 따라 CSS를 구별해서 적용하는 경우는 드물것이나, IPad에 맞춤 웹페이지를 제작하다보면 어느순간 필요해지는 부분이다.

1. Media Query
iPad Orientation의 Media Query는
all and (orientation:portrait)
all and (orientation:landscape)
이다.
portrait는 세로화면,
landscpae는 가로화면이다.


2. 불러오기
CSS for Retina Display와 동일하다

2-1. 별도의 CSS File을 만든경우
<link rel="stylesheet" media="all and (orientation:portrait)" href="/stylesheets/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="/stylesheets/landscape.css">

2-2. style을 구분하여 불러올 경우
<style type="text/css" media="all and (orientation:portrait)">
<style type="text/css" media="all and (orientation:landscape)">
2-3. 일반적인 style 안에서 불러올 경우
@media all and (orientation:portrait) {
     #for portrait style codes..
}
@media all and (orientation:landscape) {
    #for landscape style codes..
}


3. 예제
세로용에는 portrait, 가로용에는 landscape를 부여하고, CSS를 통해 제어해보겠다.
<style type="text/css" media="screen">
@media all and (orientation:portrait) {
    .portrait { display: block; }
    .landscape { display: none; }
}
@media all and (orientation:landscape) {
    .portrait { display: none; }
    .landscape { display: block; }
}
</style>

...

Orientation:
<div class="portrait">Portrait</div>
<div class="landscape">Landscape</div>


4. 확인
4-1. Portrait(세로모드)


4-2. Landscpae(가로모드)






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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS for iPad Orientation (화면회전)  (0) 2011/03/17
CSS for Retina Display (background)  (1) 2011/03/14
헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
Posted by Johan Kim hiphapis
TAG CSS, iPad, Landscape, media query, Orientation, Portrait, 가로, 세로, 화면회전
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/186 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2011/03/14 13:12

CSS for Retina Display (background)

IPhone4에서 웹페이지를 보다보면, 이미지가 살짝 깨져 보이는 경우가 있다.
Retina Display의 해상도 때문인데, 해결책은
2배 큰 이미지 만든 후,  Retina Display용 CSS 적용하면 된다.

1. 2배 큰 이미지 만들기
Retina Display가 기존 IPhone해상도의 2배로 커졌으니, 해당 이미지들도 2배 크게 만든 후 적용 시키면 된다.
예를들어 20x20 아이콘이었다면 40x40으로 만들면 된다.

2. 불러오기
자 그럼 Retina Display용 CSS는 어떻게 불러오느냐?
핵심은 Media Query!
Retina Display용 CSS의 Media Query를
screen and (-webkit-min-device-pixel-ratio: 2)
로 해주면 된다.

아이폰에서는 Safari로 접속을 하므로 Webkit CSS를 써도 무관하지만.. 이런식으로 특정 Browser에 Dependent된 기술은 바람직하지 않다고 생각한다. 이 문제는 할일이 없어 시간이 엄청 남아돌때 포스팅 하기로 하고..
CSS 로드 케이스별로 보면.

1. Retina Display용 CSS 파일을 만들경우
<link rel="stylesheet" href="retina.css" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" title="title" charset="utf-8">

2. html안에서 Retina Display용 CSS를 추가할 경우
<style type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">

3. 일반 CSS안에 Retina Display용 CSS를 추가할 경우
@media screen and (-webkit-min-device-pixel-ratio:2) { 
    #icon {
        ....
    }
}
이런 방식으로 추가를 하면 된다.

3. 적용 방법
마지막으로 적용방법이다.
기존의 코드는 손대지 말고, Retina Display용 CSS만 추가하면 된다.
background-image: url("icon40x40.png");
-webkit-background-size:20px 20px;
이런식으로 2배 커진 이미지를 배경이미지로 Overwrite하고, 
배경 이미지 크기를 기존 아이콘의 사이즈로 적어주면 된다.


배경이 아닌 일반 이미지 또한 2배로 크게 만들고 강제로 기존 사이즈 적어주면 되긴 하는데..
이 경우는 접속 환경의 Retina Display인지 아닌지 구분할 수 없다는 문제점이 있다.
하지만 아래 나온 class 할당 방식으로 해결할 수 있긴 하지만 바람직한 방법은 아닌듯 하며, 
번거롭지만 배경이미지로 바꾸는게 나아보인다.


배경이미지외 
Retina Display에만 특별히 적용을 해야 할 경우  class를 부여해서 조절하는 방법이 있다.
.forWeb { display: block }
.onlyRetina { display: none }

@media screen and (-webkit-min-device-pixel-ratio:2) { 
    .forWeb { display: none }
    .onlyRetina { display: block }
}

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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS for iPad Orientation (화면회전)  (0) 2011/03/17
CSS for Retina Display (background)  (1) 2011/03/14
헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
Posted by Johan Kim hiphapis
TAG Background, background-image, CSS, image, iPhone4, media query, Retina
Trackback 0 Comment 1

TRACKBACK http://hiphapis.net/trackback/184 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://www.magenballon.biz/magenband/ BlogIcon Magenband

    당신은 자신의 마지막 단락에 큰 지점을 생산하고 있습니다. 저희는 귀하의 포인트와 더 함께 동의하지 못했습니다. 오늘날의 현대 세계에서,이 문제에 접근은 오늘날의 아이가 부족한 것입니다. 우리는 우리의 방법을 잃지 않을 때문에 우리 애들이 주제에 대한 자세한 내용을 보려면 있는지 확인해야합니다.

    2011/11/21 05:15 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2009/02/02 12:58

IE7에서 text-decoration이 이상하게 나올때.

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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

헤딩 제대로 사용하기. - 후편(완)-  (3) 2010/01/09
헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (2) 2010/01/06
IE7에서 text-decoration이 이상하게 나올때.  (0) 2009/02/02
Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
[JS] IE6인지 구분하기  (0) 2008/08/20
CSS Frameworks  (0) 2008/08/01
Posted by Johan Kim hiphapis
TAG CSS, IE7, text-decoration, vertical-middle
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/149 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/06/25 11:21

CSS Editors Reviewed

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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

[JS] IE6인지 구분하기  (0) 2008/08/20
CSS Frameworks  (0) 2008/08/01
CSS Editors Reviewed  (0) 2008/06/25
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
탭메뉴는 어떻게 코딩 해야 할까?  (4) 2008/03/06
IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)  (0) 2008/02/04
Posted by Johan Kim hiphapis
TAG CSS, css editor, Editor
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/132 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

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

TRACKBACK http://hiphapis.net/trackback/112 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://sylee.kr BlogIcon sy

    좋은 소스 잘 봤습니다...
    클래스로 하면 한 페이지에 복수의 탭메뉴를 구성하는데 더 용이할 것 같습니다.

    2008/04/11 18:02 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      감사합니다:)

      복수의 탭메뉴를 구성할때 말씀하신대로 class를 부여해서 하는것도 좋은 방법이죠! ㅎㅎ

      2008/04/12 11:43 [ ADDR : EDIT/ DEL ]
  2. chan

    소스 다운받았어요ㅋㅋ 탭 코딩해야되는데 참고해야겠어요ㅋ
    감사합니다~

    2009/01/15 17:33 [ ADDR : EDIT/ DEL : REPLY ]
  3. backy

    어후 감사합니다.
    제가 진행하는 일게 도움이 될꺼 같아요!!!

    2011/01/31 02:25 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/생각2008/03/05 16:30

WSP 에 CSS3 에 추가하고 싶은 idea 하나 적었는데..

일전에 적었던 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
Posted by Johan Kim hiphapis
TAG border dashed, border dotted, CSS, css3, parent selector, Web Standards Project
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/109 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/02/04 17:46

IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)

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
탭메뉴는 어떻게 코딩 해야 할까?  (4) 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
Posted by Johan Kim hiphapis
TAG CSS, display, IE, margin, toggle
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/101 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/02/01 17:30

IE6 에서 print 했는데 글씨가 겹쳐서 나올때

웹페이지에서는 말짱한데 실제로 Print를 해 보면 글씨가 겹펴서 나올때가 있다. (물런 IE6만)
해결책은 font-family 맨 앞을 굴림, 돋움 같은 한글 글자체를 선언해 주면 된다.

font-family:'굴림', 'Arial','Verdana';

구글링을 해 봤지만 정확한 원인을 알아내진 못했고, 다만 추측하기로 font-family(글씨체)가 한글 글씨체가 아니기 때문에 그런게 아닐까..?

아무튼, 멍청한 IE6
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

탭메뉴는 어떻게 코딩 해야 할까?  (4) 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
애용하는 CSS Hack 2가지.  (4) 2008/01/23
Posted by Johan Kim hiphapis
TAG CSS, IE6, print
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/100 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/01/24 16:54

table 에서 overflow:hidden 하기

  • IE를 위해서 table 에다가 table-layout:fixed 주기
  • FF를 위해서 td 에다가 overflow:hidden 주기
<table style="table-layout:fixed">
<tr>
    <td style="overflow:hidden"><img src="" alt="some image" /></td>
    <td>&nbsp;</td>
</tr>
</table>


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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

IE6 에서 print 했는데 글씨가 겹쳐서 나올때  (0) 2008/02/01
mac profile  (0) 2008/01/31
table 에서 overflow:hidden 하기  (0) 2008/01/24
애용하는 CSS Hack 2가지.  (4) 2008/01/23
IE7 Debugger  (0) 2008/01/15
CSS visibility vs display  (0) 2008/01/03
Posted by Johan Kim hiphapis
TAG CSS, ff, IE, overflow, TABLE
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/94 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2008/01/23 01:53

애용하는 CSS Hack 2가지.

HTML  코딩을 하다보면 어쩔 수 없이 CSS Hack을 사용해야 만 하는 경우가 있다.
저질 IE6만 특별하게 왕따를 시키거나, FF만 특별대우를 해주거나, 혹은 IE6, IE7, FF 각개격파를 하거나..
일반적으로 비중이 높은것이 IE6왕따시키기, FF 특별대우 해 주기 인데
이것들을 Hack하는 방법은 여러가지가 있겠지만 아주 간단한 Hack 한가씩만 공개(?)를 한다.

먼저 IE6(저질)만 왕따시키기 방법은
  1. IE6에만 적용시킬 CSS를 쓰고
  2. IE7, FF에 적용시킬 CSS는 style name을 쓰고 한 칸 공백을 준 후 /**/(주석) style value를 적어주는 방법이다.
  3. 여기서 중요한것은 순서인데 IE6 CSS를 먼저 쓴 후 IE7, FF CSS를 적는것이다.
    순서를 바꿔서 IE7, FF CSS을 먼저 적었다면 IE7, FF는 자기들을 위해 마련된 CSS를 적용한 후 IE6 CSS도 적용하면서 덮어씌워지기 때문이다.
말로 적으니 역시 무슨말인지 모르겠네;; 여기 간단한 예제를 보자.
padding:0px; /* Only IE6 */
padding /**/:5px; /* IE7, FF */


IE6만 왕따시키는 방법을 알았으니 이제 FF를 특별대우 하는 방법도 알아보자.
  1. FF CSS를 적고
  2. IE형제들에게 적용시킬 CSS는 style name 앞에 *(곱하기)를 붙인다.
  3. 이것 역시 순서가 중요한데 FF용이 먼저 쓰고 IE형제들이 나중에 쓴다. 이유 또한 마찬가지다.
    (IE형제를 먼저 썻다고 가정할 경우)IE형제가 자기들용 CSS를 읽고 다시 FF용 style을 읽으면서 덮어씌워지기 때문이다.
이것 역시 말로 적으니 뭔말인지..영...숭구리당당 하다. 역시 예제가 최고다!
padding:0px; /* For FF */
*padding:5px; /* IE brothers */


이 두개의 Hack만 있으면 일반적인 상황은 거진 다 해결된다.


ps. IE6 저질...!
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

mac profile  (0) 2008/01/31
table 에서 overflow:hidden 하기  (0) 2008/01/24
애용하는 CSS Hack 2가지.  (4) 2008/01/23
IE7 Debugger  (0) 2008/01/15
CSS visibility vs display  (0) 2008/01/03
IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제  (0) 2007/12/28
Posted by Johan Kim hiphapis
TAG CSS, CSS Hack
Trackback 0 Comment 4

TRACKBACK http://hiphapis.net/trackback/92 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://deuxksy.tistory.com BlogIcon 김석영

    오오!~ 이렇게도 가능 하군요 전 이때까지 주석이 있는건 보기 편하라고 한걸중 알았는되 쿨럭ㅡㅡ;; 저런기능이 별도로 있었다니 이런 OTN;;;;
    염치 없지만 해당 자료 스크랩을 해가되 괜찬을련 지요 ^^;;;

    2008/01/24 11:15 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      물런이죠 :)
      엄밀히 말하면 IE6 만 왕따시키는게 아니라 IE6 과 IE7, FF 를 구분시키기.
      FF 와 IE6, IE7 구분시키기 이죠

      2008/01/24 12:46 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://inkorea.tistory.com/ BlogIcon 바우

    퍼갑니다..

    2008/04/28 15:56 [ ADDR : EDIT/ DEL : REPLY ]
  3. 레인보우

    저도 퍼갈께요 감사^^

    2008/09/30 12:17 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2008/01/03 13:07

CSS visibility vs display


<div onclick="this.style.display = 'none'">disply</div>
<div onclick="this.style.visibility = 'hidden'">visibility</div>
<div>block</div>
<ul>
    <li onclick="this.style.display = 'none'">disply</li>
    <li onclick="this.style.visibility = 'hidden'">visibility</li>
    <li>block</li>
</ul>

display visibility 모두 펼쳐진 상태

visibility 속성을 hidden으로 지정할 경우 해당 Element만큼 여백으로 남겨 흔적을 남기게 됩니다.
상단 문구 참고

display 속성값을 none으로 지정했을 경우 visibility:hidden과 달리 흔적도 남기지 않습니다. ㅎㅎ
상단 문구 참고


참고링크 #1 http://www.w3.org/TR/CSS21/visuren.html#propdef-display
참고링크 #2 http://www.w3.org/TR/CSS21/visufx.html#propdef-visibility
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

애용하는 CSS Hack 2가지.  (4) 2008/01/23
IE7 Debugger  (0) 2008/01/15
CSS visibility vs display  (0) 2008/01/03
IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제  (0) 2007/12/28
CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기  (6) 2007/12/28
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (2) 2007/12/27
Posted by Johan Kim hiphapis
TAG CSS, display, visibilty
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/88 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2007/12/28 12:04

IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제

IE7에서(6은 확인 못해봤습니다.) fieldset에 legend가 있을때 fieldset에 bgcolor 줄경우
fieldset border 안으로만 bg가 칠해지는게 아니라 legend의 영역까지 fieldset의 bgcolor가 칠해져 버린다.
ie fieldset bgcolor가 legend영역까지 넘어가는 버그

legend의 bgcolor는 textNode가 있는 부분만 칠해지기때문에 해결책이 되지 못하고
legend width:100% 해도 왼쪽영역은 여전히 fieldset bgcolor가 먹혀져 있게 된다.
여기에 margin-left:-10px;padding-right:10px 같은 방식으로 장난을 쳐보면 해결이 된 것 같아 보이지만 fieldset의 border가 사라져 버리게 된다.
위 내용 참고
(그림판 역시 최고 ㅠ,.ㅠ)

이럴경우 fieldset position을 relative로 주고 legend의 position을 absolute로 줘서 positioning을 해 주면 해결이 된다. (CSS Position 을 참고)

fieldset {
    background-color:yellow;
    border:1px dashed black;
    margin-top:15px;
    /* ie */
    *position: relative;
    *padding-top:15px;
}
legend {
    background-color:red;
    /* ie */
    *position: absolute;
    *top: -8px;
    *left: 10px;
}

ie fieldset bgcolor가 fieldset에만 적용되었음

(참고 http://www.communitymx.com/content/article.cfm?page=1&cid=DD9F3)
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

IE7 Debugger  (0) 2008/01/15
CSS visibility vs display  (0) 2008/01/03
IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제  (0) 2007/12/28
CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기  (6) 2007/12/28
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (2) 2007/12/27
JSSpec용 EditPlus ACP,STX 파일  (0) 2007/12/05
Posted by Johan Kim hiphapis
TAG Background, background-color, bgcolor, CSS, fieldset, IE
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/86 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2007/12/28 11:58

CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기

relative는 parent element를 기준으로 상태 위치로 지정하는 방법이고
absoulte는 절대 위치로 지정하는 방법인데 이를 하게되면 child element가 아닌 절대위치를 가진 element가 되기때문에 floating과 상관없이 해당 element는 붕 떠있는 상태가 된다.
(1) parent element에는 아무값을 주지 않고 본인 스스로 relative를 줘도 되지만 이럴경우 자기 자신이 parent에 속해져 있는 상태가 되기 때문에 자신의 width 혹은 height만큼 parent element도 영향을 받게 된다.

(2) 하지만 parent element를 relative를 주고 child element를 absolute를 주게 되면 parent를 기준으로한 절대위치가 된다.

물런
간단히 예를 들어 보자
HTML 코드는 아래와 같다
<div id="parent_element">
    Parent Element
    <div id="child_element">Child Element Line number #1 <br />Child Element Line number #2 <br/>Child Element Line number #3 </div>
</div>
<div id="absolute_element">Absolute Element</div>

absolute만 사용할 경우의 CSS는 이렇다. (1번)
#parent_element {margin:50px;background:pink;}
#child_element {position:relative;top:50px;left:50px;background:yellow}
#absolute_element {position:absolute;top:10px;left:10px;background:orange;}

이 CSS를 적용한 후 브라우저에서 확인을 하면 아래와 같이 된다.
(1)문구 참고


parent element를 relative를 주고 child element에 absolute를 줄경우의 CSS는
#parent_element {position:relative;margin:50px;background:pink;}
#child_element {position:absolute;top:50px;left:50px;background:yellow}
#absolute_element {position:absolute;top:10px;left:10px;background:orange;}

브라우저에서 확인을 하면
사용자 삽입 이미지
와 같이 parent element 와는 독립적인 상태가 된다.


꼭 후자것이 좋은건 아니다. 상황에 따라 알맞는것을 사용하면 된다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS visibility vs display  (0) 2008/01/03
IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제  (0) 2007/12/28
CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기  (6) 2007/12/28
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (2) 2007/12/27
JSSpec용 EditPlus ACP,STX 파일  (0) 2007/12/05
EditPlus 에서 monaco(mac 기본 폰트)사용하기. (XP에서 안티알리아싱(Anti-Aliasing 설정)  (3) 2007/10/01
Posted by Johan Kim hiphapis
TAG absolute, CSS, position, POSITIONING, relative, 상대적, 절대적, 포지셔닝
Trackback 1 Comment 6

TRACKBACK http://hiphapis.net/trackback/85 관련글 쓰기

  1. ttt  삭제

    2010/03/18 12:16TRACKBACK FROM 꿈꾸는 마노의 초록색 지붕

    http://hiphapis.net/trackback/85

댓글을 달아 주세요

  1. Favicon of http://www.yoyoummy.com BlogIcon 양경아

    굿팁이에요~

    2008/02/11 09:37 [ ADDR : EDIT/ DEL : REPLY ]
  2. 얌얌

    제가 찾던 거예요. 감사합니다~~~~

    2008/03/26 16:37 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      도움이 되셧다니 제가 기쁘네요!
      감사합니다! ;)

      2008/03/27 13:03 [ ADDR : EDIT/ DEL ]
  3. 홍군

    좋은 자료 입니다. ^^(--> (http://hong2ne.tistory.com/18 ) 여기로 퍼갑니다.
    혹...문제 된다면 삭제하겠습니다.)

    2010/03/15 22:11 [ ADDR : EDIT/ DEL : REPLY ]
  4. 와호홍!

    유익한 정보 감사합니다!

    정말 애먹었는데

    참조해서 해결했습니다.

    부모 relative
    자식 absolute 생각도 못했네요 감사합니다!

    2010/12/28 12:02 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2007/12/27 19:18

IE 7 에서 dt, dd 좌측여백이 생기는 문제

IE7에서 dt, dd중 dt를 display:none을 했는데도 dd의 좌측 여백이 여전이 존재한다.(물런 margin,padding 모두 0)
<dt style="display:none;margin:0;padding:0">Title</dt>
<dd style="margin:0;padding:0">Description</dd>

해결책은 의외로 쉽다.
dl로 감싸주면 된다.

<dl style="margin:0;padding:0">
    <dt style="display:none;margin:0;padding:0">Title</dt>
    <dd style="margin:0;padding:0">Description</dd>
</dl>

FF때문에 dl 에 margin,padding을 0을 줘야 한다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제  (0) 2007/12/28
CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기  (6) 2007/12/28
IE 7 에서 dt, dd 좌측여백이 생기는 문제  (2) 2007/12/27
JSSpec용 EditPlus ACP,STX 파일  (0) 2007/12/05
EditPlus 에서 monaco(mac 기본 폰트)사용하기. (XP에서 안티알리아싱(Anti-Aliasing 설정)  (3) 2007/10/01
[CSS] IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (2) 2007/08/31
Posted by Johan Kim hiphapis
TAG CSS, dd, DL, DT, IE7, margin, 여백, 좌측여백
Trackback 0 Comment 2

TRACKBACK http://hiphapis.net/trackback/84 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://naradesign.net/ BlogIcon 정찬명

    dt, dd 태그 밖에 dl을 감싸주지 않으면 일단 invalid markup 아닌가요? 그리고 dl에 기본 마진이 있는것은 어쩌면 ul, ol 에 기본마진이 존재하는것과 같은 필요가 아닌가 생각 됩니다. ^^

    2007/12/28 04:58 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      네 맞아요~ㅎㅎ ol, ul에 대해선 다들 잘 아는데, dl에 대해선 비교적 덜 아시는거 같아서요.

      2007/12/28 10:49 [ ADDR : EDIT/ DEL ]

웹[기술|표준|접근]/생각2007/10/17 22:56

CSS 에 바라는것들

parent 좀 select 하게 해 달라
<li><a href='someLink'>Click Me</a></li> 같은 상황에서..
Click Me에 OnMouse(온마우스) 혹은 Click(클릭) 일때 li가 바뀔 수 있도록

a:hover^ { background-color:red }

처럼..(여기서 a:hover^ 는 Parent를 지칭하는 예약어)


CSS 초기화 기능
사이트의 규모가 좀 커지다보면, 여러개의 CSS파일을 만들게 된다.
그러다보면 어떤 css 파일에서 선언한것들을 취소시키고 싶을때가 있다.

쉽게 말을 하면, a.css 파일에서

body, ul, ol, li, p, fieldset,...... { padding:0;margin:0; }

라고 선언을 했다. 그런데 지금 작업하는 파일에서는
ul, li 를 기존 margin과 padding을 줘야 하는 상황이 왔을경우 초기화 하는 방법이 없다.
중첩 li 가 나타나도 모두 여백없이 딱 붙어있게 되어서, 중첩의 깊이(depth)를 표현할 방법이 없어진다.
이렇게 되면 위의 구문에서(a.css) ul, ol, li 항목을 삭제하고, 기존의 영향을 받던 dom을 전부 찾아서 따로 정의를 해줘야 하는 끔찍한 상황이 생긴다.

이럴때 초기화를 시키거나, 다른 css로 초기화시키는 기능이 있다면 좋을것이다.

.this_ul, .this_ol, .this_li { default; }
.this_p { reset:#some_p }


border dotted, dashed 같은거에 옵션좀 추가해주라
디쟈인을 받아보면 dotted도 아니고 dashed도 아닌경우가 자주 있다. 이렇게 되면 결국 이미지를 따서 background로 처리하거나 image로 처리하게 된다.
막상 이거 할려면 무지 귀찮아진다.

border의 칠해진 부분 size지정과 border간의 간격에 대한 지정을 할 수 있으면 좋을것 같다
예를들어, 한칸의 border의 size가 width 10px height 3px, 칸사이의 간격이 10px이고, 색깔이 검정색이라고 한다면(아래 이미지 참고)
상위 문구 참고

.border {
border-width:10px;
border-height:3px;
border-margin:10px;
border-color:black;
}

.border_top {
border-top-width:10px;
border-top-height:3px;
border-top-margin:10px;
border-top-color:black;
}

이런 느낌..?

Box Round(라운드)도 CSS에서 할 수 있게 해줘!!
background 혹은 border로 테두리를 둥그렇게 처리된 디쟈인들을 종종 작업하게 될때가 있다.
이것도 위의 border와 비슷하게..
둥그스름한 정도, 색깔, background인지 border인지 설정할 수 있게 해 주면 좋겠다..

배경색을 검정색으로 반지름 5px짜리 라운드를 만들고 싶을경우(아래 이미지 참고)
상위 문구 참고


.round_box {
round-radius:5px;
round-style:background;
round-color:black;
}
이런식으로 말이다.


정작 CSS에 바라는것을 적을려니 몇가지밖에 안떠오르지만, 실제로 작업하다보면 답답할때가 한두번이 아니다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

HTML5 초안 릴리즈, IE8 Acid2 성공~  (2) 2008/01/31
IE 접근금지..?  (2) 2007/12/21
CSS 에 바라는것들  (7) 2007/10/17
DOM 스크립트 - 다이내믹한 웹 표준  (0) 2007/07/24
DAUM 메인페이지 CSS 날라가다~  (2) 2007/07/11
서울시의 장기전세주택 '시프트' 홈페이지..인덱스화면;;  (0) 2007/07/11
Posted by Johan Kim hiphapis
TAG CSS
Trackback 0 Comment 7

TRACKBACK http://hiphapis.net/trackback/63 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://minicube.kr BlogIcon 아마티

    1번은 <a>태그의 display속성을 inline-block으로 바꿔서 사용하는 방법을 쓰거나 아예 hover속성을 li에 걸 수도 있겠구요, 2번은 현재로선 원래 초기 속성을 그대로 재정의해서 사용하는 방법이 있겠죠. 장단은 있겠지만 현존 브라우저 기본 css가 전부 다르고 나중에도 또 변화될 거를 생각한다면 현재가 더 낫다는 생각이 듭니다.
    3번은 있었으면 좋긴 하겠지만, 그건 디자이너의 재량이니 디자이너를 설득하든지 그냥 이미지로 배경을 까는 것이 더 맘이 편하고, 4번의 경우는 css3에서 도입이 된다고 들었습니다.

    어쨌든 저도 css를 많이 만지면서 아~ 그랬었지~ 했던게 많아서 반갑군요. ㅎㅎ

    2007/10/18 10:56 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      1번, a의 display 속성을 변경하는게 바람직한 방법인것 같네요.ㅎㅎ
      하지만 제가 예시한 경우가 아니더라고 parent node와 뭔가를 하게 되는일은 종종 있습니다.
      CSS로 끝낼 수 있는것인데, 단지 parent selector가 없어서 번거롭게 js까지 가는게 아쉬워서 적은것이죠. ㅎㅎ

      2번, ul같은경우 어떻게 하면 초기화할 수 있나요..?

      2007/10/18 13:51 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://minicube.kr BlogIcon 아마티

    margin, padding, list-style을 주면 되는 것으로 알고 있습니다. 원래 초기값을 잘 모르는 관계로 정확한 값은 모르겠지만요.

    2007/10/18 21:42 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      ul { margin:0;padding:0; }
      라고 정의가 되어 있는데, 아래 ul을 그대로 표현하고 싶으면 어떻게 하면 되나요..?
      <ul>
      <li>1-1</li>
      <li>1-2
      <ul>
      <li>2-1</li>
      <li>2-2</li>
      </ul>
      </li>
      </ul>
      (혹시 방법이 있나 싶어서 찾아봤는데 없더라구요)

      2007/10/22 10:57 [ ADDR : EDIT/ DEL ]
  3. Favicon of http://mulriver.egloos.com BlogIcon 낭망백수

    일반적인 초기화는... 초기화파일만 따로 관리해서 필요할때 다시 import 하는 방법으로...
    특정 객체의 초기화는 서버단 동적 파일 처리로... 했는데,

    포스트 보고 곰곰히 생각해보니
    만약 CSS 에서 이것이 가능하게 한다는 것은
    코드 블럭이나 코드 스페이스 개념이 들어간다는 뜻이되겠죠? ^^;

    그래서 php등의 동적처리보다는...
    초기화를 위한 class 를 따로 관리하는 것이
    현재로선 정적/동적 처리 양자에서 어느정도 이득을 볼 수 있는 방법이라는 생각이드네요.

    CSS 는 정의하는 파일이지 로직이 아니니까요.
    꾸벅~!

    2007/12/17 12:58 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      "그래서 php등의 동적처리보다는..." 말씀은 php에서 판단해서 class(CSS) 를 관리하는걸 말씀하시는거죠..? (잘 이해를 못해서 ㅎㅎ;)

      현 시점에서의 방법은 말씀하신대로 초기화 클래스를 따로 두는 방법밖에 없지요..

      역시 너무 구려요 ㅠ,.ㅠ

      2007/12/18 19:03 [ ADDR : EDIT/ DEL ]
  4. bangul

    라운드 코너는 이미 모질라로 되고 있는 부분이네요
    여우나 동물원으로 보시면 되구요 단지 탐험자에서만 안되네요

    2010/04/09 19:53 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/그 외2007/04/05 15:12

CSS Naked Day라서 CSS 뺏더니..

빼면 영 엉망이 되서 안되겠네요;;
새로운 스킨을 만들고 싶지만, 디쟈인능력이 너무 떨어져서..ㅠ,.ㅠ

http://naked.dustindiaz.com/

나도 deutism 님 물고 늘어져야징..
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 그 외' 카테고리의 다른 글

Flickr팀을 만났습니다!  (2) 2007/08/24
Flickr팀을 만나보세요!  (3) 2007/08/09
미투데이, 플레이톡 사용시 주의점.  (0) 2007/04/25
[jQuery] jQuery 간단한 소개 및 prototype, yui와 간단 비교  (12) 2007/04/17
CSS Naked Day라서 CSS 뺏더니..  (1) 2007/04/05
글로벌 웹 기술 워크샵  (0) 2007/03/09
Posted by Johan Kim hiphapis
TAG CSS, CSS Naked Day
Trackback 0 Comment 1

TRACKBACK http://hiphapis.net/trackback/35 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://mydeute.com BlogIcon deute

    흙;

    2007/04/05 17:48 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2007/02/14 11:43

CSS Selector에 대해 알아봅시다~ [응용편 #3]

마지막으로 여러 class를 선택하는 방법을 보시겠습니다.

<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>

ol {
list-style:none;
margin-left:20px;
}

이런 상황이었는데,
새로 올라온것은 볼드를, 인기있는것은 밑줄로 표시를 하고 이 두가지 모두인경우는 볼드, 밑줄 전부 주기로 하겠습니다.
우선 HTML을 수정해야 겠지요?

<ol>
<li class="new">a</li>
<li class="hot">b</li>
<li class="good">c</li>
</ol>

그리곤 각각에 맞는 CSS를 정의해야겠죠?

.new {
font-weight:bold;
}

.hot {
text-decoration:underline;
}

.good {
font-weight:bold;
text-decoration:underline;
}

자~, 이렇게 하면 우리가 원한대로 되네요..!
드디어 끝~!! 입니다.!!!






하지만, 이러면 왠지 섭섭한 느낌을 지울 수 없습니다
왠지 쓸대없는 코드를 만든것 같은 느낌이라고 해야 할까요..?
자..그럼 어떻게 해야 할까요..?
눈치빠르신 분은 이미 눈치 채셨겠지만..class를 다중으로 선택 할 수 있습니다.!!
CSS는 new 와 hot만 정의하면 됩니다.

.new {
font-weight:bold;
}

.hot {
text-decoration:underline;
}

그리고 HTML 은

<ol>
<li class="new">a</li>
<li class="hot">b</li>
<li class="new hot">c</li>
</ol>

이렇게 class를 선언하면 됩니다.
2개 뿐만 아니라, 여러 다중으로 입력할 수 있습니다.
공백을 구분자로 class명을 기입하면 되지요!!



이로써 응용편은 끝이 났습니다.
어떤가요..? 재미 있으셨나요..?

제가 글재주가 없어, 다소 어렵게 설명되고..재미없는것 같아 안타갑지만..
실제로 코드들을 한번씩 해보신다면, 바로 이해하실 수 있으리라 생각됩니다.

부족한 글 읽느라 고생하셨습니다. ㅎㅎ

감사합니다.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

[js]현재 스크롤 위치 알아내기  (4) 2007/04/13
Prototype 1.5.1 release candidate  (2) 2007/03/13
CSS Selector에 대해 알아봅시다~ [응용편 #3]  (4) 2007/02/14
CSS Selector에 대해 알아봅시다~ [응용편 #2]  (0) 2007/02/13
CSS Selector에 대해 알아봅시다~ [응용편 #1]  (2) 2007/02/09
CSS Selector에 대해 알아봅시다~ [초급편]  (6) 2007/02/07
Posted by Johan Kim hiphapis
TAG CSS, Selector, 선택자
Trackback 0 Comment 4

TRACKBACK http://hiphapis.net/trackback/21 관련글 쓰기

댓글을 달아 주세요

  1. WOW~!

    4편의 강의만으로도 CSS 선택자에 대해 다소 아리송한 것들이 한번에 해결되었습니다!
    훌륭한 강좌를 공개해주셔서 정말 감사드립니다 ^^
    다음 고급 강좌도 기대하겠습니다!

    2007/03/30 02:34 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      헉, 부족한 글을 이리 칭찬해주시니 너무 감사드립니다.
      포스팅에 대한 반응이 없어서, 의기소침해하고 포기하고 있었는데, WOW~! 님 덕분에 마무리를 지어야 겠다는 의지가 생기네요, ㅎㅎ
      바쁜것들이 해결이 되는 즉시 바로 릴리즈 하겠습니다.
      지속적인 관심 부탁드리며, 감사합니다 :)

      2007/03/30 10:52 [ ADDR : EDIT/ DEL ]
  2. 독자

    넘 잘 봤습니다..^^
    책보다 더 이해 하기 쉬웠어요....ㅎㅎ
    전 전공자도 아니고
    책은 쩜 벅차더라구요..
    감싸합니다...^^

    2008/03/13 15:51 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2007/02/13 12:16

CSS Selector에 대해 알아봅시다~ [응용편 #2]

다른 응용방법, 자기 자신에 대한 class를 선택하는 방법(?)을 보시겠습니다.

<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

<ol class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>

.list {
list-style:none;
margin-left:20px;
}

디자인은 똑같지만, 시멘틱한 마크업을 위해 li, ol 를 구분해서 코딩 했다고 가정을 하겠습니다.
이렇게 서비스를 하던 어느날, ol 의 list 의 색깔을 바꾸고 볼드체를 주도록 변경이 되었다고 하겠습니다.

그렇다면 위에서 배웠던 하위 선택자를 써서 해보겠습니다.

.list {
list-style:none;
margin-left:20px;
}

ol .list {
color:red;
font-weight:bold;
}

헙..!! 그런데 이렇게 하니깐 안됩니다..ㅠ,.ㅠ
이유를 아시는 분 계시나요..?
그럼 여기서 잠깐 30초에서 1분동안 왜 안될지 생각을 해 봅시다..!!

















30초에서 1분동안 생각해보셨나요..?
어떤가요? 답이 나오셨나요..?
혹시나, 바로 스크롤을 내리신건 아니시죠...오~~~~???

정답은 바로...!!!
이 녀석은 ol 의 하위에 있는 녀석이 아니기 때문입니다.
즉 무슨말이냐 하면. ol 밑에있는 li 라면 하위선택자로 선택을 해야겠지만..
이 ol은 자기 자신이기 때문입니다.
무슨 말인지 이해 하셨나요..?
list라는 class가 li에 있는게 아니고, ol 자신에게 선언된것이란거죠..
아직 아리송 하시다고요..? 일단 코드 보시죠..

<ol class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ol>

인거지

<ol>
<li class="list">a</li>
<li>b</li>
<li>c</li>
</ol>

이게 아니니깐요..
이해 하셨죠..? 못하셨다면. 위 예제코드를 한번 더 보시면 도움이 되실꺼에요.

자, 이런 경우는 어떻게 해야하나..

.list {
list-style:none;
margin-left:20px;
}

ol.list {
color:red;
font-weight:bold;
}

이렇게 하면 됩니다. 공백없이 붙여 쓰는것이지요
좀 더 응용을 하면.

.list {
list-style:none;
margin-left:20px;
}

ul.list
{
color:blue;
text-decoration:underline;
}

ol.list
{
color:red;
font-weight:bold;
}

이런식으로 선언을 할 수 있겠죠.
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

Prototype 1.5.1 release candidate  (2) 2007/03/13
CSS Selector에 대해 알아봅시다~ [응용편 #3]  (4) 2007/02/14
CSS Selector에 대해 알아봅시다~ [응용편 #2]  (0) 2007/02/13
CSS Selector에 대해 알아봅시다~ [응용편 #1]  (2) 2007/02/09
CSS Selector에 대해 알아봅시다~ [초급편]  (6) 2007/02/07
font-size: em을 처음쓰시는 분들을 위한 간단한 팁  (12) 2007/02/06
Posted by Johan Kim hiphapis
TAG CSS, Selector, 선택자
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/20 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2007/02/09 01:24

CSS Selector에 대해 알아봅시다~ [응용편 #1]

이번편은 CSS Selector(이하 선택자)의 응용편을 포스팅하도록 하겠습니다.
초급편에서는 대표적인 선택자의 종류에 대해서 배웠는데,
이 선택자를 유용하고 세세하게 쓰기 위해, 정확한 선택을 하기 위한 방법에 대해 알아 보겠습니다.

먼저 하위에 있는것을 선택하는 방법을 보겠습니다.

일반적으로 코딩을 할때

<div id="body">
<div id="content">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="sidebar">
<ul class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>

.list {
list-style:none;
margin-left:20px;
}

이런식으로 코딩을 많이 합니다.

그런데 작업을 하다보니, 디쟈인이 변경되었는데
#sidebar > .list 의 글 색깔이 틀리고, 볼드체가 되며, 뷸렛이미지가 추가 되었다고 가정을 하겠습니다.
그렇다면 여러분은 어떻게 하시겠습니까?
방법은 여러가지가 있습니다.
  1. #sidebar > .list 를 다른 class 혹은 id 로 정의하고, 새로운 CSS를 생성한다.
  2. CSS에서 저놈만 콕 찍어내서 CSS를 생성한다.
선자의 경우 HTML 을 수정하고, 그에 맞춰 CSS 수정작업을 해줘야 합니다만
후자의 경우를 이용하면 HTML 을 수정하지않고, 간단하게 CSS만 수정함으로써 일을 마무리 할 수 있습니다.

먼저 선자의 방법으로 한다면..

<div id="body">
<div id="content">
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div id="sidebar">
<ul class="sidebarList">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>

.list {
list-style:none;
margin-left:20px;
}

.sidebarList {
list-style:none;
margin-left:20px;
color:red;
font-weight:bold;
background:url("/Images/blt_li.gif") no-repeat 5 5
}

이렇게 되겠죠?
HTML 에서는 list 였던 class명을 sidebarList로 변경이 되었습니다.
그에 맞춰서 CSS도 추가가 되었습니다.
list였을때의 성격을 그대로 유지하기 위해, list와 똑같은 CSS를 선언해주고 CSS와 background를 주었습니다.

후자의 경우로 한다면, HTML코드는 손대지 않고 CSS만 손대게 되겠죠.

.list {
list-style:none;
margin-left:20px;
}

#sidebar .list {
color:red;
font-weight:bold;
background:url("/Images/blt_li.gif") no-repeat 5 5
}

이렇게 하면 끝입니다.

이 코드에서 눈여겨 봐야 할 점은 #sidebar .list 입니다.
(지난 초급편을 보셨다면 #sidebar 와 .list가 어떤건지는 아시겠죠..?)
코드가 직관적이기 때문에, 눈치 없으신분들도 이미 다 눈치 채셨겠지만 ㅎㅎ, 설명을 해드리자면
sidebar 라는 id 아래에 list 라는 class를 1Space(공백 즉 " ")으로 선택하는 것이지요.
이걸 "Descendant selector" 즉 "하위 선택자" 라고 합니다

HTML파일 손 안되도 되고, 새로이 추가되는 속성에 대해서만 정의해주면 끝이죠.!!!
어떻게 이런게 가능하느냐..!!
이게 바로 CSS의 놀라운 기능이니깐요..!
CSS를 풀면 Casecading Stype Sheet 이죠..!!
덮의쓰기..즉 overwrite개념이 아닌...포토샵에서 쓰는 Layer같은 개념인거죠..!!
저는 이걸 "걸린놈만 족쳐" 개념이라고 (우스갯소리) 생각합니다 ㅎㅎ


아, 잡설이 길었군요..
이것과 비슷한 기능을 하는 > 와 + 이 있습니다.
> 는 "Child selector" 즉 "자식 선택자" 라고 하며,
+ 는 "Adjacent sibling selector" 즉 "인접 형제 선택자"(???) 라고 합니다.
하지만, 이 선택자들은 브라우져들이 지원을 안하는 경우가 다반사 이고, 하위 선택자로 거의 해결이 가능하기때문에 잘 쓰지 않기때문에 언급하지 않겠습니다.
자세한 정보를 원하시는 분은, w3c의 자식 선택자, 인접 형제 선택자 를 확인해 보시길 바랍니다.


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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS Selector에 대해 알아봅시다~ [응용편 #3]  (4) 2007/02/14
CSS Selector에 대해 알아봅시다~ [응용편 #2]  (0) 2007/02/13
CSS Selector에 대해 알아봅시다~ [응용편 #1]  (2) 2007/02/09
CSS Selector에 대해 알아봅시다~ [초급편]  (6) 2007/02/07
font-size: em을 처음쓰시는 분들을 위한 간단한 팁  (12) 2007/02/06
EditPlus v2.30 눈에 확띄는 업데이트 8가지  (4) 2007/01/26
Posted by Johan Kim hiphapis
TAG CSS, Selector, 선택자
Trackback 0 Comment 2

TRACKBACK http://hiphapis.net/trackback/19 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://naradesign.net/ BlogIcon 정찬명

    다행입니다. 전부 이해 되었어요 ㅎㅎㅎ!

    2007/02/10 23:12 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      다행이에요~! ㅎㅎ

      그런데, 읽고싶지 않게 생겼네요 -ㅛ-;

      2007/02/12 16:31 [ ADDR : EDIT/ DEL ]

웹[기술|표준|접근]/작은 팁2007/02/07 12:23

CSS Selector에 대해 알아봅시다~ [초급편]


CSS의 시작은 Selector로부터 한다고 말을 해도 과언이 아닙니다.
그 이유는 모두가 알고 있겠지만,
Selector 즉 선택자가 존재하지 않는다면 선언된 CSS가 어떤곳에 적용을 해야 할지 모르기때문이죠.
명령은 했지만, 누구에게 명령을 한건지 모르는것과 비슷하다고 해야 할까요..?
그리고 궁극적으로 CSS을 코딩할려면, Selector부터 코딩해야 하니깐요..ㅎㅎ

물런 inline-Style로 코딩을 한다면 Selector가 필요없을 지 도 모르겠지요.
하지만, 이런 코딩방식은 CSS의 장점을 제대로 활용못한 것이기 때문에, 개발단계 있을때 혹은 디버깅중일때, 즉 임기응변 용으로가 아니면 권고하고 싶지 않은 코딩방식입니다.


그럼 우선 Selector의 종류에 대해서 알아보겠습니다.
Selector는 크게 4종류로 나눌 수 있습니다..
  • 공통 선택자 (Universal Selector)
  • 타입 선택자 (Type Selector) 저는 개인적으로 태그 선택자 혹은 엘레먼트 선택자 라고 하는게 더 직관적이라고 생각합니다. ㅎㅎ
  • ID 선택자 (ID Selector)
  • Class 선택자 (Class Selector)
W3C에서 나온 Selector에는 종류가 훨신 많습니다만, 실제로
  • Type Selector
  • ID Selector
  • Class Selector
이 세가지가 선택자들의 Root 이기 때문입니다.

그래서 이번 포스팅인
초급에선, 대표적인 선택자들과 기본적 사용법에 대해서 알아보겠습니다.
중급에선, 선택자를 좀 더 응용하는 편으로 진행할 계획이며
고급에선, 가상 엘레먼트 접근에 대해 포스팅할 예정입니다.


1. 공통 선택자 (Universal Selector)
공통 선택자는 * 를 말하는 것입니다.
이 녀석이 하는일은, 이 녀석의 이름을 보면 아시겠지만..
모든것을 선택하는 것입니다. DOS 시절에서 쓰던 * 와 마찬가지죠.
정규표현식에서도 조금 틀리지만 비슷한 의미로 사용되죠 ㅎㅎ

간단한 예제를 들면
* {
margin:0px;
padding:0px;
}
이렇게 선언된 HTML 파일의 모든 엘레먼트들은(혹은 태그들은) margin:0px;padding:0px;border:0px;을 선언하게 되는겁니다.

보통, 위의 예제처럼 CSS 초기화할때 많이 사용합니다.
초기화하는 이유는, 크로스브라우징을 위해서 입니다~,
브라우져별로 기본적으로 주어지는 margin 과 padding 값이 틀리거든요..
(IE는 버젼마다 틀리다는 소문이..흠흠 ㅎㅎ)

2. 타입 선택자 (Type Selector)
타입 선택자....??? 이름만 봐선 이놈이 뭐하는 놈인지 모르겠군요..
그럼 어디한번 뭐하는 놈인지 한번 볼까요..?
우선 W3C에서는 뭐라 정의했나 함 보겠습니다.
A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree.
흠....뭐라 하는지 아시는분 해석좀 해주세요 -ㅛ-;
아는 단어만 해석하면;;

A type selector matches the name of a document language element type
타입 샐렉트는 문서언어 엘레먼트 타입의 이름과 매칭을 한다...

라는군요..뭐래는겨 ㅡ,.ㅡ
뭐라 말하는지 모르겠군요..

그럼 코드를 한번 볼까요?

p {
font-weight:bold;
color:blue;
border:1px dashed red;
background-color:yellow;
}

span {
font-weight:normal;
text-decoration:underline;
}

이해하셨나요?
문서언어는 HTLM을 말하는것이고
엘레먼트 타입은, HTML 태그를 말하는 것이고
이름은, 태그의 명칭을 말하는 것이죠
즉, p, h1, div, span, table, ul, ol, li, form, legend, fieldset 같은 HTML 태그를 선택하는 선택자 인것이죠.

그래서, 제가 엘레먼트 선택자 혹은 태그 선택자라고 하는게 더 직관적이라고 한거에요 ㅎㅎ

타입 선택자의 사용방법은 위의 예제코드에서 보셨겠지만. 해당되는 태그를 지시어 없이 HTML 태그의 명칭만 선언해주면 됩니다.
간단하죠~?


3. ID 선택자 (ID Selector)
ID 선택자.., 오 이 녀석은 이름만 봐도 뭐하는 놈인지 대충 알 것 같죠?
이런식으로 네이밍 해주면 얼마나 좋아~, 타입 선택자가 모야. ;p

JS를 위해서 엘레먼트에 id 라는 애트리뷰트를 쓰지만, CSS에서도 엄청나게 많이 쓰입니다.

> 여기서 잠깐! 알아두면 좋아요(클릭클릭) <

JS에서는

getElementById('SomeElement_ID');
혹은 prototype이라면
$('SomeElement_ID')

이런식으로 엘레먼트 ID를 이용해, 엘레먼트에 접근을 하죠.
CSS 에서는 # 라는 지시어를 사용합니다.

#SomeElement_ID {
border:1px solid pink;
margin-left:20px;
padding-top:5px;
}

이런식으로 사용을 합니다.

> 여기서 잠깐! 알아두면 좋아요(클릭클릭) <



4.Class 선택자 (Class Selector)
자, 이번 포스팅의 마지막챕터까지 왔군요.
Class 선택자.. 이 녀셕도 ID 선택자처럼 이름을 보면 딱 아시겠죠?

class 라는 애트리뷰트는 CSS를 위해 존재하는 애트리뷰트라고 보시면 됩니다.
(물런, 개발자가 어떠한 목적을 가지고도 쓸 수 있죠.)

id와 달리 이녀석은 중복선언되어도 괜찮습니다. CSS를 위해 존재하는 애트리뷰트인데 중복선언이 안되다면, 그 수많은 CSS를 코딩할 생각만 해도..;;;

이 녀석의 지시어는 . 입니다.

.someElement_Class {
color:skyblue;
text-align:center;
vertical-align:middle;
padding-top:5px;
}

이런식으로 사용이 되지요




자, CSS Selector에 대해 알아봅시다~ [초급편]은 끝이 났습니다.
다음편은 예고한대로, 선택자사용 응용편으로 찾아뵙겠습니다~
(하지만, 언제 포스팅될지 모른다는거~)




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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS Selector에 대해 알아봅시다~ [응용편 #2]  (0) 2007/02/13
CSS Selector에 대해 알아봅시다~ [응용편 #1]  (2) 2007/02/09
CSS Selector에 대해 알아봅시다~ [초급편]  (6) 2007/02/07
font-size: em을 처음쓰시는 분들을 위한 간단한 팁  (12) 2007/02/06
EditPlus v2.30 눈에 확띄는 업데이트 8가지  (4) 2007/01/26
FireFox 2.x 에서 Alt+S 즉, AccessKey가 안되는것 수정하기  (0) 2007/01/22
Posted by Johan Kim hiphapis
TAG CSS, Selector, 선택자
Trackback 0 Comment 6

TRACKBACK http://hiphapis.net/trackback/17 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://naradesign.net/ BlogIcon 정찬명

    오~ 재미있어요~! 다음편도 기대!

    2007/02/07 16:41 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      제 블로그는 찬명님만 오시나봐요 ㅠ,.ㅠ
      찬명님 안계시면 어흑..무슨 재미로 포스팅하나 ㅠ,.ㅠ

      2007/02/09 10:54 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://naradesign.net/ BlogIcon 정찬명

    첫술에 배가 불러 오겠습니까 ^^; 그리고 설사 아무도 오지 않더라도 이 포스팅으로 인하여 제일 많은 깨달음을 얻는것은 요한님이 될 터이니 절대로 손해가 아님을 주장함. ㅎㅎㅎ.

    2007/02/08 00:58 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      넵, 옳으신 말씀이세요!!
      격려 감사합니다!! ㅎㅎ

      2007/02/09 10:54 [ ADDR : EDIT/ DEL ]
  3. Favicon of http://hooney.net BlogIcon hooney

    블로그 새로 오픈했다고 알려줘야 제가 알죠. 제가 도사도 아니구... ㅎㅎ

    블로그 새로 리뉴얼하면, 자나깨나 신고정신~ ^^;

    2007/02/08 13:34 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2007/02/06 18:43

font-size: em을 처음쓰시는 분들을 위한 간단한 팁

font-size정의시 px을 쓰지말고 em을 쓰기를 권고하고 있죠..
근데, 임마가 참으로 성가시게 굴때가 있습니다.

그 이유는, 상대적이기 때문이죠..
px같은 절대적인 값이라면, 솔직히 코더(Coder)들이 코딩(Coding)하기엔 더욱 쉽습니다.(저만 그런걸지도)
하지만, 줌브라우징 기능때문에 em을 권고하죠.
(물런, 이것외에도 여러가지가 있지만 줌브라우징은 그 이유중 하나입니다. http://www.mondaybynoon.com/2006/03/13/effective-style-with-em/)

자, 그럼 무엇이 성가시게, 골때리게 구냐..
이 녀석들은 폰트크기..즉 위에서 선언된 font-size와 모종의 뒷거래(?)가 있다는 것입니다.
예를들어,

<style type="text/css">
body { font-size:1em; }
.Mother {font-size:1em;}
.Child01 {font-size:0.5em;}
.Child02 {font-size:2em;}
.Child03 {font-size:2em;}
.Baby01  {font-size:2em;}
</style>


<div class="Mother">Mother
    <div class="Child01">
        <div class="Baby01">Child01(Baby01)</div>
    </div>
    <div class="Child02">Child02</div>
    <div class="Child03">Child03</div>
</div>


가 있다고 가정을 할경우, Baby01 과 Child02~03은 코드결과적으로 보면 font-size:2em입니다.
하지만, 실제로 돌려보면, 틀리게 나옵니다.

그 이유를 확인하신다면..

body { font-size:5em; }


으로 수정해보세요, 그럼 제가 한말을 바로 이해하실 수 있을 겁니다.

"상대적" 이기 때문이죠.



그리고, 다른부분은..
위의 상황과 연관된 경우인데..만약 같은 class를 폼 컨트롤러(input, textarea.....)와 함께 사용한다고 가정을 할경우..
눈에 보이는것(위의 div)과 같지 않은 출력이 나올 수 있다는 것이지요..

예를들어, Baby01 class를 같이 쓴다고 가정을 하고..
div에서는 대략 13~4px정도의 크기로 출력이 되죠
하지만, 이걸보고 폼 컨트롤러에 적용을 시킬경우, 13~4px정도의 글자크기가 출력되는게 아니라.
순수하게 2em 즉 200% 글자가 출력이 됩니다

<textarea class="Baby01">Baby01</textarea>

이 부분은 상속을 받지 않기때문에, "모종의 뒷거래"가 일어나지 않게 되는 것이지요~
이해하시겠죠..?

그리고
font-family를 정의하지 않은 textarea같은 경우, font-family가 기본과 틀립니다.(IE, FF에서 확인했습니다)

<textarea class="Mother">Mother</textarea><br />
<textarea class="Baby01">Baby01</textarea><br />

<input type="text" class="Mother" value="Mother"><br />
<input type="text" class="Baby01" value="Baby01"><br />
<input type="button" class="Mother" value="Mother"><br />
<input type="button" class="Baby01" value="Baby01"><br />


즉, form control에는 상속이 되지 않는거죠.
그래서 공용선택자 * 에 폰트크기나 서체등을 정의하는 방법으로 해결 할 수 있답니다.

왜냐면, 공용선택자는 모든 마크업을 일괄 재정의 하는 것이니깐요~!!!

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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS Selector에 대해 알아봅시다~ [응용편 #1]  (2) 2007/02/09
CSS Selector에 대해 알아봅시다~ [초급편]  (6) 2007/02/07
font-size: em을 처음쓰시는 분들을 위한 간단한 팁  (12) 2007/02/06
EditPlus v2.30 눈에 확띄는 업데이트 8가지  (4) 2007/01/26
FireFox 2.x 에서 Alt+S 즉, AccessKey가 안되는것 수정하기  (0) 2007/01/22
사용하는 FireFox Plug-in  (0) 2007/01/22
Posted by Johan Kim hiphapis
TAG CSS, EM, Font size, 웹표준
Trackback 1 Comment 12

TRACKBACK http://hiphapis.net/trackback/16 관련글 쓰기

  1. 웹표준과 폰트 크기 - 접근성  삭제

    2007/02/09 12:00TRACKBACK FROM 일모리와 웹표준

    폰트 하면 떠오르는 단어가 바로 12px 혹은 9pt 입니다. 그만큼 당연시 여겨지는 폰트 크기이며 맑은고딕이 퍼지기 전 까지는 그 누구도 도전할수 없는 부동의 자리이죠. 기본폰트의 문제도 그...

댓글을 달아 주세요

  1. Favicon of http://naradesign.net/ BlogIcon 정찬명

    예제와 함께 좋은 팁을 소개해 주셨네요. 첨언하면, 상대적인 단위는 바로 부모의 값을 1em 또는 100% 으로 인식하게 됩니다. 따라서 body에 75%의 서체크기를 적용하면 body는 75%의 서체크기를 갖지만 p는 body에 적용된 서체크기를 기준으로 다시 75%를 계산하기 때문에 body 보다 75% 더 작아지게 됩니다. 결국 75%의 75%가 되는거죠. 더 헷갈리지 않았나 모르겠네요 ㅜㅜ;

    2007/02/06 19:35 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      헉, 제가 포스팅한 내용이 찬명님이 적으신 코멘트인데;
      저렇게 긴 문장을, 이렇게 짧게 표현하시다니..
      역시 ㅠ,.ㅠ)=b

      (예~전에 CDK에 올렸던것을 살짝 수정해서 포스팅한거에요 ㅎㅎ)

      2007/02/09 12:30 [ ADDR : EDIT/ DEL ]
    • 빽짱구

      찬명님 그럼 예를들어 body에 0.75em 을 줬을 경우 그안에 있는 h4 클래스에 폰트가 0.75로 보일려면 1em을 줘야 한다는 말씀이신가요? 좀 햇갈리는 부분이 있어서요.

      2007/11/03 22:10 [ ADDR : EDIT/ DEL ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      넵 맞습니다.

      상대적인 단위이기때문에 그대로 상속을 받게되죠..
      그렇게 되다보니..
      상속받은것의 x% 이렇게 됩니다.

      2007/11/05 16:49 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://naradesign.net/ BlogIcon 정찬명

    어쨌거나 WCAG 1.0 > 체크포인트 3.4에서 권장하고 있으며 중요도2[되도록 지켜야 할] 에 해당하는 필수 팁! ^^a

    2007/02/07 13:13 [ ADDR : EDIT/ DEL : REPLY ]
  3. Favicon of http://ilmol.com BlogIcon 일모리

    정찬명님도 좋은 설명곁들여 주시고 좋은 글이네요.

    한가지 더 보태자면 보통 쓰는 9pt, 혹은 12px 이 0.75em 입니다. 여기서 0.75를 인식을 못하는 브라우저가 있으니 0.76em 을 보통 쓰게 됩니다. 0.01 의 비밀이죠 ^^
    물론 현실적으로 과연 얼마나 되는곳에서 em 을 쓰게 될런지 말입니다... 일단 백터폰트가 많이 퍼지면 혹 많아지게 될수 있긴 하겠죠. :)

    2007/02/09 11:55 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      헛, 그렇군요..0.01이 세상을 바꾸는군요(?)
      ㅎㅎ

      제 블로그에선 처음 뵙죠~?
      무지 반갑습니다..ㅎㅎ

      2007/02/09 12:29 [ ADDR : EDIT/ DEL ]
    • Favicon of http://ilmol.com BlogIcon 일모리

      아 그러고 보니 인사 남긴다고 하고는 그냥 'save a comment' 를 눌러버렸네요 ^^
      블로그 넘 좋아요 그냥 계속 이렇게 꾸준히 적어주세요 저처럼 들쑥날쑥하면 미움받아요 ^^;;;

      2007/02/09 13:32 [ ADDR : EDIT/ DEL ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      아...저는 일모리님이나 찬명님처럼 인기블로거가 아니라,
      어느 누구 하나 관심가져주지 않는 블로거라..ㅠ,.ㅠ

      미워할 사람도 없어요..

      부럽죠..??
      (그런데 왜 제 마음은 ㅠ,.ㅠ)

      2007/02/09 16:13 [ ADDR : EDIT/ DEL ]
  4. Favicon of http://naradesign.net/ BlogIcon 정찬명

    일모리님, 미움도 곧 인기와 비례해서 그래요 ㅋㅋㅋ
    기다림님, 인기블로거라고 띄워줘서 쑥쓰럽!

    2007/02/10 23:03 [ ADDR : EDIT/ DEL : REPLY ]
  5. Favicon of http://www.mastersdissertation.co.uk/ BlogIcon Dissertation Writing

    Thank you for sharing this information. The information was very helpful and saved a lot of my time.

    2011/10/27 16:40 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/생각2007/01/18 11:39

웹접근성에 대한 고민..

사실 포스팅된 내용은, 웹표준Day 에서 토론해볼려고 했던 주제입니다.
그런데, 능력이 안되어서..ㅎㅎ;;
개인적인 여력이 된다면, 좀 더 정리해서..토론해 보고 싶네요. ㅎㅎ

제가 오래전부터 고민하던것이 있습니다.
우리가 생각하는 접근성의 의미가 부합되지 않는
사이트나 서비스 혹은 메뉴(이하 사이트라 칭함) 같은경우는 어떻게 해야되나..

라는 생각입니다.
이런 사이트같은 경우, 표준은 준수 할 수 있지만
우리가 알고있고, 현재 새워져 있는 웹접근성지침에는 어긋날 수 밖에 없지요..

얘가 무슨말을 하나..? 라고 생각하셨죠..?
제가 써놓고도 이해가 잘 않가네요..
(아, 이 무책임함..ㅎㅎ)

보다 쉽게 알려드리기위해
Flash를 놓고 예를 들어 보겠습니다.

Flash로만 표현이 가능한 콘텐츠들이 있습니다.
(Flash로만 표현 가능한 콘텐츠 자체가 접근성에 위배된다고 말씀하시면 어쩔 수 없지만)
그 사이트나 서비스 혹은 메뉴의 성격상 Flash를 써야만 하는 경우가 있습니다.
이런 경우도 "접근성이 좋지 않다" 라고 평가가 되는건지 궁금합니다.

그렇다고 Flash가 비표준이냐..? 그것도 아닙니다.
Flash는 엄연한 웹 표준입니다.

한 예로는,
사진사이트같은경우
실질적으로, 시각장애인들이 무언가를 하기엔 불가능한 사이트입니다.(콘텐츠 자체가 이미지이므로)
그런곳에서 사진View 라던가, 간단한 수정작업을 위해 Flash를 썻다고 할경우..

이것또한 접근성에 위배되는건가요..?
꼭 이 사이트에, 우리가 말하는 접근성을 지켜야 할까요..?
(이런 사이트는 그래픽기반이므로, CSS를 끄거나 JS가 끄면 구동자체가 안될 수 도 있죠)
어떻게 보면 우리가 생각하는 접근성이, 이 사이트에선 의미가 없는걸 수 도 있죠.


많은 분들이, 접근성에 대한 fallback은 시각장애인에 대해서만 고려하시는것 같아요..
현재 놓여있는 지침들도 둘러보면 그런 사항들이 많구요.

저의 이런 물음에 정찬명님께서, 답변을 해 주셨는데

more..


위에 열거한것들이, 제가 접근성에 대해 고민하는것 중 한 부분입니다.
우리가 생각하는 접근성 정의는
모든 브라우져에, 모든 사람들이 차별없이 동일한 정보를 습득하는것
입니다.

사진사이트 같은경우, 이미 특정인들만을 대상으로 한 사이트이기때문에..
웹접근성 정의에 벗어나므로, 접근성에 대해선 배제를 해야 되는걸까요..?

현재 새워진 접근성지침같은것을 보면, 시각장애인에 대한 fallback만 있을뿐이죠.
우리가 생각하는 접근성과, 접근성지침이...정말로 접근성 정의에 부합하는지..
한번쯤 생각해 봄직합니다.


ps>어쩌면 저혼자 쓸대없는 생각을 하는 건지도 모르죠..
크리에이티브 커먼즈 라이선스
Creative Commons License

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

선입견  (0) 2007/03/22
시각장애인들「대법원 두고보자」  (0) 2007/03/21
KWAG 7th 워크샵  (2) 2007/02/08
웹 접근성 평가 TF 모임 사진  (5) 2007/01/22
웹접근성에 대한 고민..  (2) 2007/01/18
CSS 생일 축하 합니다~  (0) 2006/12/28
Posted by Johan Kim hiphapis
TAG CSS, Flash, 접근성
Trackback 0 Comment 2

TRACKBACK http://hiphapis.net/trackback/7 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://naradesign.net/ BlogIcon 정찬명

    누구나 가질 수 있는 고민이라고 생각합니다. 어떤 문장에서는 요한님과 조금 다른 생각을 가지고 있는데 말씀드려 보겠습니다.

    Flash 도 웹 표준이라고 표현하신 부분을 저는 그렇게 생각하지 않습니다. object 태그가 웹 표준일지는 몰라도 Flash 는 표준이라고 말할 수는 없고 '응용기술' 일 뿐이라고 생각합니다. 즉, 웹은 아니지만 웹에 응용된 기술로서 그것이 존재하지 않더라도 무방한 기술이라는 견해 입니다. 극단적으로 표현해 보자면 Adobe 라는 회사가 망했고 더이상 Flash 라는 기술이 업그레이드 되지 않으며 역사의 뒤안길로 사라져간다고 해도(그럴 확률은 희박하겠지만 전혀 없다고 말할 수도 없죠) 웹은 존재할 껍니다. 이것이 플래시를 표준이라고 말하지 않는 이유입니다.

    그와는 별도로, 요한님과 같은 생각은 오늘 제 블로그에도 관련 포스팅을 했습니다만 웹 접근성을 말할 때 그 목적이 마치 장애인만 고려하는 듯한 뉘앙스 또는 그러한 정의에 대하여 저 또한 반대합니다. 즉, 소수를 위한 웹 접근성이 아닌 모두를 위한 웹 접근성으로 정의되어야 한다고 생각하며 현재 국내에서 웹 접근성을 평가할 때 장애인에 대한 접근성만 평가하는 것은 개선되어야 한다고 생각합니다.

    마지막으로, 사진 갤러리 서비스와 같이 시각을 반드시 지니고 있어야만 원활하게 이용할 수 있는 콘텐트라고 하더라도 시각이 없거나 일시적으로 다른곳에 시각을 사용해야 하기 때문에 그것을 듣는 방식으로 이해해야 하는 일반적인 사람들(일시적으로 불리한 조건, 핸디캡)의 접근성을 보존해 주어야 한다고 생각합니다. 즉, 웹 접근성이란 웹에 존재하는 모든것에 대하여 동일하지는 않더라도 차별없이 이용할 수 있도록 해야 한다는 점을 강조하고 싶습니다. 따라서 사진 갤러리 서비스라고 해서 접근성과 관계없다고 말하기는 어렵다는 생각입니다.

    2007/01/24 22:47 [ ADDR : EDIT/ DEL : REPLY ]
  2. Favicon of http://hiphapis.net BlogIcon 기다림

    네, 사진 겔러리 같은경우
    이 글을 쓸 당시에는,
    오지 않을 사람에 대해서..서비스혜택을 받지도 못하는 사람에 대해서까지 접근성을 보장해야 하는 고민을 했던것인데..

    지금은 보장해야 된다고 생각합니다 :)

    2007/01/25 12:36 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2006/12/28 16:14

Ajax로 Select Box 비스무리하게 구현하기

사용자 삽입 이미지

Ajax와 CSS로 구현한 SelectBox 브라우져별 구동모습


코드는 UTF-8로 했는데, 깨진다는 분이 계셔서, ANSI, euc-kr 로 인코딩 했습니다.

[다운받기]
첨부파일은 zip으로 압축되어있는데 그 구성은
  • Ajax_SelectBox.html :: 웹에서 보여질 html 파일
  • List.html :: Ajax로 불러올 List가 있는 html 파일
  • Css.css :: CSS 파일
  • Js.js :: Javascript 파일
  • Bg_SelectBox.gif :: 셀렉트박스 이미지
  • Bg_SelectBox_On.gif :: 셀렉트박스 선택시 이미지
  • Blt_New.gif :: New 뷸렛 이미지
총 6개의 파일로, HTML 파일 2개, CSS/JS 각각 1개, 이미지파일 3개입니다.

구동원리는 간단한데, 마우스가
사용자 삽입 이미지

이미지에 Over 했을시, 그때 List.html 파일을 로드하고, Click 했을시 불러온 List.html을 보여주게 됩니다.
이렇게 구분지음으로, 쓸대없는 DB Connect을 줄이는(혹은 데이터 로드를 줄이는) 효과를 볼 수 있습니다. (물런, 예제에서는 DB Connect하지 않습니다.)

소스는 간결하고 쉽게 짜여져 있으므로 별다른 설명을 필요 없을 듯 하여 주요함수만 간략히 어떤일을 하는지만 설명하겠습니다.

  • RoadMyFav()
    • 위에 설명한 이미지에 onmouseover시 일어나는 일을 하는 함수입니다.
    • Ajax 객체를 생성하고, List.html 에 접근해서 데이터를 가지고 옵니다.
  • ShowMyFav()
    • 이미지를 click했을시 실행되는 함수입니다.
    • RoadMyFav()함수로 얻어온 List.html의 내용을 출력해주는 역활을 합니다.
  • OverClub(List)
    • 리스트에 onmouseover/out 이벤트시 구동되는 함수로, CSS를 이용해서 유저에게 현재 어떤 리스트에 마우스가 올라와있는지 보여주는 함수입니다.
주요 함수는 위와같이 3가지인데, 소스보시면
에게, 이게뭐야~
하실거에요.


그리고 이것만의 특이한 점은 리스트가 뿌려지는 div의 높이가 특정높이 이상일경우
특정높이로 고정하고, 세로 스크롤바가 생기게 하는것입니다.
그리고 가로스크롤바는 생기지 않게 하는거죠.
위 첨부이미지를 보시면 아시겠지만, 사이트의 주소표시부분은 가차없이 짤리고 끝납니다.



라이센스는 맘것쓰시고, 출처만 밝혀주세요.


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

'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글

CSS Selector에 대해 알아봅시다~ [초급편]  (6) 2007/02/07
font-size: em을 처음쓰시는 분들을 위한 간단한 팁  (12) 2007/02/06
EditPlus v2.30 눈에 확띄는 업데이트 8가지  (4) 2007/01/26
FireFox 2.x 에서 Alt+S 즉, AccessKey가 안되는것 수정하기  (0) 2007/01/22
사용하는 FireFox Plug-in  (0) 2007/01/22
Ajax로 Select Box 비스무리하게 구현하기  (0) 2006/12/28
Posted by Johan Kim hiphapis
TAG Ajax, CSS, selectbox
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/3 관련글 쓰기

댓글을 달아 주세요

웹[기술|표준|접근]/생각2006/12/28 15:18

CSS 생일 축하 합니다~

Kukie님의 블로그를 보다, CSS의 나이가 10살이 되었단 소식을 듣게 되었습니다.

지난 17일 CSS가 태어난지 10년 되던 날이었네요.ㅎㅎ
(녀석, 내 동생보다도 어리다니..후후)
10년이라는 시간이라는 시간에 비추어 생각해볼때
CSS의 발전은 굉장히 빈약했던게 사실입니다.
하지만, Web 2.0(웹2.0)의 물결을 타고 이슈가 되었는데

지금까지의 성장속도와는 비교도 못할정도로..
비약적으로 발전하길 바랍니다~!!!
아울러, 우리나라의 웹환경에도 지각변동이 일어나길 바랍니다~!!

W3C 에서 만든 10돌 기념 사이트~ http://www.w3.org/Style/CSS10/



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

'웹[기술|표준|접근] > 생각' 카테고리의 다른 글

선입견  (0) 2007/03/22
시각장애인들「대법원 두고보자」  (0) 2007/03/21
KWAG 7th 워크샵  (2) 2007/02/08
웹 접근성 평가 TF 모임 사진  (5) 2007/01/22
웹접근성에 대한 고민..  (2) 2007/01/18
CSS 생일 축하 합니다~  (0) 2006/12/28
Posted by Johan Kim hiphapis
TAG CSS
Trackback 0 Comment 0

TRACKBACK http://hiphapis.net/trackback/2 관련글 쓰기

댓글을 달아 주세요