블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글


요즘 front-end 개발자들은 CSS를 "어떻게" 쓰는지에 대해 이해할 필요가 없으나 얼마나 "효과적"으로 쓰는지에 대해서 알 필요가 있습니다. 여기서 "효과적"이라는 것은 프로젝트나 환경에 따라 의미하는것이 다릅니다. 만약 여러명의 웹퍼블리셔들과 함께 작업하고 있거나 id나 class없이 기존 시스템을 작업한다거나, 규모가 큰 웹사이트의 속도를 높이기 위한 최적화작업을 위한 협업을 위해 가장 효과적인 방법이 필요할것입니다. 

대부분의 개발자들이 id나 class 선택자에는 친숙하나 조금 더 편안한 작업을 위해 가상선택자(psuedo seletor)에 대해 알아보도록 합니다.


CSS3스펙에는 조금 더 다양한 가상선택자들을 제공하고 있으나 현재 이 글을 작성하고 있는 시점에는 아직 많은 브라우저들이 지원을 하고 있지는 않습니다. 그러나 다양한 자바스크립트 라이브러리나 프레임웍에서 지원하고 있으며 앞으로 브라우저 벤더들도 지원할 예정이니 미리 봐두는것도 좋을 듯 싶습니다. 


CSS2 스펙도 현재 진행중인 상태에서 여러분은 이미 CSS2의 선택자를 미리 사용하고 있는 것처럼 브라우저에서 지원하는 CSS3는 지금도 사용할 수 있겠죠..

만약 지원하지 않는 CSS3의 가상선택자를 굳이(?) 사용하고자 하신다면 다음 라이브러리 ( http://selectivizr.com/ )를 사용하시는것도 좋을듯 싶습니다.



CSS선택자가 뭔지 모르는 분들은 다음글 CSS 선택자 이해하기 글도 한번 참조해 보세요 ^^





가상선택자란

CSS의 가상클래스 혹은 가상선택자 (Pseudo-class)는 id 선택자나 class 선택자와 같이 간단하게 혹은 결합하여 쓸수 없는 요소들을 선택하는 선택자 입니다. 여러분은 마크업 요소의 속성값, 상태, 상대적위치등을 이용하여 각 요소들을 선택할 수 있습니다. 예를 들어 가장 익숙한 가상선택자에는 다음과 같은 것들이 있습니다.


:link

:visited

:hover

:active

:focus


CSS3 스펙에 새롭게 추가된 가상클래스는 DOM Tree상에서의 요소의 위치값, 다른 요소와의 상대적인 위치에 따라 설정되는 "구조적인 선택자"입니다


:root

: only-child

:empty

:nth-child(n)

:nth-last-child(n)

:first-of-type

:last-of-type

: only-of-type

:nth-of-type(n)

:nth-last-of-type(n)

:first-child

:last-child


<참조: CSS Selectors by clearboth>

PatternMeaningS5C8F3.6O11I9bI8I7I6
#idid로 지정된 요소 선택OOOOOOOO
.classclass로 지정된 요소 선택OOOOOOOO
EE 요소를 선택OOOOOOOO
E:link방문하지 않은 E를 선택OOOOOOOO
E:visited방문한 E를 선택OOOOOOOO
E:hover마우스가 올라가 있는 동안 E를 선택OOOOOOOO
E:active마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택OOOOOOOX
E:focusfocus가 머물러 있는 동안 E를 선택OOOOOOXX
E:first-lineE 요소의 첫 번째 라인 선택OOOOOOOX
E:first-letterE 요소의 첫 번째 문자 선택OOOOOOOX
*모든 요소 선택OOOOOOOO
E[foo]‘foo’ 속성이 포함된 E를 선택OOOOOOOX
E[foo="bar"]‘foo’ 속성의 값이 ’bar’와 일치하는 E를 선택OOOOOOOX
E[foo~="bar"]‘foo’ 속성의 값에 ’bar’가 포함되는 E를 선택OOOOOOOX
E[foo|="en"]‘foo’ 속성의 값이 ’en’ 또는 ’en-’ 으로 시작되는  E를 선택OOOOOOOX
E:first-child첫 번째 자식 요소가 E라면 선택OOOOOOOX
E:lang(fr)HTML lang 속성의 값이 ’fr’로 지정된 E를 선택OOOOOOXX
E::beforeE 요소 전에 생성된 요소 선택OOOOOOXX
E::afterE 요소 후에 생성된 요소 선택OOOOOOXX
E>FE 요소의 자식인 F 요소 선택OOOOOOOX
E+FE 요소를 뒤의 F 요소 선택OOOOOOOX
E[foo^="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 시작하는 요소 선택OOOOOOOX
E[foo$="bar"]‘foo’ 속성의 값이 ’bar’로 정확하게 끝나는 요소 선택OOOOOOOX
E[foo*="bar"]‘foo’ 속성의 값에 ’bar’를 포함하는 요소 선택OOOOOOOX
E:root문서의 최상위 루트 요소 선택OOOOOXXX
E:nth-child(n)그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택OOOOOXXX
E:nth-last-child(n)n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택OOOOOXXX
E:nth-of-type(n)E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:nth-last-of-type(n)E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:last-childE 요소 중 마지막 자식이라면 E 선택OOOOOXXX
E:first-of-typeE 요소 중 첫번째 E 선택OOOOOXXX
E:last-of-typeE 요소 중 마지막 E 선택OOOOOXXX
E:only-childE 요소가 유일한 자식이면 선택OOOOOXXX
E:only-of-typeE 요소가 같은 타입이면 선택OOOOOXXX
E:empty텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택OOOOOXXX
E:targetE의 URI의 대상이 되면 선택OOOOOXXX
E:enabled활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:disabled비활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:checked선택된 폼 컨트롤(라디오버튼,체크박스)을 선택OOOOOXXX
E:not(s)s가 아닌 E 요소 선택OOOOOXXX
E~FE 요소가 앞에 존재하면 F를 선택OOOOOOOX





가상선택자 문법

자세히 알아보기 전에 가상선택자를 사용하기 위한 문법들에 대해서 간단히 알아보도록 합시다


가상선택자는 가상클래스 이름앞에 콜론(:)을 사용합니다. 

:pseudo-class {}


만약 특정 요소(SPAN)에 붙이고 싶다면 그 앞에 요소 타입을 적어 주시면 됩니다.

span:pseudo-class {}


또한 id 선택자나 class 선택자에 쓰려면 다음과 같이 작성하면 됩니다.

#id:pseudo-class {}

.class:pseudo-class {}


참~ 쉽죠~잉~





수치값

몇몇 가상선택자는 DOM Tree에서의 특정 위치값을 가진 요소를 선택할 수 있으며, 여러분은 수치값을 해당 요소를 선택할 수 있습니다. 다음과 같이 표현합니다.


:pseudo-class(n) {}


(n)값은 정수형으로 표현되며 선택하고자 하는 요소의 순서입니다. 만약 3번째 값을 선택시에는 다음과 같이 합니다.


:pseudo-class(3) {}



또한 "5번째 요소들 마다" 처럼 공식을 사용할 수 있을때는 다음과 같이 사용합니다.


:pseudo-class(5n) {}


추가적으로 더하기(+), 빼기(-) 값을 이용하여 기준공식을 정할 수 있습니다. 예를 들어 아래와 같이 5n+1 이면 5번째 요소가 첫번째 요소가 된다는 뜻입니다.


:pseudo-class(5n+1) {}


또는 홀수(odd) 짝수(even)와 같이 지정할때는 다음과 같은 표현식이 가능합니다.

 :pseudo-class(odd) {}




가상선택자 사용하기

지금까지 가상선택자 사용하기를 간단하게 알아봤고 좀더 상세하게 css3에 추가된 가상클래스에 대해서 알아보도록 합시다.


:root 

html의 최상위 대상 요소를 지정하는 것으로 IE hack으로 많이 사용했던 부분이 css3 스펙 표준으로 지정되었습니다.

만약 html 요소와 body요소를 다르게 표현할때 최상위 요소인 html을 백그라운드를 틀리게 표현할때 표현합니다.

<!DOCTYPE html>

<head>

    <title>타이틀</title>

</head>

<body>

</body>

</html>


:root{ 

    background-color: rgb(56,41,48); 

body { 

    background-color: rgba(255, 255, 255, .9); 

    margin: 0 auto; 

    min-height: 350px; 

    width: 700px; 

}


body부분의 색깔을 달리 표현하고 width값을 700픽셀로 두었을때 최상위인 html 요소부분의 백그라운드 색깔을 바꾸는 소스입니다.

다음과 같이 표현되겠죠..




:only-child

부모객체 자식요소중에 유일한 요소에만 스타일을 지정할때 쓰는 요소입니다.

예를 들어 아래와 같이 표현할때


위의 붉은색을 처리할때 다음과 같이 마크업을 합니다.

 <h2>

<b>유일한 bold요소</b> 

헤딩요소에 들어가는 텍스트입니다.

</h2>


h2 { 

    background: rgb(255, 255, 255) url(zombies.png) no-repeat 97% 4%; 

    border: 1px solid rgba(125, 104, 99, .3); 

    border-radius: 10px; 

    color: rgb(125,104,99); 

    font: normal 20px Georgia, "Times New Roman", Times, serif; 

    padding: 20px 20px 20px 60px; position: relative; width: 450px; 

b:only-child { 

    background-color: rgb(156,41,48); 

    color: rgb(255,255,255); 

    display: block; 

    font: bold 12px Arial, Helvetica, sans-serif; 

    font-weight: bold; 

    letter-spacing: 1px; padding: 10px; 

    text-align: center; 

    text-transform: uppercase; 

    -moz-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    -moz-transform-origin: 50px 0; 

    -webkit-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    -webkit-transform-origin: 50px 0; 

    -o-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    -o-transform-origin: 50px 0; 

    -ms-transform: translate(-70px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    -ms-transform-origin: 50px 0; 

    transform: translate(-30px) rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0); 

    transform-origin: 50px 0 0; width: 150px; 

}


:empty

해당 요소의 자식요소로 어떠한 요소나 텍스트요소가 없는 빈 요소를 지정할때 사용됩니다. td의 빈 테이블일때 사용해도 좋겠죠...  empty-cells 속성과 같은 용도로 사용할 수 있습니다.


<p></p>


:empty {

    background-color: red;

}


td:empty {

    background-color: red;

}


위의 td 내용은 아래와 같이 쓸수도 있습니다.

td {

    empty-cells: background-color:red;

}



:nth-child(n)

부모객체를 기준으로 상대적으로 자식요소가 n번째 오는 요소를 찾는 방식으로 아래와 같이 댓글을 달때 짝수부분만 처리할때 많이 사용합니다.


<ol>

    <li>

        <p>2013-01-01</p>

        <p><a href="#">T-Dog</a></p>

        <p>dog dog dog dog </p>

    </li>

    <li>

        <p>2013-01-01</p>

        <p><a href="#">R-Cat</a></p>

        <p>cat cat cat cat </p>

    </li>

    <li>

        <p>2013-01-01</p>

        <p><a href="#">S-Pig</a></p>

        <p>pig pig pig pig </p>

    </li>

</ol>


일반 적으로 위 마크업에서 li 부분만 CSS를 입힌다면 다음과 같이 CSS를 작성합니다.

li { 

    

    background-color: rgba(194, 181, 158, .5); 

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(194, 181, 158, .7))
                               , to(rgba(194, 181, 158, 0))); 

    background-image: -moz-linear-gradient(top, rgba(194, 181, 158, .7), rgba(194, 181, 158, 0)); 

    background-image: -o-linear-gradient( rgba(194, 181, 158, .7), rgba(194, 181, 158, 0)); 

    border: 1px solid rgb(194, 181, 158); 

    border-radius: 10px; 

    margin: 15px 0; 

    padding: 25px; 

}


그러면 동일하게 li 부분의 스타일이 적용되지만 li 중에 짝수(even)에 해당하는 줄을 넣고자 한다면 아래와 같이 CSS를 더 추가해 줍니다.

li:nth-child(even){ 

    background-color: rgba(242, 224, 131, .5); 

    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(242, 224, 131, .7))
    , to(rgba(242, 224, 131, 0))); 

    background-image: -moz-linear-gradient(top, rgba(242, 224, 131, .7), rgba(242, 224, 131, 0)); 

    background-image: -o-linear-gradient( rgba(242, 224, 131, .7), rgba(242,224, 131, 0)); 

    border: 1px solid rgb(242, 224, 131); 

 }







:nth-last-child(n)

위의 :nth-child(n)과 마찬가지로 상대적인 순서가 뒤에서 부터 n 번째 인 요소를 찾을때 사용됩니다.

위의 마크업중 li 태그의 자식요소로 여러개의 p 요소가 들어가는데 뒤에서 2번째 p 요소에 스타일을 적용시킬때는 다음과 같이 스타일을 적용합니다.

p:nth-last-child(2) { 

    clear: left; 

    float: left; 

    font-size: 12px; 

    margin-top: 5px; 

    text-align: center; 

    width: 80px; 

}


그럼 아래와 같이 두번째 p 요소에 float:left 속성이 적용되어 다음 p 요소가 위로 와서 붙겠죠... 






:first-of-type

부모요소 안에서 특정한 타입요소(태그) 중 첫번째 요소를 선택하는 가상선택자로 사용됩니다. 위 샘플중 리스트 목록요소의 첫번째 p 태그(타입요소)에 대해서만 스타일을 적용한다면 다음과 같습니다.


p:first-of-type

    border-bottom: 1px solid rgba(56,41,48, .5); 

    float: right; 

    font-weight: bold; 

    padding-bottom: 3px; 

    text-align: right; 

    width: 560px; 

}








:last-of-type


:first-of-type과 마찬가지로 같은 부모요소안의 가장 마지막 타입요소를 선택하는 가상선택자 입니다.

p:last-of-type { 

    font-style: italic; 

    margin: 50px 10px 10px 100px; 

}




:only-of-type

하나의 같은 부모요소안에 단 하나의 타입요소를 선택하는 가상선택자로 반드시 부모객체에 해당 태그(타입요소)가 하나만 존재해야 합니다.


<li>

    <p>2013-01-01</p>

    <p><a href="#"><img src="pig.jpg" alt="pig" /></a></p>

    <p>pig pig pig pig </p>

</li>


img:only-of-type

    background-color: rgb(255, 255,255); 

    border: 1px solid rgba(56,41,48, .5); 

    float: left; 

    padding: 3px; 

}




:nth-of-type(n)


같은 부모 밑에 상대적인 순서로 n 번째 오는 타입요소를 선택합니다.






:nth-last-of-type(n)




:first-child




:last-child






Reference site














'Publisher > CSS' 카테고리의 다른 글

CSS3의 구조적인 가상선택자  (0) 2013.03.21
보석같은 CSS3 함수 calc()  (3) 2013.03.11
Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Post by 넥스트리소프트 데꾸벅(techbug)



들어가기 앞서


보통 웹퍼블리싱을 하다 보면 가변적으로 변하는 페이지나 반응형 웹디자인(responsive webdesign) 시 %(percentage)로 등분할된 width값을 주기가 까다로운 것들이 존재합니다.

정확하게 나누어 떨어질 경우(예: 100% / 4 = 25%)는 크게 문제가 되지 않으나 그렇지 않을 경우(예:100% / 3 = 33.3333..%) 에는 float 속성시 퍼블리셔들의 애를 먹이곤 합니다. 이를 해결하기 위해 몇겹으로 div를 이용하여 둘러싸거나 정확히 픽셀값을 지정하여 계산한다던가, float 대신 absolute positioning으로 문제를 해결합니다.

