CSS 브라우저별 지원여부

CSS 2009.09.16 11:45

사용하는 브라우저를 선택한후에

아래에 가서 테스트

http://www.css3.info/selectors-test/


설정

트랙백

댓글

CSS IE6 브라우저 버그 - 더블마진,3픽셀,문자중복,피커부

CSS 2009.09.10 21:52

IE6 브라우저 버그들

IE6는 아직 많은 버그를 가진다.아래가 대표적인사례이며 해결방법을 보자

더블마진 플로트(float) 버그

플로트된 엘리먼트에 마진을 줄경우 두배가 나타난다. 아래와같이줄경우

#box{
	float:left;
	margin-left:20px;
	}

이와같이 할경우 IE6에서는 왼쪽으로 40px의 마진이 나타난다.해결방법으로는 display: inline;을 주면된다

#box{
	float:left;
	margin-left:20px;
        display: inline;/*IE6더블마진 해결*/
	}

텍스트 주변 3픽셀 공간 버그

플로트 지정한 엘리먼트 주변에 텍스트가 있을때 엘리먼트와 접촉부분에 3px의 공간이 생긴다.

해결방법으로는 텍스트에 height:1%;를 주는것이다.

#box{ 
    float:left;
    margin:0;}
p{
  height:1%;
  margin-left:0;
}

문자중복 버그

가끔 문자가 중복되어 박스를 넘어설때가 있다. 원인은 주석때문인데 처음두개까지는 이상없다가 이후 주석을 사용하면 중복되어표시된다.갸령 텍스트가 this is web site 라고 한다면 주석을 3번주면 te처럼 2개의 문자가 중복되고 4개사용하면 4개중복되고 5개 주석사용하면 6개문자가 중복된다.이건 연속해서 주석을 남발했을때 일어나는데 가급적 주석 사용을 줄이자

피커부(peek-a-boo) 버그

플로트가 지정된엘리먼트 플로트가 지정되지않은 엘리먼트 플로트를 해제하는 엘리먼트가 있을때 플롯이 지정되지않은 엘리먼트가 처음에 보이지않는다. 이경우는 엘리먼트에 크기를 지정하거나, line-height, position:relative 를 지정하면 해결된다.

기타 여러버그에 다음에 또소개하겠다. 아래는 보그관련 참조 사이트

IE css bugs


설정

트랙백

댓글

  • eekroql 2009.10.14 13:48 ADDR 수정/삭제 답글

    검색하다가 보게 됐는데요.ㅋ 저 위에 ie버그 그림이 너무 재밌네요.ㅋㅋ ie6.0 ㅠㅠ 뚜쉬..

  • Favicon of http://www.inmydesign.com 꼼순 2011.06.17 15:36 ADDR 수정/삭제 답글

    더블마진땜시 애먹던 기억이 ...
    담아갑니다.

  • Favicon of https://doodoori2.tistory.com 두두리이 2014.02.07 18:19 신고 ADDR 수정/삭제 답글

    ㅠㅠㅠㅠㅠㅠ

CSS 핵(hack)과 필터(filter)

CSS 2009.09.10 20:28

CSS 핵(hack)과 필터(filter)

필터(filter)는 브라우저에 따라서 적용되거나 또는 다른게 표현할수 있도록하는 것이다. 예로 익스플로어의 경우는 몇몇 CSS 속성 선택자를 지원하지않으나 다른 브라우저의 경우는 적용된다.이런점으로 브라우저별로 별도의 특성을 부여하는것이다. 핵은 이런 필터와 흔히 같이생각하는데 다르다.핵(hack)의 의미는 브라우저의 관계없이 원하고자 하는 대로 나올수 있도록 사용하는것이 핵이다.

필터에 대한 정보는 아래 사이트에서 자세히 볼수있다.

필터 : 익스플로어 조건 주석문

익스플로어 (IE)에는 문제가 많다 앞서 여러개의 css예제를 들면서 IE에서는 적용안된다고 한적있듯이 이때 IE의 경우 별도 지정해 줄 수 있다. 조건주석문의 사용이다. 만약 IE6일 경우 다르게 할려면 다음과 같이 한다.

