'웹[기술|표준|접근]/작은 팁'에 해당되는 글 44건

  1. 2011/03/17 CSS for iPad Orientation (화면회전)
  2. 2011/03/14 CSS for Retina Display (background) (1)
  3. 2010/01/09 헤딩 제대로 사용하기. - 후편(완)- (3)
  4. 2010/01/06 헤딩 제대로 사용하기(시멘틱 마크업하기). -전편- (2)
  5. 2009/02/02 IE7에서 text-decoration이 이상하게 나올때.
  6. 2008/11/27 Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기 (4)
  7. 2008/08/20 [JS] IE6인지 구분하기
  8. 2008/08/01 CSS Frameworks
  9. 2008/06/25 CSS Editors Reviewed
  10. 2008/03/19 코딩 하기 전 에 문서부터 디자인을 하라 (2)
  11. 2008/03/06 탭메뉴는 어떻게 코딩 해야 할까? (4)
  12. 2008/02/04 IE에서 display를 toggle할때 여백이 바뀌는 경우.(알수 없는 공백이 생길때)
  13. 2008/02/01 IE6 에서 print 했는데 글씨가 겹쳐서 나올때
  14. 2008/01/31 mac profile
  15. 2008/01/24 table 에서 overflow:hidden 하기
  16. 2008/01/23 애용하는 CSS Hack 2가지. (4)
  17. 2008/01/15 IE7 Debugger
  18. 2008/01/03 CSS visibility vs display
  19. 2007/12/28 IE에서 fieldset bgcolor줄 경우 bgcolor가 legend까지 넘어가는 문제
  20. 2007/12/28 CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기 (6)
  21. 2007/12/27 IE 7 에서 dt, dd 좌측여백이 생기는 문제 (2)
  22. 2007/12/05 JSSpec용 EditPlus ACP,STX 파일
  23. 2007/10/01 EditPlus 에서 monaco(mac 기본 폰트)사용하기. (XP에서 안티알리아싱(Anti-Aliasing 설정) (3)
  24. 2007/08/31 [CSS] IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기 (2)
  25. 2007/08/31 [JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기 (1)
  26. 2007/08/08 [JS] timestamp 를 date 형식으로 보여주기(as like php date())
  27. 2007/08/01 [font series 2]폰트사이즈만 상대적으로 하면 된다? (2)
  28. 2007/08/01 [font series 1]웹에서 Font Size 문제.. (2)
  29. 2007/07/13 [JS] HTML Attribute Parser
  30. 2007/07/10 [JS] OS 알아내기 (with js & jQuery)
웹[기술|표준|접근]/작은 팁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.medicalschoolpersonalstatement.net/ BlogIcon medical school personal statement

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

    2012/04/27 06:15 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2010/01/09 20:00

헤딩 제대로 사용하기. - 후편(완)-

전편을 보고 분명 많은 분들이
뭐야? 장난해? 내가 아는거랑 똑같은데? 뭐가 틀리다는거야?
이런 반응을 보이셨을 것이다.
이건 마치 "헤딩태그는 책과 같다고 생각하시면 되요"라고 말한 것과 똑같은듯하다

여러분의 느끼실 그 허탈함에 전편을 포스팅하고 바로 후편을 쓴다.
후편에서는 무엇이 잘못되었는지 집어볼 것이다.


헤딩태그의 잘못된 사례(헤딩태그의 오해)
1. 레이아웃팅 제목으로 사용
어떤 관공서의 사이트에서 CSS를 제거한 모습과 HTML 코드이다. 지금 헤딩태그를 레이아웃팅한 영역의 제목으로 사용하고 있다.

"상단 메뉴", "하단 정보", "하단 링크"가 유의미한 데이터일까? 절대 아니다.
헤딩태그를 의미없는 레이아웃 영역의 제목으로 사용하고 있다. 실제로 많은 관공서의 사이트의 헤딩이 이런식으로 구성되어 있다. 이러한 방식은 올바르지 않은 사용법이다.

2. 제목이라고 하긴 애매모호한 헤딩
레아아웃 영역의 의미도 담고 있는 제목

이건 제목이라고 하긴 애매모호한 헤딩들이다. 그 이유는 레이아웃 영역으로써의 의미도 포함이 되어 있기 때문이다. 그러므로 이러한 사용법 또한 올바르지 않은 사용법이다.

3. 메인메뉴 혹은 서브메뉴를 헤딩으로
(아래의 스샷은 재현을 위해 제가 급조한 것입니다.)
메인메뉴 링크들을 헤딩으로 사용

위 1번과 2번은 쉽게 이해를 했는데, 3번에 와서는 고개를 갸웃하는 분이 계실 듯하다.
유의미한 데이터를 헤딩태그로 사용했는데 왜 문제가 될까?
그 이유는 메인메뉴(혹은 서브메뉴. 이하 메인메뉴로 통일)의 링크들은 헤딩이 아니기 때문이다.
다시말해 메인메뉴는 현재 보고 있는 콘텐츠의 제목이 아닌 링크들의 집합이다.
역시 어렵다. 쉽게말해 메인메뉴는 헤딩이 아니라 목차인것이다.
그러므로 헤딩태그를 사용하지 말고 그냥 a태그로 마크업을 해야 한다.

4. 레벨링
1) 누락
##시 사이트에서, 자유게시판까지의 메뉴 구조가
##시 -> 시만참여 -> 자유게시판

라고 하자. 그런데 디자인된 페이지에는 "시민참여"가 없다.
그래서 아래와 같이 헤딩을 부여했다.
<h1>##시</h1>
<h3>자유게시판</h3>
위 헤딩의 문제점은 h2가 없다는 것이다. 헤딩은 순차적으로 내려가야한다.
<h1>##시</h1>
<h2 class="hidden">시민참여</h2>
<h3>자유게시판</h3>
이렇게 헤딩을 부여하고 h2를 화면에 출력안되게 하는 방법으로 해결을 하면 된다.

2) 부여
또 다른 방법으로는
<h1>##시</h1>
<h2>자유게시판</h2>
이런 식으로 자유게시판을 h2로 마크업하는 것이다.

이쯤에서 다들
"자유게시판은 3depth에 있는 제목인데, h2로 해도 괜찮은거냐?"
라는 의문을 가지실 텐데, 상관없다.
작업하는 페이지 내에서의 헤딩만 부여하면 되는 것이다.
그렇다면
<h1>자유게시판</h1>
이렇게 자유게시판을 h1으로 마크업하는 것은 어떨까?
아마 여러분들은 혼란에 빠지실 것이고, 아래 세가지 의견들일 것이다.

  1. h1에는 사이트 제목이 들어가야 하는데..? (페이지당 h1은 한번만 와야 한다)
  2. h1만 넣으면 이 페이지가 어느 사이트(혹은 어느 위치(뎁스))에 있는지 모를텐데..?
  3. 페이지에 헤딩태그가 하나만(그것도 h1) 있어도 되는건가?

먼저, 1번 h1에는 사이트 제목이 들어가야 하는데..? (페이지당 h1은 한번만 와야 한다)
이것은 논란의 여지가 많은것으로, 전편에 해석에 따라 견해의 차이가 있다고 한 그 부분에 해당되는 내용이다.
실제로 몇해전 웹 접근성/표준쪽의 유명하신 두분이 이것으로 술자리에서 다투셨던 적이 있다.
그 분들의 의견은

    • 사이트명은 책제목과 같고, GNB의 시작점이기 때문에 h1으로 해야하고, 한번만 와야 한다.
    • 아니다