사실 LESSSASS 같은 경우 이와 같은 것을 처리할때 CSS내의 함수를 이용하여 쉽게 처리할 수 있습니다. 그러나 이러한 함수를 CSS3 Spec 에서도 지원해 줄수 있는 방법이 여럿 있습니다.

아래 calc 함수 뿐만 아니라 column-count, display:table 등과 같은 방법으로 처리할 수 있으나 현재 글을 쓰고 있는 이 시점에서는 column-count보다 calc() 함수를 대부분이 많이 지원합니다.


그럼 CSS3의 보석과 같은(?) calc() 함수에 대해서 알아보도록 합시다.





calc()함수 사용하기


위에서 언급했던것 처럼 calc() 함수는 width, height, font-size, margin, padding 값의 길이를 계산할때나 각도, 수치, 변형(transition), 사운드 재생 횟수, 애니메이션 처리시 사용하는 함수 입니다.  이를 표현하기 위해서는 더하기, 빼기, 곱하기, 나누기등 사칙연산자를 이용하여 표현할 수 있습니다.


Markup

<div class="wrapper">

<div class="col one">A</div>

<div class="col two">B</div>

<div class="col three">C</div>

</div> 


위와 같이 wrapper 클래스로 둘러싸인 3개의  div.col 태그들을 정확히 3등분 하기 위해 다음과 같이 calc()함수를 이용하여 쉽게 처리할 수 있습니다.


CSS

.wrapper .col {  

    width: calc(100% / 3);  

    padding: 0 10px;  


조금 더 호환되게 작성하기 위해서는 vendor-prefix를 이용하여 다음과 같이 표현합니다.

.wrapper .col {

width: -webkit-calc(100% / 3);

width: -moz-calc(100% / 3);

width: calc(100% / 3);

float: left;

height: 100%;

text-align: center;

font-size: 50px;

color: #fff;

line-height: 300%;

font-weight: bold;


오페라 prefix를 사용하지 않은 이유는 글쓰는 현재 오페라 브라우저는 지원하지 않기 때문입니다.

현재는 IE9 이상, webkit 계열, 모질라계열이 calc()함수를 지원합니다.


전체소스

<!doctype html>

<html>

<head>

<title>CSS3 calc() function</title>


<style type="text/css">

.wrapper {

width: 700px;

margin: 50px auto 0;

height: 500px;

}

.col {

width: -webkit-calc(100% / 3);

width: -moz-calc(100% / 3);

width: calc(100% / 3);


float: left;

height: 100%;

text-align: center;

font-size: 50px;

color: #fff;

line-height: 300%;

font-weight: bold;

}

.col.one {

background-color: #3b3140;

}

.col.two {

background-color: #bfb8a3;

}

.col.three {

background-color: #f2e0c9;

}

</style>

</head>

<body>

<div class="wrapper">

<div class="col one">A</div>

<div class="col two">B</div>

<div class="col three">C</div>

</div>

</body>

</html>





전체 너비에서 중간에 60px 만 띄우고 싶을 경우

#element1, #element2 { 

    float: left; 

    width: calc(50% - 30px); 


#element2 { 

    margin-left: 60px; 


각 요소 사이에 글꼴의 4배(4em) 만큼 간격을 두고 싶을때

#element1, #element2 { 

    width: calc(50% - 2em); 


두 요소를 2px의 테두리로 둘러싸고 싶을때

#element1, #element2 { 

    width: calc(50% - 2em - 4px); 

    border: 2px solid #000; 


복잡한 연산공식을 사용하고 싶을때

#element1, #element2 { 

    width: calc((50% + 2em)/2 + 14px); 

}


calc()함수와 같은 CSS3의 min(), max()함수 사용법

#myelement { 

    width: max(300px, 30%, 30em); 

    font-size: min(10px, 0.6em); 

}


쉼표(,)에 의해 구분되는 min, max함수도 flexible한 글꼴 처리나 responsive layout에 유용하게 사용될듯 하나 불행히도 현재는 지원하는 브라우저가 존재하지 않습니다. 차차 되겠죠... ^^*





몇가지 짚어봐야 할것들

calc()함수 사용시 유용한 몇가지 팁에 대해 알아보면..


  • 무엇보다 모든 계산은 왼쪽에서 오른쪽으로 진행되며
  • 사칙연산과 마찬가지로 곱하기, 나누기가 제일 먼저 연산되며
  • calc()함수는 현재 오페라 브라우저와 IE9 미만의 브라우저에서는 지원되지 않으며
  • 호환성을 위해 -moz, -webkit 과 같은 vendor-prefix를 먼저 작성해야 하며
  • 예를 들어 calc(50% - 10px) 과 같이 연산시 다른 단위값들을 사용할 수 있으며   
  • calc(100% - 20px)과 같이  더하기(+), 빼기(-) 연산자의 경우 앞뒤 공백이 반드시 들어가야 하나 곱하기(x), 나누기(/)는 공백이 필요하지 않습니다.



현재 지원 브라우저







결론


CSS3 이전에는 항상 고정된 값을 이용하여 계산을 해 왔으나 calc()함수를 이용하여 좀더 스마트한 방법으로 처리할 수 있수 있어서 개발시 상당히 편리하게 사용될 것입니다. 다만, 지원하지 않는 브라우저에 대해서는 좀더 다양한 방법으로 호환되게 작성해야 한다는 점.....  ( 귀찮니즘 !!! )



참조: 





'Publisher > CSS' 카테고리의 다른 글

CSS3의 구조적인 가상선택자  (0) 2013.03.21
보석같은 CSS3 함수 calc()  (3) 2013.03.11
Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Post by 넥스트리소프트 데꾸벅(techbug)


기존 100% 레이아웃잡을때 중간에 들어가는 컨텐츠를 항상 height:100% 로 표시하여 header와 footer의 높이만큼 margin-top, margin-bottom 처리하는곳에서 착안하여 Flexible한 100% layout 을 표준모드로 구현해 보았다.

지원하는 Doctype
표준모드와 비표준모드에서 모두 테스트해본 결과 잘나온다.. ^^;

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


지원 브라우저
IE 5.5, 6,7,8,9  사파리 5.0 , 오페라 10.60, 파폭3.6 , 크롬5.0 에서 테스트 해본결과 잘나온다





2단 소스

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>데꾸벅 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">

* {
    padding:0;
    margin:0
}

html,body{
height:100%;
}


#header{
position:absolute;
top:0;left:0;
width:100%;
height:70px;
background:gray;
overflow:hidden;
}

#footer {
position:relative;
clear:both;
height:50px;
background:green;
}


#container{
min-height:100%;
margin-left:200px;  /*왼쪽 영역 만큼 뛰기*/
background:blue;
margin-bottom:-50px;    /*푸터height만큼 마진값*/
}

* html #container{height:100%;} /* IE7 hack*/


    /*왼쪽 영역 백그라운드 처리는 body부분에서 처리*/
    body {
        background:yellow;
    }
    #left {
     position:relative;
     width:200px;
     float:left;
     margin-left:-200px;
    }

    #headHeight{height:70px;}   /*컨텐츠영역 상단 보정(header height만큼 고정*/
    #footerHeight{clear:both;height:50px;width:100%;}   /*컨텐츠영역 하단 보정(footer height만큼 고정*/


    #content {
        position:relative;
        z-index:1;
    }

    /* IE3pixel 버그를 위한것 */
    * html #content {
        height:1%;
    }

</style>




</head>
<body>
<!-- header s -->
<div id="header">헤더영역</div>
<!-- header e -->


<!-- 메인 컨텐츠 영역 래퍼 s -->
<div id="container">
    <div id="headHeight"><!-- 상단고정영역 --></div>

    <!-- 왼쪽 s -->
    <div id="left">
        왼쪽<br />
        왼쪽<br />
        왼쪽<br />
    </div>
    <!-- 왼쪽 e -->

    <!-- 중앙 컨텐츠 s -->
    <div id="content">
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
    </div>
    <!-- 중앙 컨텐츠 e -->


    <div id="footerHeight"><!-- 하단고정영역 --></div>
</div>
<!-- 메인 컨텐츠 영역 래퍼 s -->


<!-- footer s -->
<div id="footer">푸터영역</div>
<!-- footer e -->

</body>
</html>





3단소스
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>데꾸벅 테스트</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<style type="text/css">

* {
    padding:0;
    margin:0
}

html,body{
color: #000;
height:100%;
}


#header{
position:absolute;
top:0;left:0;
width:100%;
height:70px;
background:gray;
overflow:hidden;
}

#footer {
position:relative;
clear:both;
height:50px;
background:green;
}


#container{
min-height:100%;
margin-left:200px;  /*왼쪽 영역 만큼 뛰기*/
margin-right:100px;
background:blue;
margin-bottom:-50px;    /*푸터height만큼 마진값*/
}

* html #container{height:100%;} /* IE7 hack*/

    /*왼쪽 영역 백그라운드 처리는 body부분에서 처리*/
    body {
        background:yellow;
    }
    #left {
     position:relative;
     width:200px;
     float:left;
     margin-left:-200px;
    }
    * html #left {margin-right:-3px;padding-bottom:50px}
    * > html #left {padding-bottom:0}


    #right {
     position:relative;
     width:100px;
     float:right;
     margin-right:-100px;
    }


    #headHeight{height:70px;}   /*컨텐츠영역 상단 보정(header height만큼 고정*/
    #footerHeight{clear:both;height:50px;width:100%;}   /*컨텐츠영역 하단 보정(footer height만큼 고정*/


    #content {
        position:relative;
        z-index:1;
    }

    /* IE3pixel 버그를 위한것 */
    * html #content {
        height:1%;
    }


</style>




</head>
<body>
<!-- header s -->
<div id="header">헤더영역</div>
<!-- header e -->


<!-- 메인 컨텐츠 영역 래퍼 s -->
<div id="container">
    <div id="headHeight"><!-- 상단고정영역 --></div>

    <!-- 왼쪽 s -->
    <div id="left">
        왼쪽<br />
        왼쪽<br />
        왼쪽<br />
    </div>
    <!-- 왼쪽 e -->

    <!-- 오른쪽 s -->
    <div id="right">
        오른쪽<br />
        오른쪽<br />
        오른쪽<br />
    </div>
    <!-- 오른쪽 e -->

    <!-- 중앙 컨텐츠 s -->
    <div id="content">
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
        중앙 컨텐츠<br />
    </div>
    <!-- 중앙 컨텐츠 e -->


    <div id="footerHeight"><!-- 하단고정영역 --></div>
</div>
<!-- 메인 컨텐츠 영역 래퍼 s -->


<!-- footer s -->
<div id="footer">푸터영역</div>
<!-- footer e -->

</body>
</html>



소스다운로드


참고적으로 위 방법은 쓸데없는 마크업이 많이 들어가는 이유로 개인적으로는 잘 쓰지 않는 방법입니다.
좀더 깔끔한 소스를 원하신다면..   신현석님의 "CSS절대 위치를 사용한 프레임효과" 를 참조하세요..








'Publisher > CSS' 카테고리의 다른 글

CSS3의 구조적인 가상선택자  (0) 2013.03.21
보석같은 CSS3 함수 calc()  (3) 2013.03.11
Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Post by 넥스트리소프트 데꾸벅(techbug)

간단한 CSS Reset

Publisher/CSS / 2010.05.24 11:49


모든 브라우저마다 CSS가 동일하게 적용되는것은 아니다.
CSS Reset 기능은 이러한 각 브라우저마다 동일한 효과를 주기위해 가장 기본이 되는 CSS를 말한다.
보통 구축하는 웹페이지마다 최초 base.css 나  reset.css 를 두어 전체 웹페이지에 적용되는 CSS를 두기 마련인데 이러한 것이 CSS Reset이라고 보면 된다. 특히 웹퍼블리셔들이 여러 프로젝트를 뛰면서 축적된 경험을 바탕으로 항상 가지고 다니는 CSS들이 대부분 이러한 CSS Reset파일들이나 각 요소들, 예를 들어, 테이블, 탭, 버튼 등 프로젝트 특성을 타지 않는 CSS파일들은 어느 프로젝트나 적용시킬수 있다.
일례로 데꾸벅의 경우는 CSS Reset 파일이 항상 base.css로 만들어 놓고 @import 구문을 이용해서 사용한다. 

참고적으로 많이들 사용하는 CSS Mini Reset 파일들을 공개한다.





이외에 CSS를 인터프리터언어와 같이 프로그래밍언어처럼 사용하는 여러 CSS프레임웍들이 존재하나 아직은 많이 사용되고 있지는 않다.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}




body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; }




/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

* {
text-decoration: none;
font-size: 1em;
outline: none;
padding: 0;
margin: 0;
}
code, kbd, samp, pre, tt, var, textarea, 
input, select, isindex, listing, xmp, plaintext {
white-space: normal;
font-size: 1em;
font: inherit;
}
dfn, i, cite, var, address, em { 
font-style: normal; 
}
th, b, strong, h1, h2, h3, h4, h5, h6 { 
font-weight: normal; 
}
a, img, a img, iframe, form, fieldset, 
abbr, acronym, object, applet, table {
border: none; 
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td, center { 
vertical-align: top;
text-align: left;
}
body { 
background: white; 
line-height: 1; 
color: black; 
}
q { 
quotes: "" ""; 
}
ul, ol, dir, menu { 
list-style: none; 
}
sub, sup { 
vertical-align: baseline; 
}
a { 
color: inherit; 
}
hr { 
display: none; 
}
font { 
color: inherit !important; 
font: inherit !important; 
color: inherit !important; /* editor's note: necessary? */ 
}
marquee {
overflow: inherit !important;
-moz-binding: none;
}
blink { 
text-decoration: none; 
}
nobr { 
white-space: normal; 
}



html, body, ul, ol, li, form, fieldset, legend
{
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

table
{
border-collapse: collapse;
border-spacing: 0;
}

caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}

input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}

abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}




'Publisher > CSS' 카테고리의 다른 글

보석같은 CSS3 함수 calc()  (3) 2013.03.11
Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Firefox에서 링크 점선 없애기  (2) 2010.03.06
Post by 넥스트리소프트 데꾸벅(techbug)

CSS 최적화 기법

Publisher/CSS / 2010.03.08 01:25



웹표준 강의중 CSS 및 HTML마크업에 대해 체계적으로 개발할수 있게 프로세스를 정립하거나 CSS 도 마크업과 마찬가지로 구조적으로 짜야 한다는 얘길 한적이 있다.  사실 데꾸벅 조차도 프로젝트 초기에는 나름 구조적으로 코딩한다고 생각하나 나중에는 엘리먼트에 인라인으로 바로 넣거나 의미없는 태그로 wrapping하기도 한다. 사실 CSS를 코딩하다가 보면 처음에는 구조적으로 개발하다가 나중에는 덕지덕지 붙은 inline-style sheet나 잘못 cascading(혹은 inherited) 된 속성들 때문에 나중에는 더이상 수정할 수 없는 수준이 되기도 한다. 
그래서 아래 몇가지 CSS 를 최적화 할수 있는 방법을 소개한다.





1. CSS 를 구조화하라
마크업에서는 하나의 CSS 로 Linked하고 해당 CSS 에서 구조적으로 분기한다.

마크업
<html>
<link red="stylesheet" type="text/css" href="default.css" title="기본.css" media="all" /> 
</html>

기본.CSS
@charset "UTF-8"
@import url("base.css");    /*CSS Reset & overrides*/
@import url("table.css");    /* table관련속성*/
@import ulr("link.css");      /* 링크관련 속성*/