<!-- [ if IE 6 ]

<style type="text/css">
어쩌고 저쩌고.......

</style> -->

자식,속성 선택자 필터

IE6에서는 자시,속성 선택자를 지원하지않는다. 이점을 이용해서 필터로 걸러낼 수 있다.예제를 보자 IE6에서는 투명이미지png-24를 지원하지않는경우를이용해 사용한예다

html>body{
background: url(png24.png) no-reapeat 0 0;
}

위와 같이 하면 IE6에는(IE6가 자식 선택자를 지원하지않으니까) body에 png이미지가 적용되지않는것이다

이번에는 속성 선택자의 예를보자 아이디의 이름이 content인 div엘리먼트에 png이미지를 적용해볼것이다

div[id="content"]{
background: url(png24.png) no-reapeat 0 0;
}

* html

* html의 경우는 IE6이하에서만 적용된다.

*html{ font-size:small;}

이와 같이 하면 IE6이하에서 폰트사이지가 small로 적용될 것이다. 문제는 css표준에 어긋난다는 점이있다.

!important

!important 사용에 대해서는 미리 설명한적있다 다음 링크를 참조하자

CSS 브라우저에 따른 이미지 선택 !important

인접선택자 핵

이핵은 IE6이하에서 특별 스타일을 감추는데 사용된다. 인접형태 선택자를 이용한점이다.잘알다시피 문서구조에서head다음에 html오게된다는점을 이용한 것이다.

head:first-child+body{
	background:url(png24.png) no-repeat 0 0;
}

위에서 first-child는 head다음오는것이므로 html이고 여기에 인접선태자'+'를이용하여 body를 지정하는것이다.하지만 IE6는 인접선택자를 인식못하기에 이스타일이 감쿼지는것이다.

지금까지 필터와 핵의의미 그리고 사용사례들을 찾아봤다. 유효성 검사에 걸리지않기위해서는 가급적 사용하지않는것이 좋다. 다음에는 각종 버그에 대해 알아보겠다


설정

트랙백

댓글

CSS 가로형 내비게이션 float

CSS 2009.09.09 13:18

CSS 가로형 내비게이션

가로형 내비게이션을 만드는 방법은 두가지가 있다 하나는 float를 이용하는 것이고 하나는 display:inline;을 이용하는 것이다,float 부터 보자

배경그림을 다음과 같이 할것이다 단 이미지 크기가 크니 작게 자르고 가로로 반복되도록 할것이다.

아래그림은 작게자른 그림


ul{
	margin:0;
	padding:0;
	list-style-type:none;
	/*여기까지가 초기화*/
	width:520px;/*가로길이는 520px로 정해줬다*/
	background:url(images/mainbg_re.jpg) repeat-x;
	/*위같은 그림을 하기위해 일부분을 잘라 작은파일로 하고 가로로 반복해 줬다*/
	float:left;/*왼족으로 플롯*/
}
ul li{ float:left;/*왼족으로 플롯*/}
ul a{
	display:block;
	padding:0 2em;
	line-height:2.1em;
	text-decoration:none;
	color:#fff;
}

결과는 다음과 같다

주요시 할점은 ul li{} ul{} 여기 모두 플롯을 주엇다는 점이다. 플롯으로 지정하면 기존문서내에서는 차지않는다 따라서 ul li{}에만 주면 납작해지는 결과로 아무것도 보이지않게된다 따라서 먼서 상위 엘레먼트ul{}에 플롯을 주는것이다


설정

트랙백

댓글

CSS 세로형 내비게이션

CSS 2009.09.09 12:40

CSS세로형 내비게이션

앞서 롤오버 효과에 대해 소개했다. 여기참조 http://siana.tistory.com/trackback/54

일단 사용할 이미지는 다음과 같다

이 이미지를 이용해 올렸으때 오른쪽이 나오도록 효과를 적용하고 세로형 내비게이션을 만들어 보자

html은 간편하다


css는 각기 설명을 참조

