몇가지 CSS 트릭 from sixrevision

원문 : http://sixrevisions.com/css/10-random-css-tricks-you-might-want-to-know-about/

원문을 해석한게 아니라 제가 그냥 이해한대로 요역해서 정리 했습니다.

1. em 을 쉽게 쓰기 위한 body 스타일

body {
    font-size:62.5%;
}

p {
    font-size:1.2em;
}

body 에서 font-size를 62.5%로 세팅하게 되면 em값을 px값처럼 쉽게 매치 시켜 쓸 수 있습니다.
body 세팅후에 font-size값은 1em = 10px, 1.2em = 12px 이런 식으로 사용가능해 집니다.(미확인)

2. webkit계열 브라우저의 입력폼 외곽선 없애기

크롬이나 사파리 등을 사용하면 입력폼 외곽에 포커스 되면 유색 외곽선이 생기는데 없애고 싶다면

input[type="text"]:focus {
    outline:none;
}

이렇게 세팅하면 됩니다.(미확인)

3. div 하나에 ie 브라우저별 다른 배경색을 지원하고 싶을때

주제는 저렇지만 사실 ie7, ie6 계열 브라우저에 맞추는 hack 비슷한거라 보면 됩니다.

div {
    background-color: #000; /* 모든 브라우저 */
    *background-color: #999; /* IE7 그 이하에만 적용 */
    _background-color: #FFF; /*  IE6 그 이하에만 적용 */
}

ie7은 보통 * 인식, ie6만 적용을 원할 경우 _ 인식

4. 투명 또는 반투명 효과

앞서 CSS 정보에 한번 정리한 적이 있지만 여기는 ie8에서도 사용가능한 코드가 있으므로 다시 한번 정리합니다.

div {
    opacity: 0.7; /* 표준스타일 */
    -ms-filter: "progid:DXImageTransForm.Microsoft.Alpha(Opacity=70)"; /* IE8 */
    filter: alpha(opacity=70); /* IE5 ~ IE7 */
}

이전 투명 스타일과 합쳐서 쓰면 될거 같습니다. opacity, -ms-filterfilter 같은 속성은 이전 스타일에 정의되어 있지 않네요.

5. 고정된 크기의 레이어 중앙에 띄우기

width 가운데는 쉽지만 height 가운데는 잡기 힘든데 레이어 크기가 고정되어 있을때 화면 가운데 위치시키는 CSS 입니다.(확인/IE7에서 특정한 경우 깨질수도 있음)

div {
    position:absolute;
    top:50%;
    left:50%;
    width:400px;
    height:300px;
    margin-top:-150px; /* 높이의 절반 */
    margin-left:-200px; /* 폭의 절반 */
}

6. 텍스트 가운데 맞추기(수직)

div {
    width:100px;
    height:100px;
}
div p {
    line-height:100px;
}

input type=text 혹은 type=button에 적용이 가능한지 테스트 해봐야 겠다. 그냥 button 태그는 되겠지만...
(input type=text에서 잘 되는것 확인)