개인적인 의견은 제작자 맘이라고 생각한다. 즉 "아니다"쪽에 가깝다.
그 이유는 헤딩의 목적은 콘텐츠의 제목을 제공하는 것에 있지, GNB를 나타내기 위해 있는것이 아니기 때문이다.
그렇다면 GNB로써 헤딩을 사용하는 것이 잘못된것이냐? 그렇지도 않다. 페이지의 GNB를 콘텐츠의 제목이라고 생각할 수도 있기 때문이다.
전편에서 예를 들었던 "2분기 실적"은 "2009년 A 사업의 2분기 실적"이기 때문에,
"2009 실적 보고서", "A 사업 실적"도 헤딩이 될 수 있다.
그러므로 제작자 맘이라는 것이다

2번, h1만 넣으면 이 페이지가 어느 사이트(혹은 어느 위치(뎁스))에 있는지 모를텐데..?
이것 역시 헤딩을 GNB로써만 이해했기 때문에 생기는 오해이다.
title을 제대로 제공을 했고 정보구조가 제대로 구성되어 있다면 딱히 문제가 되지 않는다는것이 개인적인 견해이다.

3번. 페이지에 헤딩태그가 하나만(그것도 h1) 있어도 되는건가?
문제될 것 없다.

3) 단계
헤딩의 숫자가 의미하는 바는 단계(level)이라고 생각하면 된다.
대메뉴는 제일 큰 헤딩이므로 h1
중메뉴는 두번째로 큰 헤딩이므로 h2
소메뉴는 두번째로 큰 헤딩이므로 h3
이런식으로 레벨링을 하면 된다.
그러므로 대메뉴를 h2, 소메뉴를 h1 이런식으로 정보구조에 위배되게 마크업을 하면 안된다.

5. 중복된 내용
(아래의 스샷은 재현을 위해 제가 급조한 것입니다.)

같은 내용이 반복되는 헤딩
간혹 보면 사이트의 제목이 헤딩에 항상 따라다니는 경우가 있다.
사이트 제작자가 얼마나 사이트를 사랑하고, 자랑하고 싶어하는지 그 마음이 전해진다.
하지만 이것은 좋은 방법이 아니다.
헤딩의 레벨이 낮아지면, 상단의 레벨에 나오는 내용은 생략해도 된다.
<h1>##시</h1>
<h2>홍보관</h2>
이렇게 마크업이 되었으면
##시의 홍보관
이라고 받아들이면 된다.
즉 레벨이 낮아지면 상위 헤딩의 내용이 접두어로 붙은 것으로 여기면 된다.


헤딩이란
하.. 그럼 도대체 어떻게 헤딩을 하란 말이냐?!
전편에서 했던것 그대로 하면 된다.
너무나도 쉬웠던 그것이 바로 정답이다.

헤딩태그가 너무 간략하다보니 오해가 많이 생기는 것 같다.
그 오해의 근본은 무엇이 헤딩인가? 즉 헤딩의 정의에 있는것 같다.
헤딩태그는 헤딩은 페이지의 제목이다.




절대 아니다. 헤딩태그는 페이지의 제목이 아니다.
헤딩은 페이지의 제목이 아니라 콘텐츠의 제목이다.
더 정확하게 이야기를 하면 섹셔닝된 콘텐츠의 제목이다.

전편에 나왔던 "2009 실적 보고서"를 가지고 예를 들어보자.
현재 내가 보고 있는 페이지는 A사업 실적의 2분기 실적을 보고있다면
대제목: 2009 실적 보고서
중제목: A 사업 실적
소제목: 2분기 실적
이게 바로 전편에서 말한 헤딩이다. 이것을 코드화하면
<h1>2009 실적 보고서</h1>
<h2>A 사업 실적</h2>
<h3>2분기 실적</h3>
이렇게 된다.
이게 아닌 다른것은 헤딩이 되면 안된다.

자, 그럼 상황을 바꿔보자
현재 내가 보고 있는 페이지에는 A사업의 모든 정보가 다 나온다고 하자.
그렇다면 어떻게 헤딩을 구조해야 할까?
대제목: 2009 실적 보고서
중제목: A 사업 실적
소제목: 1분기 실적
소제목: 2분기 실적
소제목: 3분기 실적
소제목: 4분기 실적
소제목: 전년과 비교
소제목: 총평
이렇게 될 것이고, 코드화를 하면
<h1>2009 실적 보고서</h1>
<h2>A 사업 실적</h2>
<h3>1분기 실적</h3>
~~
<h3>2분기 실적</h3>
~~
<h3>3분기 실적</h3>
~~
<h3>4분기 실적</h3>
~~
<h3>전년과 비교</h3>
~~
<h3>총평</h3>
~~
이렇게 코드화가 된다.
"총평"이 "2009 실적 보고서의 총평"인지, "A 사업 실적의 총평"인지 걱정하지 않아도 된다.
h3의 상위레벨의 헤딩태그 h2에 이미 "A 사업 실적"이라는 내용이 있으므로, "A 사업 실적의 총평"이 되는 것이다.

정리를 하면
  1. 내가 보고 있는 페이지의
  2. 콘텐츠를 섹셔닝(구분)하고
  3. 각 섹션마다 콘텐츠에 알맞는 헤딩을

부여하면 되는 것이다.

결론
여기에 나온 잘못된 사례말고도 찾아보면 더 많은 방법으로 잘못 사용되고 있을 것이다.
중요한것은, 디자인된 시안을 받고 코딩을 할때 레이아웃팅만 해야 하는 것이 아니다.
콘텐츠도 레이아웃팅을 해야한다. 그리고 그에 적절한 헤딩태그도 제공을 해야한다.


덧.
콘텐츠를 레이아웃팅 하는 것을 HTML코더만의 몫이라고 하기는 힘들다.
콘텐츠를 만든 사람(대부분의 경우 기획자)이 가장 큰 책임을 지고 있는 것이다.
설계가 이상하게 되어있는데 어떻게 올바르게 시공이 되겠는가.

하나의 페이지에 여러개의 목적을 가진 콘텐츠들이 뒤죽박죽 썩여있다면, 그것은 기획을 잘못한 것이고 UX 또한 고려하지 않은 것이다.
크리에이티브 커먼즈 라이선스
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 h1, H2, H3, h4, h5, h6, HTML, 헤딩, 헤딩태그
Trackback 1 Comment 3

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

  1. hiphapis의 생각  삭제

    2010/01/10 21:07TRACKBACK FROM hiphapis' me2DAY

    사실은 전편 쓰자마자 바로 후편을 썻지만.. 지금에서야 퍼블리싱한 헤딩 제대로 사용하기(후편)

댓글을 달아 주세요

  1. ㅇㅅㅇ

    잘 읽고 갑니다

    2010/01/24 01:05 [ ADDR : EDIT/ DEL : REPLY ]
  2. 김재성

    4 2)에 부여는 조금 의견차가있는데요
    만약 저 예제가 특정 페이지의 경우라면
    해딩 태그를 제목표시하는것 이외에 실제 사용자는 사이트 레이아웃을 이해하는 용도로 사용되고 있기에
    한사이트에 해딩 레벨은 일관성이 있어야된다고 생각합니다.

    2010/06/07 15:29 [ ADDR : EDIT/ DEL : REPLY ]
  3. Favicon of http://www.webshock.net BlogIcon 곡괭이

    도움이 많이 되었습니다.. 감사합니다^^

    2010/09/10 15:04 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2010/01/06 21:47

헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-

HTML5가 회자되고 있는 이마당에, HTML의 기초중에 기초인 헤딩태그에 대해서 포스팅한다는 현실이 부끄럽기도 하고 안타깝기도 하지만.. 이렇게 포스팅을 해야 많은 분들이 올바른 헤딩태그를 사용하시리라는 희망을 품으며 몇자 적어봅니다.

