Bittersweet Life: 1월 2010

2010년 1월 28일 목요일

2010년 1월 27일 수요일

ie테스터 다운로드 경로

http://www.my-debugbar.com/wiki/IETester/HomePage

2010년 1월 21일 목요일

css핵 정리

http://www.nmindplus.com/2006/06/28/css-hack/

css핵 정리

Netscape 4 제외시키기

Netscape 4은 media속성값에 “screen”이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />

이나

<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />

라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio’s hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p {
/*/*/ color:white; /* */
}

Mac IE 4.5, Netscape 4 제외시키기

@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")

Mac IE 5 제외시키기

CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p {
/* \\*/ color:white; /* */
}

Win IE 4~5 제외시키기

셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ { color:white;}

Win IE 4~5, Mac IE 4.5~5 제외시키기

프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p { color/* */:white;}

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

셀렉터 앞에 html>body를 붙인다.

html>body p { color:white;}

Win IE 6 제외시키기

프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p { color /**/:white;}

star hack

셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }

underscore hack

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p { _color:white; }

hash hack

프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p { #color:white; }

star 7 hack

셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }

xmlns hack

속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari, IE 7 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 { color:red; }

:root hack

셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 { color:red; }

Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content {
width:500px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}

Win IE 5용 패스필터

@media tty {
i{content:"\";/*" "*/}}; @import '/css/style.css'; {;}/*";}
}/* */

Win IE 5.5용 패스필터

@media tty {
 i{content:"\";/*" "*/}}@m; @import '/css/style.css';/*";}
}/* */

Win IE 5-5.5용 패스필터

@media tty {
 i{content:"\";/*" "*/}}@import '/css/style.css';/*";}
}/* */

모던브라우저용 패스필터

@import "null?\"\{";
@import "/css/style.css";
@import "null?\"\}";

이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…

2006년 7월 18일, IE7용의 핵(hack)을 추가.

IE7에만 적용

IE7에만 다른 스타일을 적용하는 방법은 해당 셀렉터의 앞에

*+html body

이나(*+html body는 Opera8~에도 적용되어 버리는 문제가 있기에 *+html>/**/body로 Opera8~ 전용 스타일을 기술하여야 한다. 참조:IE7のCSSバグとOpera CSS Hack)

*:first-child+html

을 기술한 다음 해당 셀렉터와 스타일을 작성하면 된다. 예를 들어 #banner라는 id셀렉터에 적용시키는 경우

*:first-child+html #banner {
　　　　　　：
　　[IE7용 스타일을 기술]
　　　　　　：
}

라고 기술한다. IE7이외의 브라우저를 위한 원래의 #banner 스타일 설정은 IE7용 스타일 설정 앞에 기술한다(순서가 바뀌면 원하는 효과를 얻지 못한다. 참조:IE7 の CSS ハック)

#banner {
　　　　　　：
　　[IE7이외의 브라우저를 위한 스타일을 기술]
　　　　　　：
}
*:first-child+html #banner {
　　　　　　：
　　[IE7용 스타일을 기술]
　　　　　　：
}

IE 6 and below （IE6이하）

* html

IE 7 and below （IE7이하）

*:first-child+html, * html

IE 7 only （IE7전용）

*:first-child+html

IE 7 and modern browsers only （IE7과 모던브라우저）

html>body

Modern browsers only (not IE 7) （IE7이외의 모던 브라우저）

html>/**/body

Recent Opera versions 9 and below （최근의 Opera9이하）
Opera 9와 Safari 동시적용

html:first-child

Safari에만 적용
Opera 9와 Safari 동시적용

/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.

/* safari only \\*/
html:\\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */

내용중 잘못된 부분이나 수정, 추가가 필요한 부분이 있으시면 의견 부탁드립니다.

Opera와 Safari용 css hack이 동시 적용이 되는 문제를 김진태님이 지적해 주셨습니다.