와 같이 구성하거나 기본 base.css에서 다음과 같이 작성한다. 먼저 
  1. CSS Resets 이나 overrid된 속성들
  2. Link 와 type
  3. Main layout
  4. Sub layout structures
  5. Form 요소
  6. 기타
과 같은 순서대로 구성한다.

/*CSS 리셋 및 오버라이된 속성*/
* {
   margin:0;
   padding:0;
}
img {border:none}


/* 링크 및 타입 */
body { }
a:link, a:active, a:visited, a:focus {}
a:hover {}
h1 {}
h1 a {}
h1 a:hover {}


/* 레이아웃 */
header,article,footer,nav,aside,menu {display:block}
header {}
article {}
footer {}
nav {}



/* 박스모델 */
.box01 {}



/* 폼요소 */
label {}
input {}
fieldset {}
legend {}


/*기타*/
.left {}
.right




2. 저작자 표시,  문서제목, 작성일자 표시
/* =============================
  데꾸벅
  Copryright 2010 Nextree soft
  written for - http://techbug.tistory.com

  - 칼라 견본 -

  13437a - darkblue
  1d74be - mid blue
  elelel - light gray
 ============================= */

다른이에게 자신이 짠 소스음을 알리는 부분이다. 저작권자를 표현하고 연락받을수 잇는 주소를 입력해 템플릿사이트나 기타 다른 사이트에 도용되지 않게 한다.
아래 칼라견본은 후에 CSS Guide문서를 작성할때 참조할수 있도록 미리 문서상단에 표기한다. 후에 칼라값을 찾을때 시간을 절약할 수 있게 한다.


3. 자신만의 CSS 템플릿을 보관하라
한번 구조화된 CSS와 마크업의 경우 나중에 재사용할 수 있다. 데꾸벅의 경우에도 프로젝트 마다 base.css와 테이블.css, 혹은 폼과 관련된 스타일시트들은 재사용하며 점점 업데이트 하여 사용한다.
각 사이트 마다 레이아웃이나 서브레이아웃의 상세 요소들은 스타일이 틀릴수 있으나 기본적은 스타일들은 대부분 비슷하게 적용되므로 보관하는것이 좋다.



여러분은 각 사이트마다 모바일용 레이아웃, 혹은 블러그, 카페, 포탈사이트 레이아웃등 자신만의 레이아웃들을 보관할 수 있다. Coda (OSX 에디터)는 웹사이트 개발할때 미리 이러한 레이아웃을 제공하여 웹사이트 제작 및 소스코드 관리를 편리하게 제공해 준다.





4. 유용한 명명법(Naming Convention)
클래스나 Id를 명명할때는 위치값이나 특정속성값들을 사용하지 않는다. 
예를들면 col-left나 col-right 대신에 col-alpha, col-beta혹은 col01, col02와 같이
명명한다. 왜냐하면 나중에 다른 사이트를 개발할때 col-left가 오른쪽에 위치할때 문제가 된다.
그러므로 특정 디자인에 관련된 용어를 클래스나 id값에 명명하지 않는다.
클래스나 id이름은 어떻게 보이느냐가 아니라 반드시 그 요소가 무슨 기능을 하는지에 따라 명명한다.
예를 들면 .post-title보다는 .post-lagefont라 짓고 .comment-blue 보다는 .comment-beta와 같이 몀명한다.



5. 언더바 보다는 하이픈을 사용
오래된 브라우저는 언더바를 지원하지 않는다. 향후호환성을 위해 #col_alpha보다는 #col-alpha라고 명명한다.



6. DRY(Don't Repeat Yourself)하게 코딩
스타일을 재지정하는것 보다는 그룹핑하여 사용한다.
h1 {
    margn:1px 0 0;
    font:normal 12px gulim;
}
h2 {
    margn:1px 0 0;
    font:normal 12px gulim;
}
과 같이 되어 있으면 아래와 같이 그룹핑한다.
h1, h2 {
    margn:1px 0 0;
    font:normal 12px gulim;
}

또는 단축속성을 사용한다.

h1 {
   margin-top:1px;
   margin-right:0;
   margin-bottom:0;
   margin-left: 1px;
   font-family:gulim;
   font-size:12px;
   font-weight:bold;
}
은 다음과 같이 단축형 속성으로 처리 가능하다.
h1 {
   margin: 1px 0 0 1px; (위>오른쪽>아래쪽>왼쪽, 위>오른쪽|왼쪽>아래쪽, 위|아래>왼쪽|오른쪽등)
   font:bold 12px gulim
}



7. 경량의 CSS 파일
위 속성들 처럼 단축속성들이 몇개 있다. 아래와 같이 사용할 수 있다.
풀속성으로 파일을 크게하지 않고 아래 단축속성들을 사용하여 파일사이즈를 작게한다. 
background:url(이미지주소) 0 0 no-repeat scroll;
font : normal 12px gulim

파일사이즈가 작을수록 좋다. CSS Compressor를 이용하여 자바스크립트처럼 Obfuscate할수 있다.




8 Gecko를 기본으로, 그리고 다음에 IE, Webkit순으로
기본적으로 웹표준을 잘 따르는 브라우저를 기본으로 코딩하여 표준에 충실하며 IE에서 표현되지 않는 부분들은 hack을 사용하여 표현한다.  
왜  먼저 IE를 먼저 맞추면 안되냐고 묻는 개발자들이 있다.   IE에 맞추고 FF에서 틀어진 부분을 맞추려면 맞는 Hack이 없다.. ㅡ.,ㅡ; (대략난감)



9 유효성 검증
W3C의 CSS Validator를 이용하여 표준문법을 사용한다.
요즘은 브라우저에 플러그인 식으로 제공하므로 굳이 웹사이트를 이용하지 않아도 된다.
예를 들면 파이어폭스의 HTML Validator나 Firebug CSS Validator등이 있다.



10. 정돈된 CSS형태로 유지하라
개인적으로 브라우저에 특화된 CSS나 자바스크립트, 서버사이드 코드, IE 조건식등은 별도로 관리하며
기본 CSS에는 hack이 없는 깨끗한 상태로 유지한다. 기본 CSS 는 깨끗하고 유지보수가 편하게 관리한다.



11. 되도록 Hack을 사용하지 말라
10번 항목과 일맥상통하는 얘기이나 되도록 Hack을 사용하지 않는 식으로 코딩한다. 향후 대부분의 브라우저는 표준을 따라간다. 여러분이 짜놓은 CSS 에서 hack을 사용하지 말고 작성한다 어쩔수 없는 경우 사용한다면 별도의 파일로 관리한다.  
개발자이자 유명한 웹표준저자인 Peter Paul Koch는 다음과 같이 말한다.
“The complexity monster has reappeared, right in the center of modern Web development. Nowadays it doesn’t manifest itself as an endlessly nested table, but as an endlessly complicated CSS hack"



12. 문서와 CSS파일을 분리하라
태그에 직접 스타일시트를 작성하는 inline-styleed 표기법 대신에 embeded, imported방식으로 작성하여  구조(HTML)와 표현(CSS)를 분리한다. 기본적으로 브라우저는 URI가 바뀌지 않는 자원에 대해서는 캐시하는 특성이 있으므로 CSS 파일로 별도로 분리한다.  



13. DIV를 남용하지 말라
국내든 해외든, 특히 국내 퍼블리셔분들을 보면 div 태그를 너무 남용한다는 생각이 많이 든다. 마크업은 문서 그대로 구조만을 표현해야 하며 태그는 반드시 태그 그 자체의 의미대로 시맨틱하게 작성한다. HTML5의  <header>,<footer>,<nav>,<article>기타등등과 태그는 이와 같은 의도로 작성되었으며 브라우저자체에서 잘 렌더링할수 있도록, 혹은 추후 좀더 의미를 두기 위해 div태그등을 남용하지 않는다.
이러한 연습을 하기 위해 데꾸벅의 경우 마크업과 CSS 를 동시에 작성하지 않으며 마크업은 개발자에게 프로젝트 표준형식을 정해둔뒤 추후 혼자 CSS 작업을 하는 경우가 많다. (사실 마크업을 작성하는 수고를 덜수 있어서 좋다.)



14. 미디어타입을 이용하라
"인쇄했을 경우를 고려하라" 라는 의미와 같다. 사실 CSS 를 제거했을때도 문서의 흐름과 마크업만으로도 의미 전달을 할 수 있어야 한다. 이런 점에서 국내의 현실이 안타깝기 그지 없다.  














'Publisher > CSS' 카테고리의 다른 글

Height 100% 2~3단 컨텐츠 레이아웃잡기  (18) 2010.07.27
간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Firefox에서 링크 점선 없애기  (2) 2010.03.06
CSS로 만든 3D입체 이미지  (6) 2009.12.31
Post by 넥스트리소프트 데꾸벅(techbug)




CSS(Cascading Style Sheets)는 마크업(HTML)을 자유롭게 표현할 수 있는 웹디자인 언어이다. 현재 CSS Level3는 표준화 작업중이다. 사실 CSS를 공부하려할때 어디서 부터 시작해야 되는지, 혹은 어떻게 이용해야 하는지 궁금해 하는 분들이 많다. CSS3 는 아직 공식적으로 웹표준 권고안이 아니지만 몇몇 브라우저들은 벌써부터 몇가지 기능들을 미리부터 제공하고 있다.특히 jQuery의 DOM Selector를 보면 CSS3 Spec에 명시된 내용을 미리부터 관련 표현들을 사용하고 있다. 그래서 몇가지 CSS3 의 새로운 기능을 미리 살펴보고자 한다. ( 본 포스트는 디자인스팟에서 제공하는 팁을 참조하여 작성하였다. )
 Speaking In Styles : The Fundamentals of CSS for Web Designers에서 언급한 향상된 디자인이라  스타일이 렌더링이 되지 않았을때 대체할수 있도록 비주얼적으로 어필할수 있도록 사용성을 향상시킬수 있는것을 말한다.
각설하고, 몇가지 CSS3 속성으로 아래와 같은 효과들을 얻는 팁을 소개한다.
  • 디자인 향상 예제 : border-radius를 이용하여 박스의 테두리를 둥글게 표현할때 좀더 디자인적으로 어필할 수 있으나 이러한 코너링이 제대로 렌더링 되지 않아도 여전히 해당 웹사이트를 사용할 수 있게 처리한다.

  • 사용성 체감 디자인예제:  백그라운드나 엘리먼트들의 RGBA(Red, Green, Blue, Alpha) 색상값을 이용해 상위 레이어에 위치한 , 즉 z-index값이 높은 요소들을 불투명하게 표시함으로써 아래에 배치된 개체를 미리 볼수 있는 기능을 제공해 줌으로써 사용성을 배가 시킬수 있게 처리한다.

아래 6가지 CSS3 속성값들을 이용하여 지금 바로 여러분의 사이트를 좀더 다양하게 표현해 보자
아래 이미지는 스타일을 적용하기 전의 원본 디자인 표현이다.



최종소스 다운로드 : 지원브라우저 : 사파리4이상, 파이어폭스3.5 이상, 구글크롬1.0 이상




1 투명한 칼라효과
지원브라우저 : 사파리4, 파이어폭스3.0.5, 구글크롬1

RGBA는 텍스트, 백그라운드, 보더, 음영과 관련된 컨트롤들에  특정한 칼라값을 채워넣는 것이다. 보통 색깔값은 #FFFFFF와 같이 16진수형 표현으로 사용되거나 red, blue, navy,orange등과 같이웹에 암묵적으로 명시된 칼라값들을 사용하나 RGB는 0~255까지 범위값으로 표현한다.  추가적으로 A 는 투명도를 표현하는것으로 0(투명transparent)~(불투명:opaque)로 표현한다.
rgba(0-255,0-255,0-255,0-1)


[이미지출처 : 웹디자이너월]

브라우저에 다음과 같이 사용할 수 있다.
.topbox {
    color: rgb(235,235,235);
    color: rgba(255,255,255,0.75);
    background-color: rgb(153,153,153);
    background-color: rgba(0,0,0,0.5);
    border-color: rgb(235,235,235);
    border-color: rgba(255,255,255,0.65);
}

IE에서는 지원되지 않으나 조건(if IE)로 gradient를 구현할수 있다.
<!--[if IE]>
.pretty-box {
    background:transparent;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000050,
          endColorstr=#00000050);
    zoom:1;
}
<![endif]-->





2  둥근 모서리 효과
지원브라우저 : 사파리3, 파이어폭스1, 구글크롬1

테두리의 코더값은 아래와 같이 radius값으로 지정해 줄수 있다.
border-radius:값



브라우저 호환을 위해 다음과 같이 표현한다.
-webkit-border-radius: 10px;   (사파리나 크롬)
-moz-border-radius: 10px;     (파이어폭스)
border-radius: 10px;

각각 지정해 주려면 다음과 같이 하면 된다.

CSS3

Mozilla

WebKit

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-right-radius

border-bottom-right-radius

-moz-border-radius-bottomright

-webkit-border-bottom-right-radius

border-bottom-left-radius

-moz-border-radius-bottomleft

-webkit-border-bottom-left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-left-radius

border-radius

-moz-border-radius

-webkit-border-radius








3. 텍스트 음영(Drop Shadow효과)
지원브라우저 : 사파리3, 파이어폭스3.0.5, 구글크롬1

특정 텍스트 하단에 음영을 추가하기 위해서는 다음과 같이 좌/우측, 위/아래, offset값과, blur효과, 칼라값등과 같이 표현하다.
text-shadow: x y blur color;

[이미지출처 : 웹디자이너월]


음영을 조절하기 위해 다음과 같이 표현한다.
text-shadow: -2px 2px 10px rgba(0,0,0,.5);

여러개 효과를 주려면 아래와같이 콤마(,)로 구현한다.
text-shadow:   
       0 0 10px rgba(0,255,0,.5),
       -10px 5px 4px rgba(0,0,255,.45), 
       15px -4px 3px rgba(255,0,0,.75);





아래 이미지와 같이 표현하기 위해서는
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;  
이 하면 된다.






4. 박스모델의 음영주기
지원브라우저 : 사파리4, 파이어폭스3, 구글크롬1

박스모델에 음영을 주기위해서는 아래와 같이 text-shodow와 같이 표현한다.
box-shadow: x y blur color;

text-shadows와 같이, Mozilla 와 Webkit에서 최종CSS표준에서는 자신만의 문법을 제공한다.
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
box-shadow: 0 0 10px rgb(0,0,0);

멀티음영을 주려면 아래와같이 공백으로 분리하여 컴마(,)로 멀티표현하여 처리한다.
-webkit-box-shadow: 0 0 20px rgb(0,255,0),
        -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);
-moz-box-shadow: 0 0 20px rgb(0,255,0),
         -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);
box-shadow: 0 0 20px rgb(0,255,0),
         -10px 5px 4px rgba(0,0,255,.45), 
         15px -20px 20px rgba(255,0,0,.75);



-moz-box-shadow: 
          -2px -2px 0 #fff,       /*shadow1*/
          2px 2px 0 #bb9595,    /*shadow2*/
          2px 4px 15px rgba(0, 0, 0, .3);  /*shadow3*/





5. 백그라운드이미지 여러개 표현
지원브라우저 : 사파리1.3,  구글크롬1

백그라운드 이미지를 주기위해서 아래 두번째 줄과 같이 콤마(,)로 해당 이미지를 여러개 표현할 수 있다.
background-image: url(astro-127531.png);
background-image: url(astro-127531.png),url(Hubble-112993.png);
background-repeat: no-repeat;
background-position: bottom left;
background-position: bottom left, top right;

