검색결과 리스트
css 이야기에 해당되는 글 2건
- 2013.02.01 CSS로 엘리먼트 회전시키기
- 2012.11.20 IE6, IE7에서 display:inline-block 사용하기
글
transform 속성을 이용하면 각종 변환을 이용할 수 있다.
그 속성중에 rotate에 대해 알아보자.
transform의 경우 아직 표준화 심사중인 속성으로 벤더 프리픽스가 필요하다. 필자의 경우 크롬브라우저를
이용하고 있기 때문에 -webkit-을 붙여주었다.
-webkit-transform:
rotateX(각도) ->요소를 X축에 대하여 회전시킨다. 각도의 단위는 rad, deg
rotateY(각도) ->요소를 Y축에 대하여 회전시킨다.
rotateZ(각도) ->요소를 Z축에 대하여 회전시킨다.
rotate3d(a,b,c 각도) -> 요소를 방향벡터 (a,b,c)와 방향이 같은 직선을 축으로 회전시킨다.
'css 이야기' 카테고리의 다른 글
IE6, IE7에서 display:inline-block 사용하기 (0) | 2012.11.20 |
---|
설정
트랙백
댓글
글
HTML 코딩을 하다보면
CSS의
display:inline-block
속성을 사용하고 싶을 때가 종종 있지만,
늘상 IE6, IE7 때문에 포기하고 만다.
IE6, IE7에서는 inline-block을
그냥 block으로 인식해버리기 때문이다.
그러나 IE6, 7에서도 inline-block을 사용 할 수 있다!
block을 inline-block으로 바꿔도 block으로 인식되는 문제가 있는데,
반면에 inline인 요소를 inline-block으로 바꿀 때는 문제가 되지 않는다.
IE6,7에서는 다음과 같이 속성을 주면 block을 inline-block으로 바꾸어 사용 할 수 있다.
div{display:inline-block;zoom:1;*display:inline/*IE7 HACK*/;
_display:inline;/*IE6 HACK*/}
이제 인라인 블럭을 사용하여 마크업을 해보자.
'css 이야기' 카테고리의 다른 글
CSS로 엘리먼트 회전시키기 (0) | 2013.02.01 |
---|
RECENT COMMENT