Posted on 2006-06-28 Wednesday 13:23:27 by nmind
Tags: CSS
Trackback: http://www.nmindplus.com/2006/06/28/css-hack/trackback/

2010년 1월 15일 금요일

링크 클릭시 위로 안올라가게

클릭시 위로 안올라가게 ....

a onclick="javascript:return false;"

2010년 1월 5일 화요일

height 100% 높이의 레이아웃잡기

오랜만에 Markup을 할 일이 있어 HTML과 CSS를 다루는데 Javascript로 구현 했던 레이아웃을 정말 단순히 HTML과 CSS로 구현 하려니깐 공수가 장난이 아니었다. 하지만 인터넷에 수많은 고수분들이 잘 정리 해준 덕분에 잘 조합해서 구현했다.

사전 조건

DOCTYPE을 사용 할 것

IE, Firefox, Opera, Safari 등 모든 브라우저에서 Standard Mode 혹은 Almost Standard Mode가 되는 조건은 아래 와 같다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위와 같이 HTML Page에 첫번째로 선언하면 기본적인 BoxModel Problem을 해결 할수 있다.

다른 Doctype도 많지만 가장 무난히 호환성을 유지해 나가면서 표준을 지키고 여러 브라우저에서 동일하게 표현 하기에 제일 좋은 Doctype이라 생각이 든다.

첫 번째 조건

높이가 100%인 div 영역

height: 100%;

보통 div element에 위와 속성을 주면 안된다 ㅡㅡㅋ

원인을 찾아 보니깐 저 조건이 되기위해서는 parent element의 height의 영향을 받기 때문이다.

그래서 해결책은 다음과 같다.

html, body {

height: 100%;

}

위와 같이 선언을 해두면 div element의 100% height 속성이 제대로 표현된다.

두 번째 조건

header(헤더) 와 footer(푸터) 영역 잡기

헤더는 상단에 붙어 있어야 하고 푸터는 하단에 붙어 있어야 한다. 가운데 영역만 크기에 따라 늘어나고 줄어든다.

container(컨테이너)가 min-height 100% 속성을 갖게 되면 나머지 헤더와 푸터 영역 만큼 스크롤이 생기는데 이를 막기 위해 마이너스 margin을 사용한다. 헤더와 푸터 영역 만큼 마이너스 margin값을 주면 스크롤은 사라진다. 그리고 헤더는 아래 나온 element들 보다 위에 보여야 되기 때문에 position속성에 relative 값을 할당하고 z-index에 값을 할당한다.

#header {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
width: auto;
}

#container {
min-height: 100%;
margin: -100px 0 -50px;
width: auto;
}
#footer {
height: 50px;
background: #ddd;
}

IE에서는 min-heigth 속성을 지원하지 않는다. 이를 해결하기 위해 height 속성에 100%를 주면 IE는 min-height와 같은 역할을 한다.

/* IE Hack */
*html #container {
height: 100%;
}

세 번째 조건

컨텐츠 영역이 헤더와 푸터에 가려진다. 보통 이런 경우 padding 속성을 활용한다. padding을 이용하면 컨텐츠가 보이는 영역을 재 설정을 할수 있기 때문에 헤더와 푸터 영역만큰 padding 값을 contents-box영역에 준다.

.contents-box {
padding: 100px 0 50px 0;
}

네 번째 조건

가변 2단 구조를 하기 위해서 block element인 div에 float 속성을 줘서 해결한다.

.snb {
background: #00dfee;
float: left;
margin-right: -200px;
width: 200px;
height: 200px;
}

.contents {
margin-left: 200px;
background: #00ffee;
height: 500px;
}

float 속성은 다음에 나오는 모든 element에 계속 영향을 준다. 이를 끊어주는 element를 넣어서 float를 clear한다.

.clear {
clear: both;
display: block;
float: none;
font-size: 0 !important;
height: 0;
line-height: 0 !important;
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
width: 100%;
}

Full Source Code

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="./css/default.css" />
<title>높이 100% 가변 2단 페이지</title>
</head>
<body>
<div id="wrap">