background: url(첫번째이미지) 0 0 no-repeat, url(두번째이미지) 10 -20px repeat-x;





6. 박스모델 회전시키기
지원브라우저 : 사파리4, 파이어폭스3.5 구글크롬1

아직 CSS3 표준스펙에는 포함되어 있지 않지만 Webkit과 Mozilla에서는 박스모델 회전을 시키는 속성값이 있다.
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);


rotate속성을 지원하지 않는 브라우저에서는 다음과 같이 표현된다.






정리하자면

위의 css3 의 4가지 룰에 대해서 정리하자면 다음과 같다.(순서주의) 
아래소스는 모든 브라우저에서 호환가능하도록 cross-browsing처리하기 위한 표현들이다 css3에 대해 간단하게 처리하기 위해서는 다음과 같이 css reset 기능들을 가지고 있으면 개발시 유용할것 같다.

/*둥근모서리 표현*/
.box_round {
     -moz-border-radius: 12px; /* FF1+ */
     -webkit-border-radius: 12px; /* Saf3+, Chrome */
      border-radius: 12px; /* Opera 10.5, IE 9 */
}


/*박스음영*/
.box_shadow {
  -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
  box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
  filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */
}

/*백그라운드 그라디언트*/
.box_gradient {
  background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444)
                             ,color-stop(1, #999999)); /* Saf4+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
         /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
        /* IE8 */
}


/*투명효과*/
.box_rgba {
  background-color: #B4B490;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490');
         /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490'
                 ,endColorstr='#99B4B490')"; /* IE8 */
}


/*박스모델 회전*/
.box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+
  -o-transform: rotate(7.5deg);  /* Opera 10.5
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome
   filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7
   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8
}


/*웹폰트*/
@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot');  /* IE6+ */
  src: local('?'),
        url('myfont.woff') format('woff'),  /* FF3.6 */
        url('myfont.ttf') format('truetype');  /* Saf3+,Chrome,Opera10+ */
}


CSS3 향후지원할 BOX Model 에 대한 흥미로운 포스트가 있어 소개합니다.

'Publisher > CSS' 카테고리의 다른 글

간단한 CSS Reset  (4) 2010.05.24
CSS 최적화 기법  (7) 2010.03.08
지금 바로 쓸수 있는 CSS3  (0) 2010.03.07
Firefox에서 링크 점선 없애기  (2) 2010.03.06
CSS로 만든 3D입체 이미지  (6) 2009.12.31
CSS 이용한 Text를 이미지로 대체하기  (3) 2009.11.16
Post by 넥스트리소프트 데꾸벅(techbug)



웹표준 강의 중에 어떤 수강생분이 질문했던 부분인데  파이어폭스에서  <a>태그에 텍스트를 이미지로 대체할때 (CSS를 이용한 Text 대체하기 포스트 참조) 점선으로 테두리가 생기는 것을 확인했다.

예전에는 IE에서 이미지에 이러한 점선이 생기면 아래와 같이 작업하였었는데

<img src="이미지주소" onfocus="this.blur()" />

사실 이와같은 방법은 데꾸벅은 즐겨쓰지 않았지만.. (접근성을 고려할때 링크는 링크임을 표시해줘야 한다고 생각해서... )


Firefox에서 CSS를 이용하여 text-indent값을 주었을때 점선이 생기면 다음과 같이 아주 지저분하게 점선이 생긴다. 그래서 overflow로 잘라줌으로써 이와 같은 현상을 해결할 수 있다.

 
div h1 a {
         display:block;
         width:300px;
         height:100px;
         background:url(이미지주소) 0 0 no-repeat;
        text-indent:-2000px;
        overflow:hidden;
        outline:none;
}

 Firefox의 경우 text-indent까지 링크영역으로 인식해서 점선이 해당 indent영역까지 처리됨으로 overflow:hidden 을 더 추가해 줌으로써 이와 같은 현상을 깔끔히 해결할 수 있다. 밑의 outline:none; 은 a 링크의 점선라인을 삭제해주는 것으로 추가적으로 적어주긴 했으나 overflow만으로도 충분히 가능하다.

<a>링크의 점선까지 없애주기 위해서는 다음과 같은 속성으로 전역에 공통으로 선언함으로써 전체 링크의 점선을 모두 처리할 수 있다.   이 속성은 IE, FF등 모든 브라우저에 적용할 수 있다.
a {
        outline:none;
}


샘플파일 


사실 이러한 점선은 웹접근성에 비춰볼때 상당히 중요한 요소이다. CSS-TRICKS에서도 데꾸벅과 같은 생각을 가지고 있었는데 나보다 한술 더 떠서 이 블로그에서는 마우스를 올렸을때 포커스 했을때 CSS를 이용해서 좀더 꾸밀때를 설명해 주고 있다.

a:hover, a:active, a:focus { // styling for any way a link is about to be used }






Post by 넥스트리소프트 데꾸벅(techbug)


오늘자 ajaxian을 보다가 굉장한 CSS 애니메이션을 보게되서 함 분석해 봅니다.
이미지 3개와 background-position프로퍼티와 :hover 가상클래스를 사용하여 3D입체 이미지를 구현했군요~
고생꽤나했을듯~ ㅠ.,ㅠ;   이런거 보면 대단하다 보다는 고생이 먼저 떠오르는 이유는 뭘까요?


사용한 이미지

사용된소스 : 원본



 
 
 
 
 
 
 
 
 
 
 

	
  
원본소스다운로드 : 





이미지 하나에 background-position을 이용한 애니메이션

위 영역에 마우스를 올려보세요 ^^ 
이전에 포스팅한 CSS Sprites에서도 언급한 CSS background-position을 이용한 애니메이션입니다


사용된 이미지

소스






Post by 넥스트리소프트 데꾸벅(techbug)


요즘 부쩍 CSS에 관련된 글들을 많이 포스팅하고 있는데 데꾸벅이 가장 많이 사용하며, 실수도 하고 혹은 후배들에게 알려주고 싶은 부분이기 때문이다.  중간중간 CSS-TRICK의 글을 인용했음을 미리 알린다.


CSS Zengarden 사이트에 들어가서 스타일시트를 없앤후 보면 아래 그림과 같이 텍스트로만 나오는것을 볼 수 있을 것이다. 단순 텍스트가 어떻게 이미지로 대체되는지 그 방법에 대해서 알아보고 대부분의 CSS 관련 책이나 가이드에 제시해 주던 text-indent를 이용한 이미지 대체 문제를 좀더 심도있게 다루어 보고자 한다.


CSS기능을 끈상태의 CSSZengarden
마크업의 모든 제목이 <h>태그를 이용하여 구조적으로 만들어져 있다.


CSS기능을 사용한 CSSZengarden 




<h>태그의 텍스트를 이미지를 사용하여 좀더 비주얼하게 표현하였다.







1. 많이 쓰는 고전적인 방법 

HTML:
<h1 class="main-logo">Techbug</h1>

CSS:
h1.main-logo {
width: 350px; height: 75px;
background: url(images/header-image.jpg);
text-indent: -9999px;
}

이와 같이 사용하였을때 CSS기능을 끈다면 원래 텍스트파일인 Techbug가 나온다. 물론 이 방법이 나쁘지는 않지만 대부분의 사용자들은 CSS기능을 끄더라고 이미지를 보고 싶어한다는  문제점이 있다.
그래서 아래와 같은 새로운 방법에 대해서 생각해 본다.

2. 새로운 방법

HTML:
<h1 class="main-logo">
    <a href="#"><img src="images/header-image.jpg" alt="Techbug" /></a>
</h1>

CSS:
h1.main-logo {
width: 350px; height: 75px;
background: url(images/header-image.jpg);
text-indent: -9999px;
}

CSS는 위와 같은 방법으로 코딩되어 있으나 마크업자체는 변경되었다. 이와같은 방법으로 처리했을 경우 CSS기능을 끄더라도 이미지는 출력되며, 이미지 출력기능을 끄더라도 이미지의 대체텍스트인 "Techbug"를 그대로 사용자에게 보여줄수 있는 장점이 있다.
물론 위와 같이 <h1>태글를 사용하여 검색엔진에 의해 접근이 가능하게 하고 싶으나 대부분 개발자들은 로고를 이미지로 만들고 싶어하므로 위와 같은 방법으로 두가지 조건을 모두 만족 시킬수 있다.


위의 두 사이트를 참고로 CSS 기능을 껐을때와 Image기능을 껐을때의 기능을 중심으로 9가지 방법들을 소개하고자 한다. [테스트 페이지]  몇가지 방법은 오래된 방법임을 밝히며 FF2, Opera9, Safari3, IE6에서 테스트 하였다.



Technique #1

<h1 id="technique-one">
	<span>CSS-Tricks</span>
</h1>
h1#technique-one {
	width: 250px;
	height: 25px;
	background-image: url(logo.gif);
}
h3#technique-one span {
	display: none;
}


참조:
이기술은 FIR(Fahrmer Image Replacement)를 참조하였으며 텍스트를 둘러싼 <Span>태그를 숨기고 부모객체인 <H1>태그에 백그라운드 이미지를 대체하였다. 이 방법은 텍스트를 이미지로 잘 대체하였으나 검색로봇에는 별로 좋지 않은 방법이다.



Technique #2

<h1 class="technique-two">
	CSS-Tricks
</h1>
h1.technique-two {
	width: 2350px; height: 75px;
	background: url("images/header-image.jpg") top right;
	margin: 0 0 0 -2000px;
}


참조:
Radu Darvas가 사용한 방법으로 복잡한 레이아웃에는 문제를 보이는 경우가 발생할수 있으며 다른 기술들 보다 그렇게  효과적이지는 않다.

 


Technique #3

<h1 class="technique-three">
	CSS-Tricks
</h1>
h1.technique-three {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}


참조:
Mike Rundle의 방법으로 요즘 가장 많이 사용되는 방법이기도 하다.  가장 간단한 방법이기도 하며 들여쓰기에 음수값을 집어넣어 텍스트를 왼쪽으로 밀어버린 방법이나 가끔 몇몇 브라우저에서는 원치않는 스크롤바가 생기기도 한다.



Technique #4

<h1 class="technique-four">
	<a href="#">
		<img src="images/header-image.jpg" alt="CSS-Tricks" />
	</a>
</h1>
h1.technique-four {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
	text-indent: -9999px;
}


참조:
처음 이 방법을 제안한 사람은 알수 없으나 Phark이 사용했던 방법의 한가지이다. 또한 데꾸벅이 자주가는 Smashing Margazine의 헤더파일에 적용된 것이기도 하다. 텍스트노드 속성을 가진 <a>태그를 이용한 방법으로 위 3번째 방법과 동일하게 사용하였다. CSS기능을 끄고 Image기능을 켰을때 이미지가 보이기는 하나 문제는 웹호환성(Section508 :장애우를 위한 웹접근성 지침) 에 위배되는 경우가 생긴다. ALT의 텍스트가 일반적인 웹텍스트이긴 하나 검색엔진에는 효과적이지 못하다. 


 

Technique #5

<h1 class="technique-five">
	<img src="images/blank.gif" alt="CSS-Tricks" />
	<span>CSS-Tricks</span>
</h1>
h1.technique-five {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg");
}
h1.technique-five span {
	display: none;
}


참조:
Radu Darvas가 사용했던 방법으로 1x1픽셀짜리 투명이미지를 마크업에 사용하였다. 이미지를 껐을때도 ALT속성으로 대체 텍스트를 제공할수 있다. 매우 효과적인 방법으기는 하나 CSS와 Image 모두 껐을 경우 텍스트가 두개 나타나는 효과가 발생한다.

 



Technique #6

<h1 class="technique-six">
	CSS-Tricks
</h1>
h1.technique-six {
	width: 350px;
	padding: 75px 0 0 0;
	height: 0;
	background: url("images/header-image.jpg") no-repeat;
	overflow: hidden;
}

참조:
Seamus Leahy와 Stuart Langridge가 사용했던 방법으로 padding값을 이용하여 높이를 지정하였으며 overflow속성을 이용해 스크롤링 버그를 해결하였다.  웹접근성관련하여 효과적인 방법이나 overflow:hidden으로 인해서 이미지가 커질경우 숨겨지는 버그가 있으며 옛날버전의 IE에서는 box Model Hack을 써야 하는 경우가 생긴다.

 


Technique #7

<h1 class="technique-seven">
	<span>CSS-Tricks</span>
</h1>
h1.technique-seven {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg") no-repeat;
}
h1.technique-seven span {
       display: block;
	width: 0;
      height: 0;
      overflow: hidden;
}


참조:
Leon Dwyer가 사용했던 방법으로 이 기술은 overflow:hidden으로 width:0, height:0인 블럭-레벨 요소를 집어넣었다. 텍스트를 숨겨서 로고까지 읽던 스크린리더 사용자에게는 좋은 방법이다. (데꾸벅 주: 기본적으로 웹표준 유효성 체크를 통과하기 위해 항상 대체텍스트를 써야하는 이유로 기존 스크린 리더들은 쓰잘데기 없는 것 까지 읽어서 오히려 방해가 되는 경우가 있다.) 

 

Technique #8

<h1 class="technique-eight">
	<span></span>CSS-Tricks
</h1>
h1.technique-eight {
	width: 350px; height: 75px;
	position: relative;
}
h1.technique-eight span {
	background: url("images/header-image.jpg");
	position: absolute;
	width: 100%;
	height: 100%;
}


참조:
Levin Alexander가 사용한 방법으로 텍스트를 밀어넣는 대신 텍스트를 절대값위치로 항상 위쪽에 표시해야 하며 이미지를 투명한 이미지를 사용했을 경우 문제가 발생할 수 있다.



Technique #9

<h1 class="technique-nine">
	CSS-Tricks
</h1>
h1.technique-nine {
	width: 350px; height: 75px;
	background: url("images/header-image.jpg") no-repeat;
	font-size: 1px;
	color: white;
}


참조:
Russ Weakley가 사용했던 방법으로 다른 방법과 달리 텍스트를 숨기는것이 아니라 아예 1pix로 작게 만들어서 사용한다. 단점으로는 글자색과 배경색이 다르면 아주 작게라도 나타난다는 문제점이 있다.



사족

위 방법들이 정답이라는 뜻이 아니라 이 보다 더 좋은 방법도 있으리라 본다. 사실 국내의 웹표준을 지킨 다수의 웹사이트에서는 이보다 더 좋은 방법을 사용하고 있으리라 생각한다. 데꾸벅이 사용하는 방법들도 몇가지 있지만 같은 표현을 위해 얼마나 많은 방법들이 존재하는지 알 수 있었다.  


Post by 넥스트리소프트 데꾸벅(techbug)