전편과 후편으로 나뉘며
전편에는 헤딩태그를 사용했을 때의 장점(전반적으로 시멘틱 마크업에 대한 이야기), 해딩태그의 이해
후편에는 잘못된 헤딩태그 사용예, 헤딩태그 결론에 대해 포스팅됩니다.


2009년 하반기동안 Javascript강의를 많이 다녔는데, 이때 받았던 질문중 기억에 남는 질문은
"헤딩태그를 어떻게 사용해야 할지 모르겠어요"

라는 질문이였다. (Javascript강의인데 HTML을 질문하는 용자의 용기와 호기심에 박수를 보냅니다.;) )
알고보면 매우 간단한 것인데 이 질문을 여러번 받았었다.
아마도 원문에 헤딩태그에 대한 자세한 설명과 예제가 부족해서 그런게 아닌가 하는 생각을 해본다.
접근성을 준수했다는 사이트들도 상당수가 잘못된 헤딩태그를 사용하는 것을 목격하였다.

이제 헤딩태그에 대해 파해쳐보자. 팍팍

팍팍 파해쳐보기 전에..
지금 포스팅된(그리고 포스팅될) 이 글은 견해의 차이가 있을 수 있다.
그 이유는 원문에는 간략한 설명만 있을 뿐 자세한 설명과 예제가 적다.
이로인해 원문을 이해하는데 견해의 차이가 생길 수 있기 때문이다.
이건 마치 성경을 놓고서 사람마다(혹은 종파마다) 해석하는 바가 틀린 것과 같은 이치이다.

자. 자기방어는 이쯤으로 마무리하고, 이제 제대로 한번 파해쳐보자 팍팍.

헤딩을 올바르게 사용했을 때의 장점(시멘틱마크업의 장점)
헤딩을 올바르게 사용하면 SEO가 올라간다.
물런 국내 대형 포털의 검색에는 안걸릴 확률이 아주 높다. 실제로 검색이 되었다 하더라도 검색결과에 나올 확률은 알 수 없다. 그 이유는 다들 알겠지만 검색 방식의 차이와 광고 및 정책 때문이다.
"그렇다면 도대체 어떻게 SEO가 올라간다는 말이냐?"
라는 의문을 품은 분도 계실 것이다.
우리가 종종 착각을 하는것이..  포털의 검색만 "검색"이라고 착각을 하는데, 사실은 그렇지 않다.
크롤러(혹은 봇. 이하 크롤러로 통일)가 돌아다니면서 수집하는 모든것이 검색이라고 생각해도 무관하다.
크롤러가 정보를 수집해갔다는 행위의 시초가, "검색"이라는 이벤트가 있었기 때문에 정보를 수집해간 것이라 해석할 수 있기 때문이다.
크롤러가 무작위로 정보를 수집해 갔다 하더라도, 수집해간 정보가 언젠가는 노출이 될 확률이 높으므로 이것 또한 긍정적으로 생각할 수 있다.

엄청난 비용을 지불하여 SEO를 올릴 수도 있지만, 간단하게 HTML 코드를 수정함으로써 SEO를 올릴 수 있다는 것이다.
HTML을 수정했다고 엄청나게 SEO가 향상된다고 말하기는 어렵다. 위에 언급했듯이 국내 포털들은 검색에 안걸릴 확률이 높으므로 그렇다. 안하는 것보다 나은 정도의 수준이라고 생각하는 것이 좋을 것이다. 
하지만 다행스럽게도 구글에서는 확률이 올라가니 아무 소득이 없는것은 아니다.

사람이 보는 것이 아닌 기계가 알아볼 수 있는 헤딩
그럼 크롤러가 정보를 수집해가는 원리에 대해서 알아보자.
일반적인 크롤러의 경우 HTML을 읽은 후 거기서 키워드를 인덱싱한후 저장하는 방식이다.
여기서 어려운것은 HTML을 분석하여 이 HTML이 어떤 정보를 담고 있는지, 혹은 해당 키워드가 있는지 인덱싱하는 기술이다.
수많은 text중에 어떤 것이 의미가 있는 정보이고 광고이고 쓰레기인지 구분해내야 하기 때문이다.
이 말인즉슨 유의미한 데이터(정보)가 무분별하게 쓰레기와 썩여있다면, 크롤러가 유의미한 데이터를 찾지못하고 넘어갈 수도 있다는 것이다.

시멘틱 마크업
좋은 크롤러라면 모래 속의 진주를 발견해 갈 수 있지만, 이런 기대는 감나무 밑에서 감 떨어지길 기다리는것과 같다.
우리가 유의미한 데이터라고 표시를 해주면 어떻게 될까? 당연히 크롤로가 한결 수월하게 정보들을 수집해 갈 것이다.
이렇게 표시를 할 수 있는 태그중 하나가 바로 헤딩태그이다. 우리가 헤딩태그를 올바로 사용하면 크롤러는 별 어려움없이 유의미한 데이터를 수집해 갈 수 있다.
그 이유는 기본적으로 크롤러들은 head안에 오는 태그들(title 등등)이나 헤딩태그, 강조태그들을 주로 수집해가기 때문이다. (크롤러마다 차이가 있음)
크롤러가 이해할 수 있다면 크롤러가 아닌 다른 녀석도 알아볼 확률이 높아지게 된다.
여기서 다른 녀석은 우리가 흔히 사용하는 브라우저(IE, FF, Opera, Safari, Chrome)가 아닌 다른 브라우저 및 디바이스를 의미한다.
PDA, 모바일 브라우저 뿐만 아니라 사내 터미널 등등 호환성이 넓어지는 것이다. 사실 이것은 웹표준을 준수했을때 생기는 이점이며, 시멘틱 마크업을 했을때 시너지가 생겨 그 효과가 극대화 된다.

기계(HTML을 수집하거나 분석하는 모든것들)가 이해를 해야지만이 SEO도 올라가고, 기계가 이해를 할 수 있으니 다른 디바이스(장치)와도 호환이 된다.
결국은 기계가 이해할 수 있는 마크업을 해야한다는 것이다.
이것이 바로 내가 생각하는 시멘틱마크업이다.



헤딩태그의 이해
많은 분들이 헤딩태그를 설명할 때 책과 비유를 한다. 나 또한 책에 비유를 많이 했었는데
이렇게만 설명하면 이해할거라고 생각했었는데 그것은 내 착각이었다.
많은 분들에게 "책"예를 들면 다들 그때는 고개를 끄덕거리시지만, 막상 사용할려고 했을때 감을 못잡으시는 경우가 허다했다.

하지만 이번에는 책이 아닌 다른것으로 예를 들어 설명을 해보겠다.
바로 문서로 예를 들겠다.
여기저기서 실망감을 표출하며 "그게 그거다", "낚시하냐"라는 원성이 들리지만..
책보다는 문서가 더욱 적절한 예제여서 헤딩태그에 대한 오해를 줄일 수 있을 듯 하다.
수많은 문서 중 보고서를 예를 들겠다.

2009 실적 보고서라고 하자. 그리고 이 실적보고서의 내용을 상상해보자.
각 사업별 실적이 나올 것이고, 전년도 실적과 비교도 할 것이고, 분기별 비교도 있을 것이다.
이러한 것을 목차로 생각해보면
  • 2009 실적 보고서
    • 전체 사업 실적 요약
    • A 사업 실적
      • 1분기 실적
      • 2분기 실적
      • 3분기 실적
      • 4분기 실적
      • 전년과 비교
      • 총평
    • B 사업 실적
      • 1분기 실적
      • 2분기 실적
      • 3분기 실적
      • 4분기 실적
      • 전년과 비교
      • 총평
    • 총평

