기준이 1920인 width: 500px; 를 vw로 변경 할 경우
Tag Archives: css
Android 4.* native `audio` and `video` controls bug
android 4.*버전의 android 브라우저에서 -webkit-appearance사용시 video태그의 기본 컨트롤의 스타일이 무너지는 현상 html 셀렉터를 이용하여 해결필요 [css] html input[type="button"] { -webkit-appearance: none } [/css]
Custom Fields Part1.
WordPress에서는 글 작성시 Custom Fields를 이용하여 css를 작성하면 http://ilovetypography.com/같은 블로그처럼 포스팅마다 새로운 디자인의 페이지를 만들어 낼수가 있습니다. 사용하고 계신 Themes의 header.php파일을 열고 head안쪽으로 아래와 같이 소스를 추가해 줍니다. [html] <?php //Custom Fields if(is_single()) { $style = get_post_meta($post->ID, ‘_custom_style’, true); if($style) { ?> <style type="text/css" media="screen, print"> <?=$style?> </style> <?php } } ?> [/html] Themes를 수정하셨다면 …
IE8 Hack
[css] /* IE6, IE7, IE8 */ selector { color: blue\9; } /* IE7, IE8 */ selector { color/*\**/: blue\9; } [/css] 구글검색을 하다보면 IE8 STANDARDS MODE ONLY로 되어있지만… 막상 IE Tester로 테스트 해보면 IE7에서도 동작 하더군요..-_- IE Tester가 문제인지 올라온 글들이 문제인지는 확인해 보지 못했지만 IE Tester로 테스트하고 안된다고 하는 사람도 있기에…-_-; IE7, IE8 두개 …
inline-block속성 이용하기
요즘 제가 float속성 대신 많이 사용하고있는 방법은 inline-block입니다. 이미지 겔러리 같은 디자인을 코딩시 float의 단점은 높이가 다를 경우 다음줄의 정렬이 뒤틀어지는 문제가 생기기 때문에 높이를 정해주거나 사이에 clear를 해야 하는 문제가 있었죠.. (저같은 경우는 말이죠.. 좋은 방법을 알고계시다면 알려주세요.) 그래서 사용하는 방법이 inline-block입니다. inline-block로 정렬시 높이가 일정하지 않아도 정렬이 뒤틀림 없이 나오게 할수가 있습니다. 거기다 …
IE를 위한 css모음
IE6 png filter IE6에서 알파값이 들어간 png를 처리하지 못하기 때문에 filter를 사용해야 합니다. [css] /*scale*/ selector { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’pngImage.png’, sizingMethod=’scale’); } /*crop*/ selector { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’pngImage.png’, sizingMethod=’crop’); } /*image*/ selector { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’pngImage.png’, sizingMethod=’image’); } [/css] scale, crop, image 속성을 지원합니다. scale 상위의 객체에 꽉 체워 줍니다. 만일 이미지를 싸고 있는 레이어가 있다면 그 레이어에 크기에 맞게 그림이 …