ul{
	margin:0;
	padding:0;
	list-style-type:none;
/*초기화*/
}
ul li a{
	display:block;
	width:200px;/*이미지크그에 맞게 가로 세로 정한다*/
	height:30px;
	line-height:30px;
	color:#000;/*글자색은 검정*/
	text-decoration:none;
	background: url(images/navigation.jpg) no-repeat 0 0;/*배경이미지를 정해놓고 일반위치에 놓는다*/
	text-indent:50px;
}
ul li a:hover{
	background: url(images/navigation.jpg) no-repeat right 0;
      /*롤오버 효과, 마우스를 올리면 그림이 오른쪽으로 바뀐다*/
	color:#ccc;/*글자는 회색으로*/
}

결과는 다음과 같다.두번째가 올렸을 경우이다

응용편 현재 선택된 페이지 표시

선택된 페이지를 표시한다는것은 위의 내비게이션에서 현재 페이지가 second라면 이때 다르게 표시해주자는것이다. 방법은 그페이지의 body에 아이디를 부여하고 적용하는 법이다.예제를 보자

html의 파일 이름은 second.html으로하고 소스는



#second .n-second{background:  어쩌고저쩌고;}

second.html이라는 페이지에서 바디에 아이디 second를 부여함으로서 #second .n-second 이런식으로 선택해주어 현재페이지에 상황을 적용해 줄수 있는것이다.물론 단순히 .n-second에 적용해도 되지만 일반적으로 코드를 짜다보면은 내비게이션의 클래스라던가 아이디를 다른목적으로 부여하게 될뗴가 많다. 요약하자면 body에 아이디를 주어 현재페이지가 선택되었다는 것을 보여준다느것 다음은 가로형 내비게이션을 보겠다.


설정

트랙백

댓글

CSS 링크 툴팁(tooltip)

CSS 2009.09.06 13:33

CSS를 이용한 툴팁

툴팁은 tittle같이 마우스를 올릴때 나타나는 텍스트상자이다 간단한 예부터 보자

툴팁

위그림과 같이 박스가 나타나는것을 볼 수있다. 그럼 CSS로만 꾸며 보자

CSS 툴팁 이게바로툴팁입니다.