뭐 대충 이런식으로 있게 될 것이다.
그럼 여기서 A 사업 실적의 2분기 실적을 보고 있다고 가정하자.
그렇다면 이 페이지의 헤딩은 어떻게 되야할까?
바로 그렇다. 여러분이 생각한 것이 바로 정답이다.
생각대로 하면 되고~

대제목: 2009 실적 보고서
중제목: A 사업 실적
소제목: 2분기 실적

참 쉽죠잉~?



다음편에는 헤딩태그의 오해와 결론에 대해 적어보도록 하겠습니다.
ps. 왠지 다른 블로거가 헤딩태그 관련해서 글을 썻을거 같은 이 느낌.. ㅠ,.ㅠ

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

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

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
[JS] IE6인지 구분하기  (0) 2008/08/20
Posted by Johan Kim hiphapis
TAG h1, H2, H3, h4, h5, h6, HTML, 시멘틱, 시멘틱 마크업, 헤딩, 헤딩태그
Trackback 1 Comment 2

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

  1. hiphapis의 생각  삭제

    2010/01/06 22:43TRACKBACK FROM hiphapis' me2DAY

    미루고 미루던 백만년만의 포스팅 헤딩 제대로 사용하기(시멘틱 마크업하기). -전편- 왠지 뒷북일거 같은 불안한 느낌.