웹표준으로 개발하다보면 가장 큰 문제가 HTML을 구조적으로 표현하지 못하는데 있다.
표준코딩이라하여 CSS,HTML,Javascript를 모두 분리하고 레이아웃을 table태그를 사용하지 않으면 된다고만 생각하는데서 이러한 구조적인 문제가 발생한다.
예전 전통적인 방식(table을 이용하여 레이아웃을 잡던 시절)과 마찬가지로 이제는 DIV를 난발하여 화면을 만들고 가장 기본적인 문단 나누기 또한 빈 DIV태그를 이용하여 사용하고 있는 데꾸벅 포함 여러 웹퍼블리셔들에게는 가장 난감한 부분이 float속성이 될것이다. 
사실 아래 본문에도 나오겠지만 대부분의 웹퍼블리셔(여기서는 코더 혹은 에디터를 말한다.)는 가장 레이아웃을 잘 잡기 위한 방법으로 position 속성을 많이 사용한다.  absolute, relative, top, right, bottom,left 만 있으면 모든 레이아웃을 잡을수 있다. 그러나 이러한 방식의 CSS는 나중에  유지보수하기가 더 힘들어 진다. (데꾸벅의 경험상... )
국내사이트와 해외사이트의  HTML구조만 비교하더라고 국내 웹퍼블리셔들이 무엇을 잘못하고 있는지 확연히 들어나는 현실이다.
디자인적인 측면과 기능적인 측면, 유지보수성이 모두 다 충족하는 퍼블리싱이 되길 바라면서 이글을 번역, 포스팅한다. 






"Float" 은
CSS 위치관련 속성이다. 목적과 기원을 이해하기 위해서는 인쇄디자인을 살펴보면 된다.  인쇄레이아웃에서 이미지는 아래 그림과 같이 텍스트에 둘러 쌓이게 되며 이것을  일반적으로 text wrap" 이라고 말한다.



이러한 텍스트랩(Text lab)은 아래 그림과 같이 박스와 같은 영역으로 페이지레이아웃의 텍스트 흐름(flow)속에 있거나 혹은 별도로 위치하게 된다.  웹디자인도 이와 유사하다.

 

웹디자인에서 CSS float 속성은 인쇄레이아웃에서 이미지와 같이 해당 이미지 근처의 텍스트 흐름에 영향을 받게된다.  Float된 요소는 (floated elements) 웹페이지의 flow의 한 부분으로 남으며 이것은 고정된 위치값을 가진 요소들과 명백히 다르다.  위치가 고정된 페이지요소는 웹페이지내의 흐름속에서 제외되며 다른 요소에도 영향을 끼치지 못한다.

float속성은 다음과 같이 사용한다.

#sidebar {
   float: right;
}

float속성은 4개의 유효값을 가지고 있다  좌우방향을 표시하는 left와 right, 기본디폴트값인 none, 그리고 부모요소로 부터 상속(cascading)된 inherit속성이 그것이다.

Float속성은 어디에 사용되는가?


float속성값은 이미지를 둘러싸고 있는 텍스트에 사용되나 위 그림과 같이 전체 웹레이아웃을 생성하는데 사용되기도 한다.
또한 아래와 같이 전체레이아웃과 유사한 작은 구성 영역에도 사용된다.
아래의 예는 아바타 이미지와 해당 계정의 내용을 표시한것으로 float 속성을 사용한것이다.
아바타 이미지가 커지더라도 적절한 간격을 유지하며 포지셔닝된다.

그러나 위와 같이 같은 레이아웃이라도 상대적인 위치나 절대적위치값을 이용하여 사용한다면 아래 그림과 같이 이미지사이즈가 변할경우 레이아웃 자체가 깨질수 있다.
데꾸벅 주: 대부분의 경우 디자이너나 에디터의 경우 relative, absolute로 작업하는 경향이 많다. 이는 한국형 웹페이지(?)만의 특징이라고 볼수도 있겠지만 가장 화면레이아웃을 쉽고 빠르게 셋팅할수 있기 때문이다. 이러할 경우 웹표준으로 작업하더라도 그만큼의 효과를 얻지 못한다는 것이다.




흐름제거 (Clearing the Float)
float의 속성의 자매속성으로 clear가 있다.  HTML 요소는 float과 같이 흐름속성이 있다면 이와 같은 흐름을 제거하는 속성(clear)를 가지고 있다.

위그림에서 보는바와 같이   사이드바(sidebar)는 메인컨텐츠(Main content)영역보다 짧게 오른쪽으로 float이 되어있으며 footer영역이 main content영역만큼을 채우려고 올라와 있다. 이와같은 문제를 해결하려면 아래와 같이 footer에 clear 속성으로 흐름을 제어하면 된다.

#footer {
   clear: both;
}

 clear속성은 4가지 속성값을 가지고 있는데 보통 양쪽흐름을 끊는 "Both"속성을 많이 사용한다. 왼쪽과 오른쪽 흐름을 끊는 "left", "right" 와  기본값으로 "none", 부모객체의 속성값을 상속(cascading)받는 "inherit" 이 있다.


겹침문제

float속성을 사용해서 작업하다보면 곤혹스런경우를 많이 당하게 되는데 아래 그림과 같이 float속성을 가진 객체의 부모객체밖으로 삐져나오는 경우가 있다.


흐름을 끊는 기법(Techniques for clearing Floats)

clear기법을 사용하는 방법으로 아래와 같이 여러가지 방법이 사용되고 있으나 상황에 맞게 적절하게 사용하여야 한다.

  • 빈div 태그에 직접 clear속성 넣기 : <div style="clear:both;"></div>를 이용하는 것으로 <br />과 같은 효과를 준다. 그러나 구조적인 마크업의 흐름을 깨게 되는 경우가 생기므로 사용에 주의하여야 한다.

  • overflow 방법 : 부모객체에 overflow속성을 넣는 방법으로 float되는 객체의 부모객체의 넓이를 조정하여 흐름을 제어하는 방법이다. 그러나 이 방법은 원하지 않는 스크롤바를 생성할 수도 있다.
    (참조사이트 : wystan's tables)

  • 가장쉬운 clear 방법 : 가상선택자(pseduo selector ) :after를 이용하여 float을 clear할수 있다. float되는 객체의 부모객체에 다음과 같이 clearfix 클래스를 줌으로써 간단하게 해결할 수 있으며 오래된 브라우저도 수용할 수 있다.
    (참조사이트:positioniseverything)
  • .clearfix:after {
       content: ".";
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }


    •  위 그림과 같이 서로 다른 float 속성이 먹은 객체들이 나열되어 있을때 그룹화하여 흐름을 제어하고 싶다면 아래 그림과 같이 그룹화된 부모객체에 위의 방법을 쓸 수 있다.



Float속성의 문제점
Float속성을 쓰면 화면이 깨지기 쉽다. IE6은 float과 관련된 버그를 가지고 있다. 점점더 많은 디자이너들이 IE6지원을 줄여가고 있는 시점이나 그렇다고 포기할만한 시점도 아니다.
  • 밀려내려감(Pushdown) : 아래 그림과 같이 밀려내려가는 증상은 float된 객체가 영역보다 클때 일어난다. 이럴 경우는 overflow:hidden을 사용하여 처리할수 있다.

  • 더블마진버그(Double Margin Bug) : IE6에서 inline-level element가 같은 방향으로 float된 경우 일어난다. 이럴경우는 해당 요소를 display:inline을 써서 inline-level요소로 만들어 주면된다.
    (참조사이트 : positioniseverything.net,  신현석씨 블로그)

  • 3픽셀 밀림 버그(3px Jog) :
    E 6에서 CSS 먹일때 Float + Margin or Padding 값을 동시에 먹이면. Margin,Padding 값이 두배가 되는
    버그가 있는데 
    이상하게도 float된 요소의 다음에 오는 텍스트에 오는 버그로 이럴경우 text의 width와 height값을 주면 해결된다.
    (참조사이트 :  강짱's blog)

  • IE7의 Bottom Margin 버그 : float된 부모객체 안의 자식객체에 나타나는 버그로 부모객체에 의해 자식객체의 bottom-margin을 무시하게 되는 버그로써 부모객체에 bottom padding을 줘서 해결해야 한다. 
    (참조사이트 : maratz.com)
  

그외 참조

원본출처 : CSS-TRICK





Post by 넥스트리소프트 데꾸벅(techbug)


얼마전 "화면 가득 BG이미지 사용 웹디자인" 에서 소개했던 전체 백그라운드 사용기법에 대해서 소개하고자 한다.

가끔씩 좀더 디자인적인 요소가 가미된 웹페이지를 만드려다 보면 페이지전체에 백그라운드 이미지가 들어가야 하는 경우가 있다. 기존에는 이미지 용량을 최적화하기 위해 전체 플래쉬를 사용한다든가, 이미지를 디더링하여 용량을 감소시키는 경우가 있었다.
"백그라운드 이미지 사이즈 변경하기"의 개념과 유사하게 백그라운드 자체를 CSS만으로, 혹은 자바스크립트를 이용하여 풀스크린으로 띄우는 방법을 소개한다.

최종소스


원본출처  : 
CSS-Tricks


 

본 기술과 이미지는 GOTOCHINACSS-TRICKS 에서 가져온것임을 밝히며 다음과 같은 기능들로 구성된다.

  • 여백없이 이미지로 전체페이지 채우기
  • 필요한만큼 이미지 크기 정하기
  • 이미지를 페이지중간에 정렬하기
  • 스크롤바 생기지 않게하기
  • 크로스브라우저 호환
  • 플래쉬같은 장난질 하지 않기(? ) : Isn't some fancy shenanigans like flash

이러한 기능요구사항은 매우 까다로운 주문사항이다. 무엇보다 이미지 사이즈를 변경하는 것은 전통적인 CSS background-image속성에 위배되기 때문이다.



Technique #1

인라인 이미지(Inline image)는 아래와 같이 페이지내에서 특정한 목적에 따라 어떠한 요소로 둘러싸여 있다.
( 데꾸벅 주 :
   이미지는 원래 속성은 block-level요소가 아니라 span태그와 같이 inline-level요소 이므로 크기를 고정시키기 위해 block-level요소 태그들에 의해 둘러쌓여있다.

마크업

<div id="bg">
    <div>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img src="images/bg.jpg" alt=""/>
                </td>

            </tr>
        </table>
    </div>
</div>

CSS :
 
* {
    margin: 0;
    padding: 0;
}
html, body, #bg, #bg table, #bg td {
    height:100%;     width:100%;     overflow:hidden;
}

#bg {

    position: fixed;
}

#bg div {

    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
}

#bg td {

    text-align:center;
    vertical-align:middle;
}

#bg img {

    margin:0 auto;
    min-height:50%; //safari4.0과 chrome에서는 min-height가 잡히지 않음
    min-width:50%;
}

 
위 소스는 마크업과 CSS를 적게 사용하여 개발하나 아주 좋은 기법이다. 
html과 body태그에 overflow:hidden값을 넣는게 우려되기는 하나 해당 페이지 스크롤바를 없애기 위한 방법이다.

아래와 같이 overflow:auto 컨텐츠 영역에 overflow:auto로 자동 스크롤바를 생기게 할 수 있다.
 
 <div id="cont">
    <div class="box">
          <!-- 내용 들어가는곳-->
    </div>
</div>

#cont {
    position:absolute;
    top:0;left:0;
    z-index:70;
    overflow:auto;
}
.box {
    margin: 0 auto;
    width: 400px;
    padding: 50px;
    background: white;
    padding-bottom:100px;
    font: 14px/2.2 Georgia, Serif;
}
 

IE6에서는 잘 동작하지 않으므로 MooTools 자바스크립트 라이브러리가 필요하다. (소스확인)


Technique #2

이번 기법은 위에서와 달리 별도의 "bg"클래스를 가진 div태그와 같은 wrapper 마크업이나 자바스크립트가 필요없이 CSS만으로 가능하다.

img.bg {
 /* Set rules to fill background */
 min-height: 100%;
 min-width: 1024px;

 /* Set up proportionate scaling */
 width: 100%;
 height: auto;

 /* Set up positioning */
 position: fixed;
 top: 0;
 left: 0;
}

@media screen and (max-width: 1024px){
 img.bg {
  left: 50%;
  margin-left: -512px; }
}

div#content {
 /* This is the only important rule */
 /* We need our content to show up on top of the background */
 position: relative;

 /* These have no effect on the functionality */
 width: 500px;
 margin: 0 auto;
 background: #fff;
 padding: 20px;
 font-family: helvetica, arial, sans-serif;
 font-size: 10pt;
 line-height: 16pt;
 -moz-box-shadow: #000 4px 4px 10px;
 -webkit-box-shadow: #000 4px 4px 10px;
}

body {
 /* These rules have no effect on the functionality */
 /* They are for styling only */
 margin: 0;
 padding: 20px 0 0 0;
}






 

Post by 넥스트리소프트 데꾸벅(techbug)


그룹웨어형식의 웹애플리케이션을 퍼블리싱하다가 보면 테이블들을 많이 사용하는데
코딩할때 마다 테이블들의 스타일시트들을 생성해줘야 할때가 있다.
귀찮아서 만들어놓은 CSS를 사용하고는 하는데 혹시나 괜찮은 CSS를 찾아보다가 CSS TABLE GALLERY를 찾았다.

CSS하나 하나 다운로드 받아 처리하기 귀찮아서 정리해서 올려본다.

[마크업]

<table summary="This table lists all the flights by XYZ Air leaving London today.">
  <caption>Flight Schedule</caption>
  <thead>
    <tr>
       <th id="fn" scope="col">Flight Number:</th>
      <th id="fr" scope="col">From:</th>
      <th id="to" scope="col">To:</th>
      <th id="dp" scope="col">Departure:</th>
      <th id="ar" scope="col">Arrival:</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="5">Total: 3 flights</td>
    </tr>
  </tfoot>
  <tbody>
  <tr>
    <th scope="row">BA 3451</th>
    <td>Heathrow</td>
    <td>Nuremberg</td>
    <td>19:20</td>
    <td>19:50</td>
  </tr>
  <tr class="odd">
    <th scope="row">BA 1254</th>
    <td>Luton</td>
    <td>Alicante</td>
    <td>19:40</td>
    <td>20:50</td>
  </tr>
  <tr>
    <th scope="row">LH 331</th>
    <td>Heathrow</td>
    <td>Hamburg</td>
    <td>20:00</td>
    <td>20:20</td>
  </tr>
  </tbody>
</table>




[CSS]

