10가지 CSS 팁 (1)

크로스 브라우징, 혹은 특정 브라우저에서 사용할만한 CSS 팁.

1. inline block
inline-block 이 듣는경우 float를 사용하지 않아도 되고, 리스트 구성에 큰 도움이 된다. 근데 아직 필요한 경우가 없어서 이 코드는 확인 못해봄.

<style>
li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
}
</style>
<ul>
        <li>
                <div>
                        <h4>This is awesome</h4>
                        <img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/>
                </div>
        </li>
        <li>
                <!-- etc ... -->
        </li>
</ul>

2. 사파리 textarea 리사이즈 막기
사파리나 크롬의 경우 textarea가 리사이즈 가능하도록 나온다. 이때 사용하면 좋을듯.
(확인했음!)

/ * Supports: car, both, horizontal, none, vertical * /
textarea {
      resize: none;
}

3. 라운드 코너(FF/Safari only)
IE는 해당사항 없다.

.rounded{
    -moz-border-radius: 5px; /* Firefox */
    -webkit-border-radius: 5px; /* Safari */
}

4. min-height 적용

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}

5. 레이아웃 없는 이미지 롤오버 테두리
테두리가 늘어나는 롤오버를 쓰는경우 포함된 레이아웃이 들썩거리는데 그런 경우를 없애주는 방법

#example-one a img, #example-one a {
    border: none;
    overflow: hidden;
    float: left;
}
#example-one a:hover {
    border: 3px solid black;
}
#example-one a:hover img {
    margin: -3px;
}

6. (반)투명화
반투명화 경우 브라우저별로 틀린경우가 많아서 반투명화를 원하는 경우 하나의 클래스로 정해주는게 좋을듯

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

7. 자바스크립트 없는 CSS 라이트박스
http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

8. CSS 툴팁
Safari 경우 약간 이상하게 나옴. 그럭저럭 쓸만은 하지만 아주 좋지는 않음.

<style type="text/css">
a:hover {
    background:#ffffff;
    text-decoration:none;
}
 /*BG color is a must for IE6*/
a.tooltip span {
    display:none;
    padding:2px 3px;
    margin-left:8px;
    width:130px;
}
a.tooltip:hover span{
    display:inline;
    position:absolute;
    background:#ffffff;
    border:1px solid #cccccc;
    color:#6c6c6c;
}
</style>Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>

9. 선택된 텍스트 배경색 지정 (FF/Safari only)
드래그앤드롭으로 선택된 텍스트 영역의 배경색도 지정할 수 있다.
확인해본 결과 IE 빼고 다 됨. (Chrome, Opera, Safari는 ::selection으로 FF는 ::-moz-selection로 지정)

::selection {
    background: #ffb7b7; /* Safari */
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

10. 링크에 파일타입 아이콘 붙이기

a[href^="http://"] {
    background:transparent url(../images/external.png) center right no-repeat;
    display:inline-block;
    padding-right:15px;
}

일단 공개 한후 테스트 해본후 추가적으로 코멘트를 달 예정...

출처 : http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/