<div id="header">Header</div>


<div id="container">
<div class="contents-box">
<div class="snb">Left</div>
<div class="contents">Right</div>
<div class="clear"></div>
</div>
</div>


<div id="footer">Footer</div>

</div>
</body>
</html>

CSS Code

/**
* @author niceilm
*/

/* Type Selector */
* {
margin: 0;
padding: 0;
font-style: normal;
font-family: 굴림, Gulim, 돋움, Dotum, AppleGothic, Sans-serif;
}

img, fieldset {
border: none;
}

hr, legend {
display：none;
}

li {
list-style: none;
}

a {
}

a:visited {
}

a:hover, a:active, a:focus {
}

html:first-child select {
padding-right: 6px;
height: 20px;
} /* Opera Fix */
option, x:-moz-any-link {
padding-right: 4px;
} /* Firefox Fix */
option, x:-moz-any-link, x:default {
padding-right: 0;
} /* Firefox Fix */

/* Layout Selector */
html, body {
height: 100%;
}

#wrap {
height: 100%;
width: auto;
}

#header {
height: 100px;
background: #ddd;
position: relative;
z-index: 1;
width: auto;
}

#container {
min-height: 100%;
margin: -100px 0 -50px;
width: auto;
}

/* IE Hack */
*html #container {
height: 100%;
}

#footer {
height: 50px;
background: #ddd;
}

.contents-box {
padding: 100px 0 50px 0;
}

.snb {
background: #00dfee;
float: left;
margin-right: -200px;
width: 200px;
height: 200px;
}

.contents {
margin-left: 200px;
background: #00ffee;
height: 500px;
}

.clear {
clear: both;
display: block;
float: none;
font-size: 0 !important;
height: 0;
line-height: 0 !important;
margin: 0 !important;
overflow: hidden;
padding: 0 !important;
width: 100%;
}

참고사이트

http://html.nhndesign.com

참고서적

웹표준 완전정복 세트 (웹 표준 + 방탄웹 + CSS 마스터 전략)

Dan Cederholm,Andy Budd | 박수만 옮김

에이콘 2007.06.18

margin과 padding을 잘 활용하는 것이 관건이였다. BoxModel에 대한 이해가 무엇보다 중요하다.

다들 많은 도움이 되길 바란다.

[출처] 높이(height) 100% 가변 2단 레이아웃 구조 (Web Programmer 2.0) |작성자 치토스

http://cafe.naver.com/webprogrammer2/89

2010년 1월 28일 목요일

문자중복버그 관련

2010년 1월 27일 수요일

ie테스터 다운로드 경로

2010년 1월 21일 목요일

css핵 정리

Netscape 4 제외시키기

Mac IE 4.5, Netscape 4 제외시키기

Mac IE 5 제외시키기

Win IE 4~5 제외시키기

Win IE 4~5, Mac IE 4.5~5 제외시키기

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

Win IE 6 제외시키기

star hack

underscore hack

hash hack

star 7 hack

xmlns hack

:root hack

Tantek box model hack

Win IE 5용 패스필터

Win IE 5.5용 패스필터

Win IE 5-5.5용 패스필터

모던브라우저용 패스필터

IE7에만 적용

IE 6 and below （IE6이하）

IE 7 and below （IE7이하）

IE 7 only （IE7전용）

IE 7 and modern browsers only （IE7과 모던브라우저）

Modern browsers only (not IE 7) （IE7이외의 모던 브라우저）

Recent Opera versions 9 and below （최근의 Opera9이하）Opera 9와 Safari 동시적용

Safari에만 적용Opera 9와 Safari 동시적용

2010년 1월 15일 금요일

링크 클릭시 위로 안올라가게

2010년 1월 5일 화요일

height 100% 높이의 레이아웃잡기

Recent Opera versions 9 and below （최근의 Opera9이하）
Opera 9와 Safari 동시적용

Safari에만 적용
Opera 9와 Safari 동시적용