table {border-collapse: collapse;border: 1px solid #38160C;font: normal 11px verdana, arial, helvetica, sans-serif;color: #F6ECF0;background: #641B35;}
caption {text-align: left;font: normal 11px verdana, arial, helvetica, sans-serif;background: transparent;}
td, th {border: 1px dashed #B85A7C;padding: .8em;color: #F6ECF0;}
thead th, tfoot th {font: bold 11px verdana, arial, helvetica, sans-serif;border: 1px solid #A85070;;text-align: left;background: #38160C;color: #F6ECF0;padding-top:6px;}
tbody td a {background: transparent;text-decoration: none;color: #F6ECF0;}
tbody td a:hover {background: transparent;color: #FFFFFF;}
tbody th a {font: normal 11px verdana, arial, helvetica, sans-serif;background: transparent;text-decoration: none;font-weight:normal;color: #F6ECF0;}
tbody th a:hover {background: transparent;color: #FFFFFF;}
tbody th, tbody td {vertical-align: top;text-align: left;}
tfoot td {border: 1px solid #38160C;background: #38160C;padding-top:6px;}
.odd {background: #7B2342;}
tbody tr:hover {background: #51152A;}
tbody tr:hover th,
tbody tr.odd:hover th { background: #51152A;}

 

소스다운로드 :




















Table designs
Design Name Author Country Comment Download
Total 98 designs
TagBox TagBox Deutschland Table design based on the fresh TagBox style. Download
Maniac Merchants Marten Willberg Germany A Georgia headline with a green-blue body. Download
Acuity Design Style Acuity Internet Marketing Brazil Black Style, with smooth grey and green elements. Download
Aqua Matthias Richter Germany Have fun! Download
Smooth Taste Thomas Opp Germany Smooth style with my favourite colours. Enjoy! Download
Stainless Steel Stenli Bulagaria Use cellspacing="1" for better feel. Download
Sky is no heaven Michael Schmieding Germany My new Design colors. Download
Foggy Country Straussennest South Africa Foggy Country - Green Trees planted on brown sugared ground. Download
Blue gradient Mihalcea Romeo Romania Nice table design based on a very subtile blue gradient. Download
desert Marc Bodon Germany brown, red, grey and white... simply smooth ;-) Download
orange and grey Christoph Plessner Germany Download
serif my love Frank Schnappenberger Germany A clean and simple table design with serif font Download
REDandBLACK Martin Paffenholz Germany Style like our website. Best viewed in Mozilla Firefox. Download
UV Green Kunimichi Takahashi USA Let me know what you think. Download
BakeSale admin Matti Putkonen Finland Table model used in BakeSale shopping cart admin interface. Download
The OC Rodolfo Marin Chile Table based in the color table from one of my latest design, overclockers.cl Download
blue like ice Erik Ginnerskov Denmark Nice and clean. No fancy stuff. Download
Dark Night Michael Schmieding germany That's my design with my favorite colors. I hope you like it. Download
mediagroove mayumi takami Japan i like this type of design. Download
chives' tables chives Germany Clean and spicy design from chives-team Download
table red-white Jens Germany Inspired by the original 'Assischale' and dedicated to 'Kollesche' ;-) Best wishes to everybody! Download
Candy Stefan Bihl Germany Hi, I hope this CSS File is not to pink ;-) Regards Stefan Download
Simple and Clean Leandro Pessoa Brazil My model! ;) Download
Blue Newton de Góes Horta Brasil Minimalist design in blue Download
Infected Infected-FX Mexico Minimal and clean design for next tutorial, mooflex inspired colors, icons by fam fam fam. ^^ Download
Azulon Joorge Epunan Chile Just playing with the ccode. I like the blue, and how it combines with other elements Looks pretty nice. Download
Casablanca Rodrigo Castilho Galvao Ferreira Brazil Inspired by Casablanca Web Standards Template existing in Template Design Competition, WESTCIV. Download
Salmon Ricardo Aroca Chile Orange colors. Style inspired in salmon, the main product of my city, Puerto Montt. Some advanced selectors (hover, after, before) and properties (content). Best viewed in modern browsers. Download
Clear Blue Robert Hartl Germany It's a clear but individual white-blue design with subdued hover-effects for modern browsers. Download
Blix Theme Newton de G—es Horta Brasil Table design based on Sebastian Schmieg's Blix Theme for Wordpress 2.0. Icons by Kevin Potts Download
iCubed Lar Veale Ireland Nice clean table with small gradient images. Row hover in Firefox gives another gradient effect. Download
Jacob Emiliano ESB Brasil Web Usability useit.com: usable information technology Download
Go Jamaica Hern‡n Argentina Jamaica, A Good place! Download
Poetry For Browser Monika Thon-Soun Austria Code is Poetry. Internet Explorer you can't show us arrows and hover effects. You can't show us correct borders. It looks like that you can't understand poetry. Don't be jealous of browsers. It is simply:Learn to be a browser and everything is going to be alright. Download
Red Body Jarek Karczewski Poland Red Body is my first style. I hope you like it :-) I'll try to do another style, maybe ... Enjoy Download
Like Adwords Cleiton Francisco Brazil A simple style like Google Adwords list. Download
Pretty In Pink Viktor Persson Sweden Smooth, pretty and pink. Best viewed in Mozilla Firefox. Download
Two times table Stu Nicholls England A very basic table for all Internet Explorer users but something VERY different for understanding browsers :o Hope you like it. Download
Brazilian taste DvD Franco Brazil Pleasant design with happy colours, readable data and a bonus: a little effect playing with the caption text and image background. Download
bluish Stefan Herzig Germany Blue style with a hint of Amiga Download
Second Revolution Henrique Costa Pereira Brazil Flexible glass button style. Feel free to resize the font! Download
BluInBlock JuanMa Argentina It is a good blue style that contains block properties with any background images. I hope you like it :) Download
pop.pop.star Timo Wirth Germany Inspired by Andy Warhol, this bold and simple table emphasizes the table rows (rather than the columns). Download
Tabular tables Stu Nicholls England A simple table using a little border art for mouseovers. Download
The Sky Is Blue Eric Pui Malaysia The sky is blue... Download
Sea Glass Stephanie Leary US Subtle and green. Download
Orange Brownie Cody Lindley US Nice idea, the site that is. Download
Blaugrana Choan C. G‡lvez Spain Alternating row and link colors. Enhancements (hover, image replacement) for modern browsers. Download
Soft Table Newton de G—es Horta Brazil A simple table style with the use of the soft brown color Download
Innocent Flowers Christine Kirchmeier Germany Simple, friendly design in blue Download
Shades of Blue Velizar Garvalov Bulgaria Simple blue design with some :hover effects Download
Gmail scrolling Mauricio Samy Silva Brazil A look-alike theme with fixed height for the table container DIV and vertical scroll bar. There is an :hover behavior on caption background image. Download
Shades of Purple Demetrius Francis Bahamas Basic styles with a purple scheme. Download
Turkish Delight Paul Brownsmith UK Raspberry shades with chocolate rollovers for compliant browsers. Clean, clear and choco-sweet. Download
Grayed Out Terence Ordona US A simple look and feel that improves with the quality of your browser's CSS support. Shows possible use of a la Excel styling. Download
Nimbupani Divya Singapore A minimalist style that explores the relative weights of the lines that differentiates one element from the other. The same design elements has also been used on this site http://jflickruploader.blogspot.com Download
Trekkish Violets Patryk Zawadzki Poland Well... a bit trekkish I guess (but not really inspired by holodeck). Blues and violets here and there. Looks best when viewed in Firefox. Download
Golden style Michael Horn Germany Golden coloured style, with hover effects in modern browsers (Firefox, Opera). Download
Oranges In The Sky Krasimir Makaveev Bulgaria Just a simple table design with orange and blue links! Download
Rockstar Jens Wedin Sweden Simple classic design with advanced stuff for standard compliant browsers. Download
Greyscale Two Plus Four UK Minimalist design in black, white and shades of grey. Resizeable text and CCS2 enhancements for those that know. Download
Coffee with milk Roger Johansson Sweden Clean, no-nonsense design with a latte-ish colour palette. Some extra design features in modern browsers. Download
Clean and crisp Mats Lindblad Sweden Clean and Crips table style, with a little MS feel to it. Although it works best in Firefox. Download
classic mitch uk no comment, just some damn good table styling! Download
Winter Blues Gunta Klavina Latvia Blue pastel coloured style. Download
Green Life Vitaly Friedman Germany A Fresh, Warm and Readable Table Download
Breathing Space Kevin Leitch UK Lots of padding on the default design. Contains enhancments for selector-enabled browsers. Download
Warm Fall Mya Leigh USA Warm fall colors with easy to read text. Download
iTunes John Lawrence UK Table design based on Apple's iTunes software. Download
MintGreen Taimar Teetlok Estonia Warm and friendly mint-green presentation. Download
Heaven is Closer Niko Neugebauer Portugal A simple style that improves with the quality of your browser's CSS support Download
Table on a Table C Montoya USA Pastel blue and yellow, and a nifty background. Behaves decently in IE. Images are table_oil2.jpg and table_oil3.jpg. Download
Cygenta Tim Baker Canada Monospaced with a painful palette. Download
Spread Firefox! Thierry Koblentz USA Best experience in Firefox! ;-) Download
Table Sprite Parker Torrence USA This design employs a single graphic for both the caption title and the background effects. Download
Muted Dan Champion Scotland Grey and beige, clean and simple. Minimal use of CSS2 fancy bits like :after and tr:hover. Download
Chocolate Phil Thompson UK A simple table style with a sexy chocolate-inspired colour scheme. Lots of room for the table data to breathe. Download
Smilies AndrŽ Mendona Brasil Green table with alpha transparency, lots of smilies and shadows. Download
Inset cells Mauricio Samy Silva Brazil A table with inset cells and the use of adjacent-sibling selectors and border-spacing propertie for compliants browsers. Download
Shaded Colour Erik A. Drabl¿s Norway Dark table design using alternating link colors. Download
Revolu‹o Etc Henrique Costa Pereira Brazil Nice warm coloured table with small, but resizable, text. Download
Lab Report Louise Dade UK Clear, simple and informative data display for a scientific paper. Includes a background image, download icon and a "faux alpha transparency" rollover effect (a tiny tile with every other pixel transparent). Fully commented CSS file. Download
MSIE hover Mirek Kom‡rek Czech Republic Really simple one with hover in MSIE (using JavaScript via expression()) Download
Kashual Khaki Shane Shepherd USA You'll look great in Kashual Khaki! Be ready for fun when your lookin' snappy in khaki! Download
Orange You Glad Randy Peterman USA There is an image required for standards compliant browsers to get a 'bonus' download arrow for the download links. Download
Matrix? Christian Roque G. Peru using black and green, remove the red and bigger letter. Download
10 minutes Richard Grevers New Zealand Minimalist, using separated borders and spacing with a four-colour pallette. Download
Spearmint tints Ben Boyle AUS Simple coloured style with a minty theme. Download
Table structure Ben Boyle AUS Contrasts headings and cells, displays heading scope and summary (where supported). Download
City Mouse Janie Hadsel USA A tab with image text is placed in the caption background; caption text is hidden, but remains accessible to non-graphical browsers and screen readers. A simple table background image is dressed up by layering a transparent gif placed in the odd table rows. Download
Alpha transparency Mauricio Samy Silva Brazil Simulating alpha transparency with CSS Download
Grey suits you sir Stuart Colville UK Smart grey table with hover effect. Download
Cusco Sky Braulio AndrŽs Soncco Pimentel Perœ Soft blues like Cusco Sky Download
Roll Over from Down Unda Jason M Roehrig AUS A very sophisticated table showing many rollover effects on CSS2-abled browsers Download
Blue On Blue Glenn Slaven AUS A serif font table with a bit of colour to define the cells. Download
Chrome de la chrome Chris Heilmann UK Using gradient backgrounds to create chrome effects Download
Minimalist Chris Heilmann UK As minimal as you can get, only lines around the body cells Download
Plain old table Chris Heilmann UK Tried and true, boring grey table with a one pixel line Download
Post by 넥스트리소프트 데꾸벅(techbug)

CSS Hack in IE8

Publisher/CSS / 2009.04.27 11:20


유입경로를 분석하다가 IE8용 CSS Hack을 찾는 분들이 많아 정리합니다.
지난 포스트(CSS Hack을 정리)에 이어 Full-Browsing을 위해서 아래와 같이 몇가지만 알면 CSS-Hack에 대한 모든것을 아실수 있을 겁니다. 

/***** 선택자 Hacks ******/
/* IE 6 및 하위버전 */
* html #uno  { color: red }
 
/* IE 7 및 하위버전 */
*:first-child+html #dos { color: red }
 
/* IE 7 및 최신브라우저(IE8포함) */
html>body #tres { color: red }
 
/* 최신브라우저 (IE7제외, IE8포함) */
html>/**/body #cuatro { color: red }
 
/* Opera 9.27 및 하위버전 */
html:first-child #cinco { color: red }
 
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
 
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
 
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho {  color: red }
 
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #diez  { background: #FFDECE; border: 2px solid #ff0000  }
}
 
 
/***** 어튜리브트 Hacks ******/
 
/* ie6 및 하위버전 */
#once { _color:blue }
 
/* ie7 및 하위버전 */
#doce { *color: blue } /* or #color:blue */
 


참조 : Paul Irish's Blog

모든 IE에 똑같이 적용할때 추천하는 방법으로는 body에 클래스 선택자를 이용해서 다음과 같이 작성할수 있다.

<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if !IE]>--> <body> <!--<![endif]-->

다음과 같이 .ie처럼 만들어 준다. 위의 예제파일을 참조하세요 

div.foo { color: inherit;}
.ie div.foo { color: #ff8000; }

 

dbloom blog를 보면 다음과 같이 IE8에서의 CSS-Hack을 추천한다.

IE8 표준모드 Only:
.test { color /*\**/: blue\9 }

IE8을 포함한 IE버전
.test { color: blue\9 }








 

Post by 넥스트리소프트 데꾸벅(techbug)

요즘 구글크롬으로 이제껏 작업했던 사이트의 버그 잡는 쏠쏠한(ㅠ.,ㅠ)재미에 푹 빠졌다.
google chrome의 경우 webkit엔진을 사용하므로 safari 와 비슷하게 작동해서 불행히도 css버그도 같이 공유하고 잇따.

Safari , google chrome, FF2 의 경우 Fieldset 버그가 존재한다.
이럴경우에는 다음과 같이 처리하면 된다.

fieldset:after {content: “.”; display: block; height: 0; clear: both; } 

위의 내용중 :after는 CSS2 Spec에 나온것이므로 기술하지 않은 곳에서는 다음과 같이 작업한다.
fieldset {display: block; height: 0; clear: both; }


<=== height:0, clear:both 가 중요하다.. ㅡ.,ㅡ;


사족을 붙이자면 실제 작업을 하다가 보면 DTD버전이 4.01 이냐 xhtml1.0 이냐에 따라 이놈의 fieldset은 유난히 많이 틀리다는것을 알수 있다.

html4.01일 경우에는 <fieldset>밑에  첫번째 자식노드로 <legend>가 반드시 필요하다
html4.01에서 "반드시" 라는 것이 존재하는것이 이놈 뿐이다... 대부분 W3C 권고안이기 때문에 생략이 가능하나 이놈만은 생략하면 validtion부분에서 빨간색으로 표현된다... ㅡ.,ㅡ;

그러나 xhtml1.0에서는 생략이 가능하다....


Post by 넥스트리소프트 데꾸벅(techbug)

보통 IE5,5와 IE6에서의 투명 PNG이미지 처리시 CSS와 스크립트로 다음과 같이 처리하는데
.png24 {
    tmp:expression(setPNG24(this));
}


/* png24 이미지 파일을 웹에서 투명하게 변경하는 스크립트 */
function setPNG24(obj) {
    obj.width=obj.height=1;
    obj.className=obj.className.replace(/\bPNG24\b/i,'');
    obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image');"
    obj.src='';
    return '';
}

보통 위와 같이 처리하면 onmouseover='this.src=this.src.replace(".gif","_over.gif")'와 같이 처리하는데..

이미지 토글처리를 하다가 setPNG로 filter:progid:DXImageTransform 필터가 적용되면 mouseover 이벤트로 이미지 변경이 되지 않았다.
IE7, IE6에서 필터가 적용되면  onclick, onmouseover이던지 이벤트는 모두 먹어버리고 심지어 <a>태그도 먹질 않는다. 다른 브라우저에서는 아예 filter 속성이 먹질 않아서 정상적으로 작동한다.

실제 이미지의 소스를 filter속에서 정의하기 때문에 그렇다.

이럴경우 다음과 같이 처리한다. [레퍼런스 : http://homepage.ntlworld.com/bobosola/png_mouseover.htm]
<!--[if lt IE 7]>
<script type="text/javascript">
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 and 6.
{
   if ((version >= 5.5) && (document.body.filters))
   {
       for(var i=0; i<document.images.length; i++)
       {
          var img = document.images[i]
          var imgName = img.src.toUpperCase()
          if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
          {
             var imgID = (img.id) ? "id='" + img.id + "' " : ""
             var imgClass = (img.className) ? "class='" + img.className + "' " : ""
             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
             var imgStyle = "display:inline-block;" + img.style.cssText
             var imgAttribs = img.attributes;
             for (var j=0; j<imgAttribs.length; j++)
             {
                var imgAttrib = imgAttribs[j];
                if (imgAttrib.nodeName == "align")
                {
                   if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
                   if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
                   break
                }
             }
             var strNewHTML = "<span " + imgID + imgClass + imgTitle
             strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
             strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
             strNewHTML += "(src='" + img.src + "', sizingMethod='scale');\""
             strNewHTML += " onmouseover=\"PNGswap('" + img.id + "');\" onmouseout=\"PNGswap('" + img.id +"');\""
             strNewHTML += "></span>"
             img.outerHTML = strNewHTML
             i = i-1
          }
       }
   }
}
window.attachEvent("onload", correctPNG);
function PNGswap(myID)
{
   var strOver  = "_on"
   var strOff = "_off"
   var oSpan = document.getElementById(myID)
   var currentAlphaImg = oSpan.filters(0).src
   if (currentAlphaImg.indexOf(strOver) != -1)
      oSpan.filters(0).src = currentAlphaImg.replace(strOver,strOff)
   else
      oSpan.filters(0).src = currentAlphaImg.replace(strOff,strOver)
}

</script>
<![endif]-->

<script language="JavaScript" type="text/javascript">
<!--
function imgSwap(oImg)
{
   var strOver  = "_on"    // image to be used with mouse over
   var strOff = "_off"     // normal image
   var strImg = oImg.src
   if (strImg.indexOf(strOver) != -1)
      oImg.src = strImg.replace(strOver,strOff)
   else
      oImg.src = strImg.replace(strOff,strOver)
}
//-->
</script>

</head>
<body>

<div class="plainbackground">
<img id="img100" src="logo_off.png" width="100" height="100" alt="a PNG logo"
onmouseover="imgSwap(this)" onmouseout="imgSwap(this)"/>
</div>

<div class="plainbackground">
<img id="img200" src="logo2_off.png" width="100" height="100" alt="another PNG logo"
onmouseover="imgSwap(this)" onmouseout="imgSwap(this)"/>

</div>


결국 필터의 src 소스를 변경시켜야 하다는 얘기닷.. ㅡ.,ㅡ;
다들 건승하길... 저 같으면 그냥 gif 깨끗하게 쓰겠어요.. ㅠ.,ㅠ;



Post by 넥스트리소프트 데꾸벅(techbug)

IE7 의 렌더링 방식이 IE6과 다르다.
CSS testing of Selector and Pseudo selectors 를 보면 IE7 은 FF 에 더 가까와 지고 있다.
그래서 바야흐로 브라우저 3개를 켜고 코딩을 해야하는 시대가 온 것이다.

이를 해결하기 위한 방법 중 하나는 Selector Hack 을 이용하는 것이다.
.context_bar_form_field
{
height: 15px; // 모든 브라우저
#height: 15px; // IE 전용
_height: 21px; // IE6.0 과 이전버젼용
}
우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다.
다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.
 
또 다른 방법은,
.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }

이렇게 하는 방법도있다. 맨 아래줄은 파이어폭스와 IE7만 적용된다.

한가지 주의할 점은

body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
속성 키워드 자체가 다른 것이 많다. 주의 할 것!
위에서 처럼 속성값 자체가 다른 경우가 있다. 그러니 안된다고 hack 만 쳐다보고 있으면 밤세야 한다.

내가 보기에 가장 좋은 방법은 Conditional Comments 를 사용하는 것이다.
복잡하게 한 파일에 구질구질 작성하지 말고 파일을 분리해 버리는 것이다.

참고 :http://webborg.blogspot.com/2007/01/css-compatibility-ie6-ie7-firefox-and.html

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iehacks.css">
<![endif]-->
<body>
  <div class="watermark">....</div>...


이렇게 분리해서 각개격파하는 것이 좋을 듯 싶다.






IE 용인 Expression을 사용하여 본다면

a { expression(어쩌구 문법) }

이렇게 해서 a 태그 즉, 링크에 걸린 항목에 대하여 Expression은 적용 시킬 수 있을것입니다.

그럼 예로.. 링크주소중에 pdf 라은 확장자가 있다면 링크 앞에 자동으로 PDF 아이콘을 띄워봅시다.


a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}

이건 IE 용입니다. Firefox에선 이렇게 하시면 됩니다.


a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}

음... 불여시에서 사용하는게 훨씬 간편하네요 @@;;

[href $='.pdf'] 이 구문에서 $는 .pdf로 끝나는 것을 의미합니다.

.pdf로 시작하는 것을 찾으려면 $대신에 ^을 사용하시면 됩니다.

[href ^='.pdf']가 되겠죠. 그냥 포함 되어 있는지를 찾는 거라면 *을 사용하시면 됩니다.


<style>
a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}

