CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
글 수 52
1
조회 수 : 11319 신고 : 0
![title: [ani]깜빡이는 표정](http://web.webmini.net/./files/iconshop/74a37aadbde84c591808859b369e85e0.gif "title : [ani]깜빡이는 표정")
빽짱구| 미리보기 : |
|---|
CSS 상속 두번째 입니다.
일반적으로 CSS 상속하는건 http:///css/45391 여기에서 간단하게 설명을 했습니다.
이번에는 hack 사용시 상속입니다.
아래와 같은 class 가 있다고 가정합니다.
이럴경우 공통되는걸 또다시 작성하실 필요가 없습니다. 아래와 같이 하셔도 됩니다.
이렇게 한다면 title 이라는 class 네임을 가진 소스는 왼쪽 정렬에 안쪽좌측으로 5px 들어간 화면이 출력되며, IE6에서는 display:inline; 만 추가로 적용이 되게 됩니다. (더블마진버그) 그리고 IE7에서는 margin-left:3px 로 적용이 되서 출력됩니다.
또다른 방법
이렇게 해도 화면상으로는 위에 소스들과 똑같이 보여지게 됩니다.
IE6 스타핵을 언더바핵으로 한줄로 빼고, IE7 전용핵을 사용한것입니다.
가장 좋은 방법을 선택하시기 바랍니다.
픽셀에 민감한 디자이너들 = CSS핵과 비례한다..
일반적으로 CSS 상속하는건 http:///css/45391 여기에서 간단하게 설명을 했습니다.
이번에는 hack 사용시 상속입니다.
아래와 같은 class 가 있다고 가정합니다.
| .title {float:left; margin-left:5px;} * html .title {display:inline; float:left; margin-left:5px;} /* IE6 용 */ *+html .title {float:left; margin-left:3px;} /* IE7 용 */ |
이럴경우 공통되는걸 또다시 작성하실 필요가 없습니다. 아래와 같이 하셔도 됩니다.
| .title {float:left; margin-left:5px;} * html .title {display:inline;} /* IE6 용 */ *+html .title {margin-left:3px;} /* IE7 용 */ |
이렇게 한다면 title 이라는 class 네임을 가진 소스는 왼쪽 정렬에 안쪽좌측으로 5px 들어간 화면이 출력되며, IE6에서는 display:inline; 만 추가로 적용이 되게 됩니다. (더블마진버그) 그리고 IE7에서는 margin-left:3px 로 적용이 되서 출력됩니다.
또다른 방법
| .title {_display:inline; float:left; margin-left:5px;} /* IE6용 언더바핵 */ *:first-child+html .title {margin-left:3px;} /* IE7 전용핵 */ |
이렇게 해도 화면상으로는 위에 소스들과 똑같이 보여지게 됩니다.
IE6 스타핵을 언더바핵으로 한줄로 빼고, IE7 전용핵을 사용한것입니다.
가장 좋은 방법을 선택하시기 바랍니다.
픽셀에 민감한 디자이너들 = CSS핵과 비례한다..
포토샵과 letter-spacing 자간 비교 
글쓴이 빽짱구
단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시
아이콘이 붙게됩니다.
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상
닫기