a.box{ position:relative;}
a.box span{ display:none;/*일단 안보이도록*/}
a.box:hover span{ display:block; /*마우스를 올리면 보이도록*/
position:absolute; top:1em; left:2em;/*위치지정*/
/* 박스 꾸며주기*/
border:1px #f99 solid;
background:#CCC;}

위와 같이 나타나게된다 1.안보이도록한다 2. 마우스를 올리면보이도록 3. 그리고 위치 4. 나타나는 박스꾸미기(이건 나름대로 알아서 응용)

 

IE5.x에서는 적용되지않는데 해결방법은 a.box:hover{font-size:100%;}인데 요즘 IE5쓰는사람은 거의 없으니 무시해도 좋을듯하다.



설정

트랙백

댓글

CSS 링크스타일 롤오버

CSS 2009.09.06 13:09

CSS 롤오버

옛날 부터 잘알려진 롤오버효과 링크에 마우스를 가져갔을떄 변화이다.텍스트와배경색을 이용한 간단한것부터 이미지를 이용하는 것까지 알아보자

텍스트 와 배경색이용

롤오버는 마우스를 올렸을때다 따라서 당연히a:hover이사용된다.먼저 간단한예로 텍스트와 배경이미지 변화를보자

a{ background:#fcc; color:#0f0;}
a:hover{background:#0F0; color:#fcc;}

 

위그림과 같이 마우스에 올렸을떄 변화이다

배경이미지이용

a:link, a:visited{
   display:block; width:140px; heigth:30px;
/*이미지크기에 맞추기위해 가로세로 지정*/
   background: url(image.gif) no- reapeat 0 0;}
a:hover{background: url(image_hover.gif) no- reapeat 0 0;}

이경우는 링크일 경우 윗그림(140*30) image.gif 로있고 마우스를 올리경우 image_hover.gif로 바뀌는 것이다. 이미지를 새로 만들고 경로만 바꿔주면 되니 간단하다. 자 그런데 좀더 주목해보자 "이미지를 새로"만든다고 말했듯이 이미지 두개가 필요하게 된다 그러면 만들기도 귀찮고, 또 여러 이미지가 있을경우 페이지 로딩시간도 길어진다.이를 해결할 방법이 픽시(pixy) 방법이다

픽시(pixy) 롤오버

그림을 두개상요안하는 방법은 뭘까? 당연히 하나로 합치는것 그리고 포지션을 바꿔주면 된다.예제를 보자

윗그림은 하나로 합친 모습이다 따라서 크기는 (280*30) 이다

a:link, a:visited{
   display:block; width:140px; heigth:30px;
/*원하는 만큼 나올크기지정 전채이미지가 280*30이니까 반틈이 필요하다. */
   background: url(image.gif) no-reapeat  left top; /*평소는 이미지위치를 왼족으로*/}
a:hover{background: url(image_hover.gif) no-reapeat right top ;/*마우스를 올렸을떄 이미지를 오른쪽으로}

위와같이 한이미지에 적용할수 있다. 참고로 여기서는 그림을 가로로 합쳤지만 세로로합지고 이미지 위치를 평소는 top 마우스를 올렸을떄 bottom 해도 무방하다. 그리고 IE6의경우인데 다른 브라우저는 중복된경우 쓰지 않아도되지만 (예로 no-reapeat) 경우 a{}, a:hover{}에 모두 반드시 써줘야 한다

 

롤오버 :hover인 경우만 아니라 :visited ,:active경우도 위와같이 응용하면된다


설정

트랙백

댓글

CSS 링크 유형별 스타일 지정(css3)

CSS 2009.09.06 12:22

CSS 링크 유형별 스타일 지정

유형별 스타일 지정에 대한 설명은 속성선택자(포스팅참고)가 사용되는 만큼 IE6등 몇몇 브라우저에 적용안된다. 명심하고 보자

유형별로 스타일을 지정해준다 이말은 각각 링크가 나올때마다 변경하기 귀찮으니 유사한 경우 이렇게 해라고 처리해주는것이다.아래예를보자

#example a{
 background:url(test.gif)
}

이와같은 것을 여러번 변경하기 귀찮다. 클래스로 지정해서 비슷한경우를 처리해줘도 되지만 이것도 일일이 클래스 부여라는 문제가있다. 속성선택자를 이용해보자

a[href^="http:"]{
 background:url(test.gif)
}/*일반적으로 http:로 시작하는 외부링크일때 배경이미지를 test.gif로 잡아준다.*/

a[href^="http://www.naver.com"]{
 background:url(naver.gif)
}/*네이버란 사이트링크일떄 배경이미지는 naver.gif*/

a[href^="mailto:"]{
 background:url(mail.gif)
}/*메일과 관련된 링크 일경우 배경이미지를 mail.gif

메신져역시 가능하다

지금바로 메신저로
a[href^="aim:"]{
 background:url(ms.gif)
}/*메신저 관련 링크일경우 ms.gif를 배경이미지로*/

정말 다양하게 쓰이는 점은 특별문서 지정에도 가능하다는점이다 :)가끔 사용자들은 갑자기 링크된곳이 pdf, doc링크로 새창으로 떠버리거나 하면 당황하는경우도 있다 정확한 정보전달은 중요하다. 이를 위해 다음과 같이 사용할 수있다.

a[href$=".pdf"]{
 background:url(imgpdf.gif)
}/*pdf 문서를 보여주는  링크일경우 배경이미지를 imgpdf.gif*/

doc문서경우도 마찬가지다 a[href$=".doc"] 요렇게 해주면된다

마지막으로 RSS의경우또한a[href$=".rss"]

 

이같이 사용하는이유는정보전달의 명확화를 위해서다 갑자기 문서링크가 뜬다던지 메일이 뜬다던지 하면 사용자는 당황할수 밖에 없다.그리고 앞서 말했듯이 단순히 개별 아이디나 클래스로 지정하지않고 속성 선택자를 사용하는이유는 일일이 링크마다 지정하기가 번거로우며 그럴경우 혼돈을 주기때문이다

여전히 아쉬운점은 IE6는 지원하지않는다.


설정

트랙백

댓글

CSS 링크 스타일 기초

CSS 2009.09.06 11:32

CSS 링크 스타일

링크 효과(?) 는 홈페이지를 한번이라도 접해본 분이라면 알거라고 본다. 한창 나모나 기타 고전 유틸리티 쓰던시절에 CSS를 쓰지않았더라도 링크만은 거의 들어갔으니까. 일단 간단한 예제부터 보자

a:link{ text-decoration:none; color:#f33;}/*방문하지 않았을때 */
a:visited{text-decoration:none;color:#f33;}/*방문했을떄*/
a:hover{text-decoration:none;color:#c00;}/*마우스가 위로 올라갔을떄*/
a:active{text-decoration:none;color:#c00;}/*링크가 화성화 즉 클릭했을떄*/

위의 CSS는 한번쯤은 봐왔을 것이다. 정확히 말하면 유사 클래스(:link, :visited, :hover ,:active)를 사용한경우다.

text-decoration에도 여러속성이 있다. 아래를 참조하자

a{ text-decoration:none; }/*일반적으로 밑줄등 아무꾸밈을 주지않는다*/
a{ text-decoration:blink; }/*깜빡인다*/
a{ text-decoration:line-through; }/*텍스트의 가운데선*/
a{ text-decoration:overline; }/*텍스트의 윗줄*/
a{ text-decoration:underline; }/*텍스트의 밑줄*/

 

중요한점은 유사 클래스(:link, :visited, :hover ,:active)의 순서이다. 순서가 바뀌게 되면 적용되지않는다.:hover ,:active :link, :visited, 이럴 경우 :link, :visited의 스타일이 :hover ,:active스타일을 덮어스게되버린다

따라서 유사 클래스(:link, :visited, :hover ,:active)이순서는 반드시기억하자

외우는 TIP:Love:HAte

링크 역시 꾸미기는 마찬가지

다른 CSS꾸미듯이 링크역시 속성,값을 주고 구미기는마찬가지다.예로 아이디 일반링크의 그림 그리고 마우스를 올렸을떄 그림 변화(흔히 말하는 롤오버(이에대해선 다로 포스팅), 색깔변화등 마찬가지다 예제를 보자

예제

예제



#line a{ font-color:#666 ;} /* 아이디 line의 폰트 색깔*/ }
#line a:hover{ font-color:#999 ;} /* 아이디 line의 위에 올렸을떄  폰트 색깔*/ }
#rolling a{backgriund:url(normal.gif) no-repeat 0 0;} /* 아이디 rolling의 평소 이미지*/ }
#rolling a: hover{backgriund:url(effect.gif) no-repeat 0 0;} /* 아이디 rolling의 위에 올렸으대 이미지*/}

이외에도 선을 추가한다던지 배경색을 변화시킨다던지 폰트타입을 바꾼다던지 여러가지로 꾸밀 수 있는 것이다.

css

설정

트랙백

댓글

  • Favicon of http://landcafe.tistory.com Mr.장 2010.04.22 15:30 ADDR 수정/삭제 답글

    고맙습니다.
    "중요한점은 유사 클래스(:link, :visited, :hover ,:active)의 순서이다"
    이것 때문에 어제부터 고민에 고민을 거듭하고 있었는데...
    순서를 바로 잡으니 제가 의도한 데로 작용을 하네요...
    즐거운 하루 되세요.

  • Favicon of https://siana.tistory.com 샷타이거 2010.04.22 16:45 신고 ADDR 수정/삭제 답글

    LoVe:HAte ^^

CSS 브라우저에 따른 이미지 선택 !important

CSS 2009.09.05 13:09

CSS 브라우저에 따른 이미지 선택

익스플로어(IE6)에서는 알파값의 png-24가지원되지않는다 이에 따른 해결 방법으로 일단 적용되는 브라우저는 png파일로 아니면 gif로 하는방법이다. 이떄 사용하는것이 !important 예시는다음과 같다.

#test{
 background: url(주소/mask.png) !important;
 background: url(주소/mask.gif);



설정

트랙백

댓글