a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}
</style>

<a href="test.pdf">test1</a><br/>
<a href="test.gif">test2</a>










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 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

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이 잘 정리되어 있으므로 참고하시길…


IE7에만 적용

IE7를 포함한 모든 IE에만 적용하는 방법은

IE7을 포함한 모던브라우저에 적용(IE6이하를 제외)

IE7을 제외한 모던브라우저에만 적용


위의 내용은 썬샤인님의 블로그에서 꿈쳐온 것입니다..

나이가 먹다보니 가끔 치매끼가 있어서.. 잊어버릴것 같아 살포시... ^^


Post by 넥스트리소프트 데꾸벅(techbug)

웹표준코딩에 익숙한 사용자라면 csszengarden 사이트를 잘 알것이다.
csszengarden 사이트를 보면 동일한 마크업(HTML)에 CSS만으로 페이지 자체가 완전히 틀린 분위기를 연출하게 만들며 환상적인 폰트사용을 볼수 있다.

@font-face에 대해서 말해보려 한다.
아래 이미지는 강의자료로 사용했던 내용이다.
사용자 삽입 이미지

웹폰트 제공사이트 : http://www.fontembedding.com/fonts-and-the-law/

오늘 Ajaxian에 올라온 포스트중에 재미있는 글이 있어 링크를 따라 가다 보니 다음과 같은 글이 있어 포스팅해 본다.
원문 : http://www.alistapart.com/articles/cssatten


웹폰트 사용할시
@font-face { font-family: "Kimberley"; src: url(http://www.princexml.com/fonts/larabie/ » kimberle.ttf) format("truetype"); }
h1 { font-family: "Kimberley", sans-serif }

@font-face와 같이 길게 쓰지 않고 간략한 표현
@import url(http://www.princexml.com/fonts/ » larabie/index.css) all;
h1 { font-family: Goodfish, serif }

W3에서 권장하는 방법
h1 { font-family: "Trebuchet MS", sans-serif; letter-spacing: 0.1em; }
@media all and (web-fonts: "truetype") {
   h1 { font-family: "Primer Apples", sans-serif; letter-spacing: 0.2em; }
}

사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).


사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).

사용자 삽입 이미지

Screenshot of web page using real TrueType fonts. PDF (via Prince). HTML (via your browser).






데꾸벅폰트 다운로드






HTML5에서 Canvas 관련 요약정리 CheatSheet










Post by 넥스트리소프트 데꾸벅(techbug)

CSS 2.0 표준 Reference!

CSS 2.0 Reference

Values 읽는 법 : 기울임체(이텔릭) 적용된 값들은 속성 값을 총칭하는 이름으로서 실제의 값 또는 수치로 변환하여 적용하여야 한다. (예:color→#CCCCCC, length→5px)

Background

Property Description Values NN IE W3C
background A shorthand property for setting all background properties in one declaration background-color
background-image
background-repeat
background-attachment
background-position
6.0 4.0 CSS1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page scroll
fixed
6.0 4.0 CSS1
background-color Sets the background color of an element color-rgb
color-hex
color-name
transparent
4.0 4.0 CSS1
background-image Sets an image as the background url
none
4.0 4.0 CSS1
background-position Sets the starting position of a background image top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
6.0 4.0 CSS1
background-repeat Sets if/how a background image will be repeated repeat
repeat-x
repeat-y
no-repeat
4.0 4.0 CSS1

Border

Property Description Values NN IE W3C
border A shorthand property for setting all of the properties for the four borders in one declaration border-width
border-style
border-color
4.0 4.0 CSS1
border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width
border-style
border-color
6.0 4.0 CSS1
border-bottom-color Sets the color of the bottom border border-color 6.0 4.0 CSS2
border-bottom-style Sets the style of the bottom border border-style 6.0 4.0 CSS2
border-bottom-width Sets the width of the bottom border thin
medium
thick
length
4.0 4.0 CSS1
border-color Sets the color of the four borders, can have from one to four colors color 6.0 4.0 CSS1
border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-width
border-style
border-color
6.0 4.0 CSS1
border-left-color Sets the color of the left border border-color 6.0 4.0 CSS2
border-left-style Sets the style of the left border border-style 6.0 4.0 CSS2
border-left-width Sets the width of the left border thin
medium
thick
length
4.0 4.0 CSS1
border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-width
border-style
border-color
6.0 4.0 CSS1
border-right-color Sets the color of the right border border-color 6.0 4.0 CSS2
border-right-style Sets the style of the right border border-style 6.0 4.0 CSS2
border-right-width Sets the width of the right border thin
medium
thick
length
4.0 4.0 CSS1
border-style Sets the style of the four borders, can have from one to four styles none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
6.0 4.0 CSS1
border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-width
border-style
border-color
6.0 4.0 CSS1
border-top-color Sets the color of the top border border-color 6.0 4.0 CSS2
border-top-style Sets the style of the top border border-style 6.0 4.0 CSS2
border-top-width Sets the width of the top border thin
medium
thick
length
4.0 4.0 CSS1
border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin
medium
thick
length
4.0 4.0 CSS1

Classification

Property Description Values NN IE W3C
clear Sets the sides of an element where other floating elements are not allowed left
right
both
none
4.0 4.0 CSS1
cursor Specifies the type of cursor to be displayed url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
6.0 4.0 CSS2
display Sets how/if an element is displayed none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
4.0 4.0 CSS1
float Sets where an image or a text will appear in another element left
right
none
4.0 4.0 CSS1
position Places an element in a static, relative, absolute or fixed position static
relative
absolute
fixed
4.0 4.0 CSS2
visibility Sets if an element should be visible or invisible visible
hidden
collapse
6.0 4.0 CSS2

Dimension

Property Description Values NN IE W3C
height Sets the height of an element auto
length
%
6.0 4.0 CSS1
line-height Sets the distance between lines normal
number
length
%
4.0 4.0 CSS1
max-height Sets the maximum height of an element none
length
%
6.0   CSS2
max-width Sets the maximum width of an element none
length
%
6.0   CSS2
min-height Sets the minimum height of an element length
%
6.0   CSS2
min-width Sets the minimum width of an element length
%
6.0   CSS2
width Sets the width of an element auto
%
length
4.0 4.0 CSS1

Font

Property Description Values NN IE W3C
font
A shorthand property for setting all of the properties for a font in one declaration font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
4.0 4.0 CSS1
font-family
A prioritized list of font family names and/or generic family names for an element family-name
generic-family
4.0 3.0 CSS1
font-size
Sets the size of a font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
4.0 3.0 CSS1
font-size-adjust Specifies an aspect value for an element that will preserve the x-height of the first-choice font none
number
    CSS2
font-stretch Condenses or expands the current font-family normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
    CSS2
font-style
Sets the style of the font normal
italic
oblique
4.0 4.0 CSS1
font-variant
Displays text in a small-caps font or a normal font normal
small-caps
6.0 4.0 CSS1
font-weight
Sets the weight of a font normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4.0 4.0 CSS1

Generated Content

Property Description Values NN IE W3C
content Generates content in a document. Used with the :before and :after pseudo-elements string
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
attr(X)
open-quote
close-quote
no-open-quote
no-close-quote
6.0   CSS2
counter-increment Sets how much the counter increments on each occurrence of a selector none
identifier number
    CSS2
counter-reset Sets the value the counter is set to on each occurrence of a selector none
identifier number
    CSS2
quotes Sets the type of quotation marks none
string string
6.0   CSS2

List and Marker

Property Description Values NN IE W3C
list-style A shorthand property for setting all of the properties for a list in one declaration list-style-type
list-style-position
list-style-image
6.0 4.0 CSS1
list-style-image Sets an image as the list-item marker none
url
6.0 4.0 CSS1
list-style-position Sets where the list-item marker is placed in the list inside
outside
6.0 4.0 CSS1
list-style-type Sets the type of the list-item marker none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
4.0 4.0 CSS1
marker-offset   auto
length
7.0   CSS2

Margin

Property Description Values NN IE W3C
margin A shorthand property for setting the margin properties in one declaration margin-top
margin-right
margin-bottom
margin-left
4.0 4.0 CSS1

margin-bottom
Sets the bottom margin of an element auto
length
%
4.0 4.0 CSS1

margin-left
Sets the left margin of an element auto
length
%
4.0 3.0 CSS1

margin-right
Sets the right margin of an element auto
length
%
4.0 3.0 CSS1
margin-top Sets the top margin of an element auto
length
%
4.0 3.0 CSS1

Outlines

Property Description Values NN IE W3C
outline A shorthand property for setting all the outline properties in one declaration outline-color
outline-style
outline-width
    CSS2
outline-color Sets the color of the outline around an element color
invert
    CSS2
outline-style Sets the style of the outline around an element none
dotted
dashed
solid
double
groove
ridge
inset
outset
    CSS2
outline-width Sets the width of the outline around an element thin
medium
thick
length
    CSS2

Padding

Property Description Values NN IE W3C
padding A shorthand property for setting all of the padding properties in one declaration padding-top
padding-right
padding-bottom
padding-left
4.0 4.0 CSS1

padding-bottom
Sets the bottom padding of an element length
%
4.0 4.0 CSS1

padding-left
Sets the left padding of an element length
%
4.0 4.0 CSS1

padding-right
Sets the right padding of an element length
%
4.0 4.0 CSS1
padding-top Sets the top padding of an element length
%
4.0 4.0 CSS1

Positioning

Property Description Values NN IE W3C
bottom Sets how far the bottom edge of an element is above/below the bottom edge of the parent element auto
%
length
6.0 5.0 CSS2
clip Sets the shape of an element. The element is clipped into this shape, and displayed shape
auto
6.0 4.0 CSS2
left Sets how far the left edge of an element is to the right/left of the left edge of the parent element auto
%
length
4.0 4.0 CSS2
overflow
Sets what happens if the content of an element overflow its area visible
hidden
scroll
auto
6.0 4.0 CSS2
right Sets how far the right edge of an element is to the left/right of the right edge of the parent element auto
%
length
6.0 5.5 CSS2
top Sets how far the top edge of an element is above/below the top edge of the parent element auto
%
length
4.0 4.0 CSS2
vertical-align Sets the vertical alignment of an element baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4.0 4.0 CSS1
z-index Sets the stack order of an element auto
number
6.0 4.0 CSS2

Table

Property Description Values NN IE W3C
border-collapse Sets the border model of a table collapse
separate
7.0 5.5 CSS2
border-spacing Sets the distance between the borders of adjacent cells (only for the "separated borders" model) length length 6.0   CSS2
caption-side Sets the position of the caption according to the table top
bottom
left
right
6.0   CSS2
empty-cells Sets whether cells with no visible content should have borders or not (only for the "separated borders" model) show
hide
6.0   CSS2
table-layout Sets the algorithm used to lay out the table auto
fixed
6.0 5.5 CSS2

Text

Property Description Possible Values NN IE W3C
color Sets the color of a text color 4.0 3.0 CSS1
direction Sets the text direction ltr
rtl
    CSS2
letter-spacing Increase or decrease the space between characters normal
length
6.0 4.0 CSS1
text-align Aligns the text in an element left
right
center
justify
4.0 4.0 CSS1
text-decoration Adds decoration to text none
underline
overline
line-through
blink
4.0 4.0 CSS1
text-indent Indents the first line of text in an element length
%
4.0 4.0 CSS1
text-shadow   none
color
length
     
text-transform Controls the letters in an element none
capitalize
uppercase
lowercase
4.0 4.0 CSS1
unicode-bidi   normal
embed
bidi-override
  5.0 CSS2
white-space Sets how white space inside an element is handled normal
pre
nowrap
4.0 5.5 CSS1
word-spacing Increase or decrease the space between words normal
length
6.0 6.0 CSS1

Post by 넥스트리소프트 데꾸벅(techbug)
XHTML 1.0 에서 쿽스모드가 아닌 일반 Strict나 trasitional 모드에서 Height 100%를 CSS만으로 구현하기가 상당히 까다롭다.
그래서 구글신에게 물어봤다.

아는 분들은 알겠지만... 아래 방법들을 사용하면 되나 #body영역에 iframe이 들어간다면 iframe의 높이가 100%일때 처리되지 않는 단점이 있다.

[sample1]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#head {
    height: 100px;
    background: #ddd;
    position: relative;
    z-index: 1;
}
#body {
    min-height: 100%;
    margin: -100px 0 -50px;
}
* html #body {
    height: 100%;
}
#content-area {
    padding: 100px 0 50px;
}
#foot {
    height: 50px;
    background: #ddd;
}
</style>
</head>