댓글을 달아 주세요

  1. Favicon of http://hyeonseok.com BlogIcon 신현석

    간만의 글이 아주 중요한 내용이군요. 후편도 기대하겠습니다. :)

    2010/01/06 23:35 [ ADDR : EDIT/ DEL : REPLY ]
  2. 연주

    쉽고 공감가는 글이네요~ ^.^

    2010/01/27 18:14 [ 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/11/27 12:17

Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기

body에다가 class를 부여하여 css selector만 이용하는 방법입니다.
가장 많이 쓰이는 IE, IE6, IE7, 그 외.. 로 예제코드 만들어 봤습니다. (실제로 저는 이렇게 해서 사용합니다.)

<!--[if lte IE 6]><body class="ie ie6"><![endif]-->
<!--[if IE 7]><body class="ie ie7"><![endif]-->
<!--[if !IE]>--><body><!--<![endif]-->

#content { color: red; }
.ie #content { color: blue; }
.ie6 #content { color: pink; }
.ie7 #content { color: green; }


Conditional comments에 대해서

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

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

헤딩 제대로 사용하기(시멘틱 마크업하기). -전편-  (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
CSS Editors Reviewed  (0) 2008/06/25
Posted by Johan Kim hiphapis
Trackback 0 Comment 4

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

댓글을 달아 주세요

  1. Favicon of http://aswemaythink.kr BlogIcon metacortex

    요한 사마
    하노이 잘 다녀오3

    ps. 선물 꼭 사오셈 >_<

    2008/11/30 00:16 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      지금도 하노이 친구들 덕분에 일하는중..
      젠장!

      2008/11/30 12:22 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://miya.pe.kr BlogIcon 김군우

    오홍~ 좋은데요?

    2008/12/18 13:31 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2008/08/20 11:13

[JS] IE6인지 구분하기

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;

if(IE6) {
  alert("i love ie");
}


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

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

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
CSS Editors Reviewed  (0) 2008/06/25
코딩 하기 전 에 문서부터 디자인을 하라  (2) 2008/03/19
Posted by Johan Kim hiphapis
TAG IE6, JavaScript
Trackback 0 Comment 0

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

댓글을 달아 주세요

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

CSS Frameworks

지극히 개인적이며, 이것들 모두 심도있게 사용하고 적은것이 아니라는 점 감안하시고 보세요~

이름 주저리
blueprintcss Grid 위주이며 class로 griding
RoR로 Grid를 재설정하여 CSS 파일을 생성할 수 있다.
Modular CSS 많이 사용되는 6개의 Grid만 지원
Grid별로 파일이 나눠져 있음
Download 버튼이 꼭꼭 숨어져 있어 찾기 힘듬
Emastic 최근에 나온 CSS Framework.
blueprintcss랑 비슷하다
Yahoo YUI 개인적으로는 별로 안좋아하는 naming sense ㅎㅎ
yaml Framework이라고 부를만한 규모
보통 Grid위주인 반면 yaml은 여러문제에 대해 고려가 되어 있고 지원을 하고 있다.
yaml 홈페이지에 나름 유용한 정보들도 좀있다.
크리에이티브 커먼즈 라이선스
Creative Commons License

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

Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기  (4) 2008/11/27
[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
Posted by Johan Kim hiphapis
Trackback 0 Comment 0

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

댓글을 달아 주세요

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

코딩 하기 전 에 문서부터 디자인을 하라

HTML을 코딩하는 사람들이 시안을 처음 받았을때 하는 고민은..
  • 별다른 생각없이 시안대로 코딩하거나
  • 화면구성(즉 layout, grid)을 고민.
일것이다 하지만 이것은 초보와 중수의 모습이다.
그렇다면 고수의 고민은 무엇일까..?
먼저 문서 구조를 생각한다.
가 아닐까?

자료(정보)를 담고 있다는 측면에서 보면 웹은 책, 신문 처럼 문서라고 할 수 있다. 그리고 실제로 웹은 문서이다.
책에서 중요한것중 하나는 "좋은 정보를 어떻게 보여줘야 독자들이 잘 이해할 수 있을까?" 라고 생각한다.
가장 중요한것은 장식이 아니라 정보 그 자체이다.

그러므로 정보의 성격을 구분을 해서 문서의 구조를 새우는것이 가장 중요하다.
이렇게 하면 semantic한 마크업을 보다 쉽게 할 수 있게 되고, 이후 작업인 CSS, Javascript도 접근성을 보장하며 작업하게 될 확률이 높아진다.

한마디로 문서 구조부터 생각을 하고 작업을 시작하면 표준을 준수한 결과물이 나오게 될 확률이 높아지는 것이다. (시작이 반..?)
크리에이티브 커먼즈 라이선스
Creative Commons License

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

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
IE6 에서 print 했는데 글씨가 겹쳐서 나올때  (0) 2008/02/01
Posted by Johan Kim hiphapis
TAG 구조, 표준
Trackback 0 Comment 2

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

댓글을 달아 주세요

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

    와! 정말 중요하고 맞는 말씀.

    2008/12/06 12:47 [ ADDR : EDIT/ DEL : REPLY ]

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

mac profile

이 포스팅은 제 뇌의 용량이 딸리는 관계로 메모(저장)용 포스팅 입니다.
세팅이 수정될때마다 함께 수정 됩니다.

alias l="ls -alG"
alias ll="ls -alG"
export PS1='\[\033[01;32m\]\u@\h\[\033[01;34m\] \w \$\[\033[00m\] ' #thx for z3rok

사용자 삽입 이미지

쌩뚱맞게 profile 이미지도 올리기 -ㅅ-;
크리에이티브 커먼즈 라이선스
Creative Commons License

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

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
IE7 Debugger  (0) 2008/01/15
Posted by Johan Kim hiphapis
TAG Mac, Profile
Trackback 0 Comment 0

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

댓글을 달아 주세요

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

IE7 Debugger

as like FireBug
흠..유료인거 같은데 공짜로도 쓸 수 있는거 같은데..
Firebug에 없는 Color Picker도 들어있다!

막 별견해서 아직 많이 써보지는 않았음.

http://www.my-debugbar.com/wiki/CompanionJS/HomePage
아, MS Script Debugger  필수!

스샷 (DebugBar 설치된 모습)
사용자 삽입 이미지



느낀점 (쓰면서 계속 적어나갈 계획..;; )
  • console 기능이 생각보다 약하다. Object, Array, DOM이 출력이 안된다. 쩝;; 타격이 꽤 크군;;
크리에이티브 커먼즈 라이선스
Creative Commons License

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

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
CSS Position relative 와 absolute 함께 상대적 절대 포지셔닝하기  (6) 2007/12/28
Posted by Johan Kim hiphapis
TAG CompanionJS, Firebug, IE, script debugger
Trackback 0 Comment 0

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

댓글을 달아 주세요

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

JSSpec용 EditPlus ACP,STX 파일

간략하게 JSSpec을 설명하자면 Javascript BDD 툴입니다.
JSSpec과 BDD에 대한 설명은 다음에 기회될때 포스팅하기로 하고..(과연..?)
일단, 자세한 설명은 JSSpec홈페이지 http://code.google.com/p/jsspec/를 참고하세요~

Editplus용 자동완성파일 ACP, 구문파일 STX을 만들었습니다.
jscript.zip (2007-05-10)
JScript stx with Prototype.js - W. Jordan
jscript.acp.zip (2007-05-10)
JScript acp, ctl with Prototype.js - W. Jordan
이것들이 원본인데 제 입맛에 맞춰서 수정을 해서 쓰다가 JSSpec구문을 추가한 것입니다.
원본이 With Prototype이어서 prototype을 쓰시는 분들께는 사용하시기 더 편리하지 않을까 생각합니다.

만약 사용하시던 ACP, STX가 있으시면 제가 추가한 부분(JSSpec으로 검색해서 나오는 부분)만 현재 사용하시는 파일에 추가를 해주시면 됩니다.

다운로드 >>http://editplus.com/kr/html.html 에서 다운받으실 수 있습니다. (js7.zip)




acp에 추가된 내용
#T=_________________
#T=  JSSpec
#T=jss
describe("^!", {
    "should ": function() {
       
    }
});
#T=vof
value_of("^!")
#T=ept
expect(^!)
#T=sb
should_be(^!)
#t=snb
should_not_be(^!)
#t=sbe
should_be_empty(^!)
#t=snbe
should_not_be_empty(^!)
#t=sbt
should_be_true(^!)
#t=sbf
should_be_false(^!)
#t=snbt
should_not_be_true(^!)
#t=snbf
should_not_be_false(^!)
#t=sh
should_have(^!)
#t=she
should_have_exactly(^!)
#t=shal
should_have_at_least(^!)
#t=sham
should_have_at_most(^!)
#t=si
should_include(^!)
#t=sni
should_not_include(^!)
#t=sm
should_match(^!)
#t=snm
should_not_match(^!)
#t=sf
should_fail(^!)

stx에 추가된 내용
#KEYWORD=JSSPec
describe
value_of
expect
beforebe_each
should_be
should_not_be
should_be_empty
should_not_be_empty
should_be_true
should_be_false
should_not_be_true
should_not_be_false
should_have
should_have_exactly
should_have_at_least
should_have_at_most
should_include
should_not_include
should_match
should_not_match
should_fail

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

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

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
[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기  (1) 2007/08/31
Posted by Johan Kim hiphapis
TAG acp, BDD, EditPlus, JavaScript, JSSpec, STX, 구문 파일, 자동 완성
Trackback 0 Comment 0

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

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2007/10/01 13:05

EditPlus 에서 monaco(mac 기본 폰트)사용하기. (XP에서 안티알리아싱(Anti-Aliasing 설정)

Mac전용 폰트인 Monaco 폰트(dfont)를 트루타입(ttf)로 바꿔도, XP에서는 알리아싱(Aliasing)때문에 안이쁘게 보입니다.
그렇기 때문에 안티-알리아싱(Anti-Aliasing)을 설정을 해야 하는데..
Window + R 키를 눌러서 실행창을 띄운 후, regedit 을 명령해서 레지스트리 편집기를 엽니다.

XP에서 Anti-Alias 설정하는 RegEdit

HKEY_CURRENT_USER\Control Panel\Desktop 에서 FontSmoothing 항목의 값을 2로, FontSmoothingType 항목의 값을 1로 수정



HKEY_CURRENT_USER\Control Panel\Desktop 에서
FontSmoothing = > 2
FontSmoothingType => 1

로 수정 후 재부팅을 합니다.

그럼 적용된 화면을 보여드리겠습니다.
EditPlus에 Monaco / 10 으로 적용했습니다.

EditPlus에서 Monaco / 10 용모습

TextMate 만큼은 아니지만.. 그래도 귀엽지 않나요~? ㅎㅎ
크리에이티브 커먼즈 라이선스
Creative Commons License

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

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
[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기  (1) 2007/08/31
[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
Posted by Johan Kim hiphapis
TAG alias, anti-alias, EditPlus, mac font, monaco, 안티 알리아스, 안티 알리아싱, 알리아스, 알리아싱, 폰트변경
Trackback 0 Comment 3

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

댓글을 달아 주세요

  1. Favicon of http://flutia.egloos.com BlogIcon flutia

    monaco 폰트가 이쁘고 생각보다 가독성이 좋은데, 코딩해놓고 보면 왠지 어지러운 느낌이 들어서 난 코딩할 때는 안쓰지.. ㅡ.ㅡ;

    하지만 다른 데서는 정말 이쁘더라. >.<;)b

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

      나도 XP에 적용하고 난 후 처음에 산만한 느낌을 받았는데...;;
      지금은 조금 적응이 되었는지..눈에 익은듯 해 ㅎㅎ

      근데 Monaco는 역시 Mac에서...써야해 ㅡ,.ㅡ

      2007/10/01 15:25 [ ADDR : EDIT/ DEL ]
  2. Favicon of http://34wjdals.web44.net/ BlogIcon 고양이군요

    xp에서 트루 타입 보정을 줄때 부드러워 보이게 하는 또다른 방법이 있는데.
    배경화면에서 마우스 오른쪽버튼을 누른후~ 디스플레이 설정에서. 배경화면의 글꼴을 클리어 타입으로 바꾸어주는게 있었는데. 그걸 바꾸어주니 aptana나 에디터플러스에서 사용하는 폰트도 클리어 타입이 보정 되더라구요 ^_^..

    2011/11/14 11:04 [ ADDR : EDIT/ DEL : REPLY ]

웹[기술|표준|접근]/작은 팁2007/08/31 12:48

[CSS] IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기

검색을 하다가 알아낸(http://www.cssplay.co.uk/layouts/fixed.html) 방법인데, 아주 간단합니다.

body{
    height:100%;
    overflow-y:auto;
}

/* Fixed 할 Element */
.fixed_div{
    position:absolute;
}


하면 됩니다. ㅎㅎ
크리에이티브 커먼즈 라이선스
Creative Commons License

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

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
[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기  (1) 2007/08/31
[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
[font series 2]폰트사이즈만 상대적으로 하면 된다?  (2) 2007/08/01
Posted by Johan Kim hiphapis
TAG fixed, IE6, posiotion
Trackback 1 Comment 2

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

  1. IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6.  삭제

    2007/11/05 23:00TRACKBACK FROM 나라디자인

    CSS에는 position:fixed 라는 속성이 존재하고 이 속성이 부여된 엘리먼트는 화면에 고정되어 스크롤을 해도 움직이지 않고 항상 같은 자리에 머물게 됩니다. 흔히 "스크롤을 따라다니는 배너&...

댓글을 달아 주세요

  1. Favicon of http://ecruu.tistory.com BlogIcon ecruu

    하지만 이 방법은 IE에서 부자연스럽게 움직입니다.
    붙어있는 듯하지 않고 스크롤을 따라 움직이는 것처럼 되지요..
    아시겠지만요.. ^-^;

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

      아 그랬던가요..? 그리 오래된 일이 아닌데 기억이 안나에요 ㅎㅎ;;
      사실 저렇게 해보니깐 "잘된것처럼"보이긴 하는데, 가끔씩 scroll과 연관되어서 문제가 생겼던걸로 기억이 납니다.
      그래서 결국 javascript를 사용했던걸로 기억합니다.
      .
      .
      .
      하지만 이렇게 작업했던 부분은 디쟈인에서 걷어냈다죠..ㅠㅠ

      2007/11/12 23:52 [ ADDR : EDIT/ DEL ]

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

[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기

엄청 간단합니다.

String.prototype.trim = function(){
    return this.replace(/^(\s|&nbsp;)+|(\s|&nbsp;)+$/g, "");
}

String.prototype.ltrim = function(){
    return this.replace(/^(\s|&nbsp;)+/g, "");
}

String.prototype.rtrim = function(){
    return this.replace(/(\s|&nbsp;)+$/g, "");
}

str = "  &nbsp;1234567890   ";
ltrim = str.ltrim();
rtrim = str.rtrim();
trim = str.trim();

result = "<pre>orignal = \"" + str + "\"\n";
result += "ltrim length = " + ltrim.length + ", string = \"" + ltrim + "\n";
result += "rtrim length = " + rtrim.length + ", string = \"" + rtrim + "\n";
result += "trim length = " + trim.length + ", string = \"" + trim + "\n";

document.write(result);

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

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

EditPlus 에서 monaco(mac 기본 폰트)사용하기. (XP에서 안티알리아싱(Anti-Aliasing 설정)  (3) 2007/10/01
[CSS] IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (2) 2007/08/31
[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기  (1) 2007/08/31
[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
[font series 2]폰트사이즈만 상대적으로 하면 된다?  (2) 2007/08/01
[font series 1]웹에서 Font Size 문제..  (2) 2007/08/01
Posted by Johan Kim hiphapis
TAG JavaScript, trim, 여백
Trackback 1 Comment 1

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

  1. 정귯ㄱ  삭제

    2009/02/20 23:48TRACKBACK FROM I think about...

    ㅇ

댓글을 달아 주세요

  1. Favicon of http://www.buysitetraffic.com/ BlogIcon get website traffic

    감사합니다

    2011/12/20 15:02 [ ADDR : EDIT/ DEL : REPLY ]

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

[JS] timestamp 를 date 형식으로 보여주기(as like php date())

timestamp 로 받은 값을 원하는 date형식으로 보여주는 겁니다.
아주 간단하므로, 원하시는대로 살을 붙여서 사용하시면 됩니다.
샘플로 월을 영어로 표기하도록 해봤습니다.


소스코드
var DateFormatter = {
    month : ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
    parse : function(timestamp, format) {
        var timestamp = parseInt(timestamp);
        if(timestamp < 10000000000) timestamp *= 1000;

        _date = new Date();
        _date.setTime(timestamp);

        var year = _date.getFullYear();
        var month = this.month[_date.getMonth()];
        var day = _date.getDate();

        var hour = _date.getHours();
        var min = _date.getMinutes();
        var sec = _date.getSeconds();

        if(format){
            format = format.replace(/y/i, year);
            format = format.replace(/m/i, month);
            format = format.replace(/d/i, day);
            format = format.replace(/h/i, hour);
            format = format.replace(/i/i, min);
            format = format.replace(/s/i, sec);

            return format;
        }
        else{
            return day + " " + month + " " + year;
        }
    }
};

사용예제
var timestamp = new Date().getTime();
alert(DateFormatter.parse(timestamp));
alert(DateFormatter.parse(timestamp, 'd m y h:i:s'));

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

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

[CSS] IE6 에서 CSS만으로(핵안쓰고) position:fixed 하기  (2) 2007/08/31
[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기  (1) 2007/08/31
[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
[font series 2]폰트사이즈만 상대적으로 하면 된다?  (2) 2007/08/01
[font series 1]웹에서 Font Size 문제..  (2) 2007/08/01
[JS] HTML Attribute Parser  (0) 2007/07/13
Posted by Johan Kim hiphapis
TAG date, getTime, JS, setTime
Trackback 0 Comment 0

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

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2007/08/01 12:05

[font series 2]폰트사이즈만 상대적으로 하면 된다?

많은 분들이 폰트사이즈만 상대적으로 생각하시는데..
저는 폰트만 상대크기면 반쪽짜리라고 생각합니다.

만약 폰트만 상대크기로 했을경우 줌브라우징하면 글자만 커졌다 작아졌다 하게 된죠. 그렇게 되면 한줄에 10글자씩 보이던게 한줄에 2글자만 보이게 되는 상황이 연출될 수 도 있는데, 이렇게 되면 글자 하나 읽을때마다 엄청난 스크롤의 압박을 견뎌내야 합니다.

그리고 레이아웃도 깨져서 섹션별로 구분하기가 힘들어 집니다.
예를들어, 다음의 메일함 좌측 메뉴에서 글자크기를 크게 해버리면 그리드가 넘어가버리게 됩니다.
다음의 메일함 좌측 메뉴

이런식으로 정보가 섹션단위로 나뉘어져 있을때, 글자를 크게 해버리면 이 정보가 어느 섹션인지 알 수 없게 되버리는 거죠.
"난 상대크기줘서 글자 켜졌다 작아졌다 하게 해 줫으니깐 책임없어" 라구요?
너무 무책임하시진 않으신가요?

"이렇게 된 사이트가 어딨는데~?" 냐구요?
왜 없겠습니까. 대표적인 예시 사이트가 있습니다. 바로 yahoo.com 이지요.
yahoo.com에 가서 글자크기조절 한번 해보세요. 진정한 줌브라우징에 깜짝(?) 놀라실겁니다. ㅎㅎ

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

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

[JS] 정규식을 이용하여 ltrim, rtrim, trim 구현하기  (1) 2007/08/31
[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
[font series 2]폰트사이즈만 상대적으로 하면 된다?  (2) 2007/08/01
[font series 1]웹에서 Font Size 문제..  (2) 2007/08/01
[JS] HTML Attribute Parser  (0) 2007/07/13
[JS] OS 알아내기 (with js & jQuery)  (0) 2007/07/10
Posted by Johan Kim hiphapis
TAG Font size, yahoo.com, 상대크기, 상대폰트, 웹접근성
Trackback 0 Comment 2

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

댓글을 달아 주세요

  1. Favicon of http://hyeonseok.com BlogIcon 신현석

    줌레이아웃은 화면이 작을 경우 가로 스크롤이 생기기 때문에 오히려 더 불편할 수도 있습니다. 줌레이아웃을 사용하되 가로 스크롤이 생기지 않게 하는게 좋죠. 이러한 개념을 가진 레이아웃 소개입니다. http://hyeonseok.com/soojung/contents/upload/barcampseoul-hyeonseok.pdf

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

      아하, 그런 문제점도 있군요!

      PDF에 있는것 처럼 줌브라우징이 된다면 섹션을 벗어나는 일 도 없고 가로 스크롤도 안생기고 잘 볼 수 있겠군요.

      가로세로 양방향 스크롤의 압박보단, 세로스크롤의 압박만 있는게 더 편하겠네요 ㅎㅎ
      (불편하긴 매한가지일려나?)

      좋은자료 감사합니다 :)
      (barcamp때 발표하셨던 자료인가 봐요?)

      2007/08/01 20:19 [ ADDR : EDIT/ DEL ]

웹[기술|표준|접근]/작은 팁2007/08/01 11:41

[font series 1]웹에서 Font Size 문제..

스마트에디터오픈하면서 font size 논쟁을 지켜보다가, 과거 제가 겪었던 고민을 공유해보자 글을 써 내려 갑니다.(모두가 한번쯤 생각해볼만한 문제)

폰트 크기를 상대크기로 하면 줌 브라우징을 지원하니 접근성이 향상이 됩니다.
하지만 막상 상대크기로 하고 나면 예상치 못한 문제점들이 발생합니다.

많은 사람들이 브라우져의 글자크기 조절하는 법을 모릅니다.
브라우져 텍스트크기가 보통이 아닌 다른 글자크기로 정의되어 있는데 사이트가 상대크기라면
글자가 갑자기 크게 나오거나, 혹은 작게 나오거나 하겠죠. 이런 상황을 일반적인 사용자가 맞닥뜨리면 기겁을 하며(특히 IE 6) 해킹당한건 아닌지, 바이러스 걸린건 아닌지, 컴퓨터가 고장난건 아닌지 하는 겁이 덜컥 듭니다. 너무 극단적인 예인가요?
하지만 컴퓨터를 조금 아시는 분이라도 당황하기는 마찬가지 입니다.

사용자가 많을 수 록 이러한 문제의 비율은 극격히 높아질 것 이고, 고객센터에 엄청난 질문과 항의가 올라올 것 입니다.(때때론 전화가 올 수 있구요..ㅎㅎ;)
FAQ에 올려 있다고 하더라도, 이걸 보는 사용자가 얼마나 될까요..?

대다수의 고객들이 절대크기를 경험에 의한 학습으로 사용해 왔고, 사용하고 있습니다.
회사 입장에서는 모험을 하기보다는, 안정적인 운영을 위해 절대크기로 갈것입니다. (안정적인 운영은 곧 수익창출을 할 수 있는 기반이니깐요)

그럼 결국 줌브라우징이 필요한 소수의 사용자들은 또 배척되는 딜레마 상황이 되어버리죠..
양쪽 모두를 아우를 수 있는 방법은 없는 걸까요?

IE 6 이 패치되는 방법은 어떨까요? (IE 7 부터는 줌브라우징이 지원됩니다)
패치됬을때 불러올 혼란을 생각하면 끔찍하지만, 가장 확실한 방법이죠.
하지만 MS가 그 무리수를 감당하려 할까요?
애시당초 IE 6 이 줌브라우징을 지원했었더라면..(덤으로 표준도 준수했더라면;;)


고니님과 대화를 하면서 외국계 회사들은 상대크기를 많이 쓰는거에 대해 얘기를 하게 되었는데
고니님은 그 이유를 서체에 있다고 보셨습니다. 영어는 줌브라우징으로 작게해도 알아볼 수 있는 마지막단계가 한글보다 높다는 의견이었는데,
즉 무슨말인고 하니(숫자가 작을수록 글씨크기는 작아진다면) 영어로 사이즈를 2으로 하면 더 이상 알아보기 힘들다고 한다면 한글은 5로 하면 더 이상 알아보기 힘든 사이즈가 되는 것이죠.



상대폰트 쓰면 좋은데, 막상 쓰고나면 이러저러한 문제점들이 생기니...



ps > 이것 말고도 많은 고민들과 문제점이 있을 수 있습니다.
그런것들을 서로 공유를 하면 좋겠습니다. (트랙백 혹은 코멘트로)
이러한 고민들을 서로 공유해 나가는것이 해결책을 찾아 나가는 길이니깐요.
크리에이티브 커먼즈 라이선스
Creative Commons License

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

[JS] timestamp 를 date 형식으로 보여주기(as like php date())  (0) 2007/08/08
[font series 2]폰트사이즈만 상대적으로 하면 된다?  (2) 2007/08/01
[font series 1]웹에서 Font Size 문제..  (2) 2007/08/01
[JS] HTML Attribute Parser  (0) 2007/07/13
[JS] OS 알아내기 (with js & jQuery)  (0) 2007/07/10
[js] FireFox, Safari 에서도 16진수 컬러코드 사용하기.  (1) 2007/04/18
Posted by Johan Kim hiphapis
TAG Font size, 상대크기, 상대폰트, 웹접근성
Trackback 1 Comment 2

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

  1. 유니버설 디자인에 대한 단상: 글자 크기  삭제

    2007/08/01 14:51TRACKBACK FROM Feel the Freeism: To Be 2.0

    유니버설 디자인이라는 개념이 있습니다. 웹 접근성을 논하면서 자주 나오는 개념이라고 할 수 있겠습니다(방법론은 아닙니다..) 간단히 설명을 드리면... 유니버설 디자인(Universal Design)은 별도로 개조하거나 특별히 설계하지 않아도 모든 사람들이 최대한 사용하기 쉽게 만들어진 제품과 환경에 대한 디자인을 의미한다.유니버설 디자인의 철학은 그 대상을 모든 사람들(all people) 또는 가능한 많은 사람들(as many people as..

댓글을 달아 주세요

  1. Favicon of http://ismvisualstudio.net/blog/freeism BlogIcon freeism

    안녕하세요~ 트랙백 타고 왔습니다. ^^

    요즘 저도 사이트를 만들면서 5개의 브라우저로 랜더링 테스트를 하면서 작업을 합니다.
    IE7, IE6, FF, Opera, Safari...;;;

    근데 가만히 생각해보면(기다림님의 글에서 처럼), 표준을 지키지 않는 브라우저 때문에 개발자들이 싸워야 되는 상황이 우습기도 하고 화도 납니다. ㅠ _-) 오페라가 웹 표준을 준수하는 브라우저라고 하지만, 정작 중요한 것은 IE7, IE6 유저가 70%인 상황인거죠.

    위의 폰트 크기도 그래서 이래저래 말이 많은거 아닌가 싶습니다.
    (단, 한글이냐 영문이냐의 차이로 인한 문제는 별개로 하고 말씀드립니다. ^^;;; )
    웹 표준을 지키면 지킨다고 뭐라뭐라~ 어쩔 수 없이 안 지켜도 안 지킨다도 부라부라~
    완전 털썩입니다. ^^;
    영화에서나 나올법한 말이지만 '정의는 없다' 라고나 할까요? ㅋㅋ

    그래서 저는 그냥 핵(CSS hack)을 써서 브라우저 별로 글자크기를 다르게 지정해 버립니다. 기본은 상대 크기로 하지만, 여차 싶어서 아니다 싶으면 그냥 망설임없이 절대 크리고 지정을 해 버리죠(아. 이게 또 상대크기가 옳다는 이야긴 아닙니다. 그냥 제가 그렇다는 겁니다. ^^;; ). 근데 이렇게 또 핵을 쓰면 '핵은 되도록 사용하지 마세요. 표준도 아니고 나중에 문제 생깁니다'라는 의견이 주르륵...;;;;;;;

    아하하~ 어쩌란 거지요~ ^ -^);;
    아무튼 현 상황은 개인적인 경험과 대세[?!]를 따라서 가장 불편함이 없는 방법을 취하는 수 밖에 없을 것 같습니다. 어쩌면 앞으로도 영원히 말이죠. ㅠㅠ

    p.s. 저도 트랙백 드립니다~ ^^

    2007/08/01 14:51 [ ADDR : EDIT/ DEL : REPLY ]
    • Favicon of http://hiphapis.net BlogIcon 기다림

      안녕하세요 ;)
      제가 트랙백 드릴려고 했는데, 트랙백을 안쓰시더라구요.
      그래서 못드렸는데 이렇게 연결이 되니 다행이네요 :)

      누가 옳고 누가 그른지는 판단하기가 애매합니다.
      이쪽 입장을 생각하면 이 말이 맞고
      저쪽 입장을 생각하면 저 말이 맞죠.

      저도 처음에는 무조건 폰트크기를 상대폰트로 하는걸 강경해 왔는데, 정작 그렇게 하니 예상치 못했던 문제점들이 생기더군요.(블로그에 쓴 문제)

      뭔가 탁~! 해결되는 느낌이 들어야 하는데 쩝..
      브라우져들이 좀 일관성을 가지고 똑똑해지면 잘 해결될텐데..ㅠ,.ㅠ

      CSS핵은, "오남용 금지"라는게 제 입장입니다 ㅎㅎ
      멍청한 브라우져들때문에 어쩔 수 없죠..ㅎㅎ

      2007/08/01 15:03 [ ADDR : EDIT/ DEL ]

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

[JS] HTML Attribute Parser

HTML Element의 Attribute를 전부 뽑아 각각을 Object로 만들어 주는 코드입니다.
HTML Parser가 Element의 Attributes를 뽑는것과 비슷하다고 생각하시면 됩니다.

getAttribute 와의 차이점은, 제가 만든 정규식은 Element의 모든 Attributes를 Attribute와 value로 가져오는 것이죠.
무슨말인지 모르시겠죠?

<img src="a.jpg" width="100" height="100" alt="bla.." align="right">
에서

src="a.jpg" width="100" height="100" alt="bla.." align="right"
만 뽑아서 각각 object로 만들어 줍니다. 즉

["height="100"", "height", "100"]
같은 형태로 뽑아주는거지요.

여기까지 끈기있게 읽으신분들은 "근데 이거 만들어서 어따 쓸려고.." 라는 의문점이 드실거에요.(의문점이 드시면 당신은 천재..!!?? 혹은 동변상련을 느끼시는 분들..??)
이걸 왜 만들었냐하면, Wiki에 쓸 Formatter를 만드는데 거기에 쓸려고 만든 정규식입니다.
(Formatter 같은거 만들때 꽤나 유용하게 쓰일 정규식입니다.)

wiki 혹은 punBB같은 Formatter가 있는것들은 내부적으로 문법이 있습니다. 문법따라 여러가지 옵션들이 붙는데 이 옵션을 뽑아내서 처리하는 부분이 필요하죠.
바로 이 문제때문에 만들게 된 것입니다.
무슨말이신지 잘 모르시겠죠?? 그러실것 같아서 아래 예제를 준비했습니다.

[[image(src = "a.jpg" width  = 100% height="50" alt="bla..!! bla... ;(" align="center")]]
와 같은 문법이 있다고 한다면, 각각의 Attribute을 뽑아서 선행처리(Attribute가 옳바른 것인가? 쉽게 말하면 onclick 같은게 있는가..검사하는 등등)해야 하고,
Attribute속성에 맞게 다시 수정을 해줘야 합니다.(width, height같은것은 css로 만드는 등등)

이런것에 아주 유용하게 쓰일 정규식입니다.

쓸대없이 두서가 길었네요.
Formatter에서 [[image(~~~)]] 는 제거하여 순수하게 Attribute만 남기겠습니다.
그렇게 되면

src = "a.jpg" width  = 100% height="50" alt="bla..!! bla... ;(" align="center"
만 남겠죠, 이걸가지고 예제를 하겠습니다.

var getAttributes = function(attributes){
    var param_regExp = /(\w+)\s*=\s*((?:\"|\')[\w\s.~!@#\$%\^&\*\(\)\-_=\+\[\]\{\}:;]+\%?(?:\"|\')|[\w.~!@#\$%\^&\*\(\)\-_=\+\[\]\{\}:;]+\%?)(?:\s+?|$)/i;
    nextMatch = 0;

    while(attributes){
        if(nextMatch < attributes.length){
            attribute = param_regExp.exec(attributes.substr(nextMatch, attributes.length));
            nextMatch = nextMatch + attribute[0].length;

            document.write(attribute[0] + " : " + attribute[1] + " => " + attribute[2] + "<br />");

            if(nextMatch >= attributes.length){
                return;
            }
        }
    }
}

getAttributes("src  = \"a.jpg\" width  = 100% height=\"50\" alt=\"bla..!! bla... ;(\" align=\"center\"");

뛰워쓰기( ), 쌍따움표("), 홀따움표('), 세키콜론(;), 괄호({([) 등등 특수문자처리도 됩니다.

이 몇줄 안되는 코드를 짜기위해 몇시간을 소비한것인지..ㅠ,.ㅠ
검색해보면 쉽게 나올지도 모른다는 생각이...왜 이제서야 든걸까요..ㅠ,.ㅠ


ps> 지금 시간이 새벽 1시 11분이군요.. 왠지 오타도 많을것 같고, 말도 많이 틀릴것 같은데..
그러려니하고 봐주세요;;
크리에이티브 커먼즈 라이선스
Creative Commons License

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

[font series 2]폰트사이즈만 상대적으로 하면 된다?  (2) 2007/08/01
[font series 1]웹에서 Font Size 문제..  (2) 2007/08/01
[JS] HTML Attribute Parser  (0) 2007/07/13
[JS] OS 알아내기 (with js & jQuery)  (0) 2007/07/10
[js] FireFox, Safari 에서도 16진수 컬러코드 사용하기.  (1) 2007/04/18
[jQuery] interface > sortable 스크롤이 바닥일경우 drag시 스크롤 움직이는 버그  (0) 2007/04/17
Posted by Johan Kim hiphapis
TAG Formatter, getAttribute, getAttributes, JavaScript, JS, Wiki
Trackback 0 Comment 0

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

댓글을 달아 주세요

웹[기술|표준|접근]/작은 팁2007/07/10 11:37

[JS] OS 알아내기 (with js & jQuery)

new function() {
    var b = navigator.userAgent.toLowerCase(); // jQuery.browser 아래에 추가하시면 이 줄은 삭제

    jQuery.os = {
        Linux: /linux/.test(b),
        Unix: /x11/.test(b),
        Mac: /mac/.test(b),
        Windows: /win/.test(b)
    }
}


사실 jQuery.browser 아래에 추가해주셔도 되지만, Compress되었을 경우에는, 위의 소스를 별도의 js파일로 혹은, html안에 넣어주시면 됩니다.

Windows, Mac, Linux에서 테스트 해 봤으며,
Linux의 경우 (Gentoo에서만 확인해봤습니다.) Unix와 Linux 모두 뜹니다.
Unix에서는 안타깝게도 테스트를 못해봤습니다.

사용법은 간단합니다.
if($.os.Windows){
    alert("Window~");
}

이렇게 사용하시면 됩니다.

그리고, jQuery가 아니고 일반적인 Javascript라면

var agent = navigator.userAgent.toLowerCase();

os = {
    Windows : /win/.test(agent),
    Mac : /mac/.test(agent),
    Linux : /linux/.test(agent),
    Unix : /x11/.test(agent)
};

if(os.Windows){
    alert("Window~");
}

하시면 됩니다.
크리에이티브 커먼즈 라이선스
Creative Commons License

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

[font series 1]웹에서 Font Size 문제..  (2) 2007/08/01
[JS] HTML Attribute Parser  (0) 2007/07/13
[JS] OS 알아내기 (with js & jQuery)  (0) 2007/07/10
[js] FireFox, Safari 에서도 16진수 컬러코드 사용하기.  (1) 2007/04/18
[jQuery] interface > sortable 스크롤이 바닥일경우 drag시 스크롤 움직이는 버그  (0) 2007/04/17
[jQuery] interface > sortable > onChange > SortSerialize Bug  (0) 2007/04/17
Posted by Johan Kim hiphapis
TAG JavaScript, jQuery, OS
Trackback 0 Comment 0

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

댓글을 달아 주세요