<body>
<div id="head">
    요건 100px 높이 헤드
</div>
<div id="body">
    <div id="content-area">
        <p>컨텐츠 영역 1</p>
        <p>컨텐츠 영역 2</p>
        <p>컨텐츠 영역 3</p>
        <p>(계속 추가해서 테스트 가능)</p>
    </div>
</div>
<div id="foot">
    요건 50px 높이 풋
</div>
</body>
</html>


[sample2]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Layout - 100% height</title>
<style type="text/css">
html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:100%;
    background:#f0f0f0;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
    height:50px;
}
</style>
</head>
<body>
    <div id="container">
        <div id="header">
            헤더
        </div>

        <div id="content">
            컨텐츠
        </div>

        <div id="footer">
            푸터
        </div>
    </div>
</body>
</html>




[sample3]

  1. html,
  2. body {
  3. margin:0;
  4. padding:0;
  5. height:100%; /* 100 % height */
  6. }
  7. html>body #wrap {height:100%;} /* 100 % height */
  8. #header {
  9. width:100%;
  10. height:5em;
  11. }
  12. html>body #header {
  13. position:fixed;
  14. z-index:10; /* Prevent certain problems with form controls */
  15. }
  16. html>body #content-wrap {height:100%;} /* 100 % height */
  17. html>body #content {padding:6em 1em;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
  18. #footer {
  19. width:100%;
  20. height:5em;
  21. }
  22. html>body #footer {
  23. position:fixed;
  24. bottom:0;
  25. z-index:10; /* Prevent certain problems with form controls */
  26. }

[sample4]




  1. html,
  2. body {
  3. margin:0;
  4. padding:0;
  5. height:100%; /* 100 % height */
  6. }
  7. html>body #wrap {height:100%;} /* 100 % height */
  8. #wrap {
  9. width:40em;
  10. margin:0 auto;
  11. }
  12. #header {
  13. width:40em;
  14. height:5em;
  15. }
  16. html>body #header {
  17. position:fixed;
  18. z-index:10; /* Prevent certain problems with form controls */
  19. }
  20. html>body #content-wrap {height:100%;} /* 100 % height */
  21. html>body #content {padding:6em 1em;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
  22. #footer {
  23. width:40em;
  24. height:5em;
  25. }
  26. html>body #footer {
  27. position:fixed;
  28. bottom:0;
  29. z-index:10; /* Prevent certain problems with form controls */
  30. }





































Post by 넥스트리소프트 데꾸벅(techbug)
제목은 그럴듯 하지만 CSS의 hover속성을 이용한 mouseover, click 이벤트에 따른 이미지로드이다.

원본출처 : http://www.sitepen.com/blog/2008/03/28/svg-css-animations-fisheye-fun/
데모 : http://sitepen.com/labs/code/cssDock/

.dock img {
   width:50px;
   padding:10px;
   float:left;
   position:relative;
   display:block;
   -webkit-transition:width 0.5s ease-out, top 0.2s ease-out;
}
 
.dock img:hover {
   width:100px;
}
 
.dock img:active {
   top:-40px;
}
 
.dock img:hover + img {
   width:70px;
}
 

Post by 넥스트리소프트 데꾸벅(techbug)
IE7과 IE8일때와 그 이하의 버전에서 "맑은 고딕"체를 사용하지 못하는 버전에서는 다른 폰트를 사용하려고 스타일쉬트를 작성하다 별도로 만들지 않고 hack을 이용해 볼까 하고 찾다가 아래와 같은 좋은 방법을 발굴(?)하다..



IE7 의 렌더링 방식이 IE6과 다르다.
CSS testing of Selector and Pseudo selectors 를 보면 IE7 은 FF 에 더 가까와 지고 있다.
그래서 바야흐로 브라우저 3개를 켜고 코딩을 해야하는 시대가 온 것이다.
이를 해결하기 위한 방법 중 하나는 Selector Hack 을 이용하는 것이다.

.context_bar_form_field {
    height: 15px; // 모든 브라우저
    #height: 15px; // IE 전용
    _height: 21px; // IE6.0 과 이전버젼용
}


우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다. 
다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.
또 다른 방법은,

.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }


이렇게 하는 방법도있다. 맨 아래줄은 파이어폭스와 IE7만 적용된다.한가지 주의할 점은


body {
    text-align:-moz-center; /*FF*/
    #text-align:center; /*IE */
}


속성 키워드 자체가 다른 것이 많다. 주의 할 것!
위에서 처럼 속성값 자체가 다른 경우가 있다. 그러니 안된다고 hack 만 쳐다보고 있으면 밤세야 한다.
내가 보기에 가장 좋은 방법은 Conditional Comments 를 사용하는 것이다.
복잡하게 한 파일에 구질구질 작성하지 말고 파일을 분리해 버리는 것이다.

참고 : WebBorg

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iehacks.css">
<![endif]-->
<body>
  <div class="watermark">....</div>...

이렇게 분리해서 각개격파하는 것이 좋을 듯 싶다.


 
IE전용인 Expression을 사용하여 본다면
a { expression(어쩌구 문법) }

이렇게 해서 a 태그 즉, 링크에 걸린 항목에 대하여 Expression은 적용 시킬 수 있을것입니다.그럼 예로.. 링크주소중에 pdf 라은 확장자가 있다면 링크 앞에 자동으로 PDF 아이콘을 띄워봅시다.
a {
   padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
   background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}

이건 IE 용입니다. Firefox에선 이렇게 하시면 됩니다.
a[href $='.pdf']{
   padding-left: 20px;
   background: transparent url(pdf.gif) no-repeat center left;
}

음... 불여시에서 사용하는게 훨씬 간편하네요 @@;;
[href $='.pdf'] 이 구문에서 $는 .pdf로 끝나는 것을 의미합니다.
.pdf로 시작하는 것을 찾으려면 $대신에 ^을 사용하시면 됩니다.
[href ^='.pdf']가 되겠죠. 그냥 포함 되어 있는지를 찾는 거라면 *을 사용하시면 됩니다.
<style>
a[href $='.pdf']{
    padding-left: 20px;
    background: transparent url(pdf.gif) no-repeat center left;
}

a {
    padding-left: expression(this.href.indexOf('.pdf') > 0 ? '20px' : '');
    background: expression(this.href.indexOf('.pdf')>0 ? 'transparent url(pdf.gif) no-repeat center left' : '');
}
</style>
<a href="nextree.pdf">넥스트리1</a><br/>
<a href="nextree.gif">넥스트리2</a>

출처 : 플래쉬카페




IE6 버그정리

Doubled Float-Margin Bug
버전: IE6
문제: float 요소에 margin을 적용했을 경우, margin이 이중으로 표현되는 문제
해결: float 요소에 display:inline 적용
참고: http://positioniseverything.net/explorer/doubled-margin.html

——

Peekaboo Bug
버전: IE6, IE7
문제: float 요소 안의 내용이 나오지 않다가, 브라우저 창 크기를 조절하거나 스크롤했을때에만 가끔 내용이 나타나는 문제
해결: float 요소와 그 요소를 감싸는 요소 모두 적용
position: relative; /* IE6 bugfix */
min-width: 0; /* IE7 bugfix */
참고: http://positioniseverything.net/explorer/peekaboo.html
참고: http://www.brownbatterystudios.com/sixthings/2007/01/06/css-first-aid-for-ie-peekaboo-bug/

——

Duplicate Characters Bug
버전: IE6
문제: float 요소가 1개 이상 연속될때 마지막 float 요소의 문자 끝부분이 중복 출력되는 문제로, float 요소 내부에 <!– comment –>, <input type=”hidden” />, { display:none; } 와 같은 요소들이 포함되어있을때 발생.
해결: float 요소에 display:inline 적용
참고: http://positioniseverything.net/explorer/dup-characters.html

——

Expanding Box Problem
버전: IE6
문제: 레이아웃 요소의 크기를 지정했음에도 불구하고, 지정한 크기보다 큰 텍스트(띄어쓰기가 없는 긴 텍스트)를 포함할 경우 요소의 크기가 늘어나버리는 문제
해결: 해당 요소에 word-wrap:break-word; overflow: hidden; 적용
참고: http://positioniseverything.net/explorer/expandingboxbug.html

——

Guillotine Bug
버전: IE6, IE7
문제: float 요소의 하단이 잘리거나(IE6), float 요소를 포함하는 컨테이너 요소의 크기가 늘어나버리는(IE7) 문제
해결: float 요소를 포함하는 컨테이너 요소 바로 뒤에 clear해주는 요소를 삽입(예: <div style=”clear: both”></div>)
참고: http://positioniseverything.net/explorer/guillotine.html

——

IE6 Float Model Problem
버전: IE6
문제: float 요소 다음에 width가 선언되지 않은 non-floated 요소가 위치하면, 두 요소의 바운더리는 겹쳐야 한다. 하지만 non-floated 요소의 width가 선언되면, non-floated 요소가 float 요소 옆으로 나란히 위치하는 문제.
해결: 없다. 두 요소의 바운더리가 겹쳐져야 하는 상황을 아예 만들지 말거나, 꼭 겹쳐져야한다면 position을 사용하는 등의 다른 방법을 구사.
참고: http://positioniseverything.net/explorer/floatmodel.html

——

Three Pixel Text-Jog
버전: IE6
문제: float 요소 다음에 non-floated 요소가 위치하면, non-floated 요소의 텍스트가 3 pixel 밀리는 문제.
해결: float 요소에 {margin-right:-3px}, non-floated 요소에 {height:1%; margin-left:0} 적용
참고: http://positioniseverything.net/explorer/threepxtest.html

——

Inherited margins on form elements
버전: IE6, IE7
문제: form을 포함하는 컨테이너 요소에 margin이 적용되어있을때, 특정 input 요소들이 컨테이너의 margin을 상속받는 오류.
해결: input 요소 앞에 inline 요소를 삽입하거나, span, label 등의 컨테이너 요소로 input 요소를 감싼다.
참고: http://positioniseverything.net/explorer/inherited_margin.html

——

Line-height Bug
버전: IE6
문제: plain text 중간에 inline으로 img, input, textarea, select, object가 삽입되어있을 경우 line-height 제대로 표현하지 못하는(collapse됨) 문제.
해결: inline으로 삽입된 img, input… 요소의 상하 margin을 교정 (예: {margin:45px 0; vertical-align:middle;})
참고: http://positioniseverything.net/explorer/lineheightbug.html

——

Border Chaos
버전: IE6
상황: block 요소가 두개 있다. 두번째 요소의
문제: 연속되는 block 요소중 두번째 이후 요소들의 margin-top이 음수이고, border가 적용되어있을때, 나타나는 광란의 버그
해결: 연속되는 block 요소들의 컨테이너(parent)에 {position: relative;} 적용
참고: http://positioniseverything.net/explorer/border-chaos.html

——

Disappearing List-Background Bug
버전: IE6
문제: 리스트(ol, ul, dl)를 감싸는 div의 position이 relative이고 float되어있으며, 리스트요소(li, dt)에 background가 사라지는 문제(background를 적용했을때).
해결: 리스트요소(li, dt)에 {display:inline} 적용
참고: http://positioniseverything.net/explorer/ie-listbug.html

——

Unscrollable Content Bug
버전: IE6
문제: position이 relative이고 크기가 지정되지않은 컨테이너 요소가, position이 absolute이고 크기가 페이지보다 큰 컨텐츠를 포함하고 있다면 스크롤바가 나타나야 하지만 그렇지않은 문제.
해결: 컨테이너 요소에 {height:1%} 적용
참고: http://positioniseverything.net/explorer/unscrollable.html

——

Duplicate Indent Bug
버전: IE6
문제: float요소가 padding 또는 margin이 적용된 컨테이너에 위치하고 있다면, 이중으로 적용되는 문제.
해결: 경우의 수가 워낙 많지만, 대부분의 경우 {display:inline} 으로 해결 가능.
참고: http://positioniseverything.net/explorer/floatIndent.html

——

Escaping Floats Bug
버전: IE6
문제: 크기를 지정하지 않은 컨테이너가 float요소 여러개를 포함하고 있는데(clear 요소로 float 해제했음), 컨테이너 영역이 제대로 표현되지 못하는 문제.
해결: 컨테이너에 {height:1%} 적용
참고: http://positioniseverything.net/explorer/escape-floats.html

——

Creeping Text Bug
버전: IE6
문제: block요소가 또 다른 block요소를 포함하고 있고, border-left, padding-bottom이 적용되어있을때, 내부의 block요소가 1px씩 좌측으로 기어들어가는 문제
해결: 외부 block요소에 {height:1%;} 적용
참고: http://positioniseverything.net/explorer/creep.html

——

기타
문제: a를 block으로 지정하면, 블록 전체가 마우스에 반응해야하는데 여전히 텍스트에만 반응하는 문제
해결: height:1%

문제: 리스트요소(li)간 간격이 발생하는 문제
해결: display: inline

문제: {position:absolute; bottom:0; right:0}인 요소가 relative인 부모의 우측하단에 위치하지 않고 전체 화면의 우측하단에 위치하는 문제
해결: height:1%

——

FireFox의 버그
문제: 배경 이미지의 위치를 bottom으로 했을 경우, 브라우저 크기보다 컨텐츠의 크기가 짧다면, 배경이미지가 컨텐츠 하단에 위치하는 버그
해결: html {height:100%}



Post by 넥스트리소프트 데꾸벅(techbug)
empty-cells:show 가 IE7 에서 먹지 않는 문제로 많이 고민하다.

<!--[if lte IE 7]>
<script type="text/javascript">
window.onload = function() {
      tds = document.all.tags("td");
      for (x = 0; x < tds.length; x++) {
         if (tds[x].innerHTML == '') tds[x].innerHTML = "&nbsp;";
      }
}
</script>
<![endif]-->
Post by 넥스트리소프트 데꾸벅(techbug)