본문 바로가기

반응형

Story/html/css

홈페이지제작시 특정 input 속성에만 스타일을 지정할때 Styling Texty Inputs Only - input type text 에만 적용할때 -input[type=text] { /* Awesome styling */ } - input type text,url 등 여러가지를 적용할때 -input[type=text], input[type=url], input[type=tel], input[type=number], input[type=color], input[type=email], { /* And that ain't all of them... */ } - input type submit,file 은 제외할때 -input:not([type=submit]):not([type=file]) { /* omg so much cleaner */ } :not 등의 selector 가 ie9 이하는 지원되지 않는다.아.. 더보기
14 Website Trends for 2014 As the web continues to mold and evolve, new design trends, techniques, and ideas are constantly surfacing. Analyzing your site’s design, content, and features from time to time can help you to be sure that your site is effective and reaching visitors in the best possible way. As a guide for ensuring your website is up to date, here are 14 website trends for 2014. 2014 Web Trends The trends belo.. 더보기
Quirks mode Doctype NS6 Mozilla 0.9.5-1.0 IE 8+ Firefox Chrome Safari Opera 7.5+ Netscape 7+ Mozilla 1.0.1+ Konq 3.5+ HTML5 spec IE 7 Opera 7.10 IE 6 Opera 7.0 Mac IE 5 Konq 3.2 None Q Q Q Q Q Q Q HTML 2 Q Q Q Q Q Q Q HTML 3 Q Q Q Q Q Q Q HTML 3.2 Q Q Q Q Q Q Q HTML 4.01 Strict with system identifier S S S A A A A without system identifier S S S A A Q A Transitional with system identifier S S A A A A Q with.. 더보기
X-UA-Compatible Meta Tag X-UA-Compatible Meta Tag Description and Uses: The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. It is used by Internet Explorer 8 to specify if a page should be rendered as IE 7 (compatibility view) or IE 8 (standards view). You specify the user agent and version to use in the contents of the tag: "IE=EmulateIE7" The opti.. 더보기
유튜브(youtube) 동영상 레이어 겹칠때 뚤리는 현상 해결방법 or z-index 문제 유튜브 동영상을 화면에 넣을때 레이어가 그 위로 올라가는경우 아래 화면 처럼 보여야 하는대 이렇게 레이어가 뚫려서 보이는경우가 있습니다. 동영상을 넣을때 iframe 형식으로 넣는대 이렇게 넣는 부분에서 &wmode=opaque 를 추가해주면 이런 현상을 막을수 있습니다. 또는 ie11 에서는 이 방법으로 해결되었다. 더보기
font size px em % 웹에서만 사용하다 모바일을 고려하다 보니 font-size가 문제가 됩니다. 각종 기기마다 해상도가 다르다 보니 컨텐츠의 text 내용이 작아보이거나 너무 크게 보이는등의 문제가 발행합니다. font-size 의 단위를 설정하는 방법은 크게 고정단위(px)와 유동단위(%,em)이 있는대 모바일에서 확대 또는 축소되어 보이려면 유동단위를 사용해 주면 됩니다. 1em = 16px em 계산법은 12(사용하고싶은px) / 16(기준크기px) = 0.75 ex ) body { font-family:'맑은 고딕', malgun gothic, '돋움',dotum, AppleGothic,sans-serif;font-size:1em; } p { font-size:0.875em; } // 14/16 = 0.875 더보기
모바일에서 fixed style 지원여부 position Selector iOS Android Opera BlackBerry Nokia UC NetFront Dolphin One Tizen IE Firefox 5 6 2 3 4 Chr Mini Mob 12 Mob 14 6 7 PB 10 Xpress MeeGo Anna Belle 9 10 position: other valuesstatic, relative, and absolute Yes Yes Yes Yes Yes Yes Yes WebKit browsers have a minor bug; see page. position: fixed basic supportDoes the browser try to create a fixed layer at all, or is it just an absolute.. 더보기
Opera Mobile Emulator http://www.opera.com/ko/developer/mobile-emulator Opera Mobile Emulator Do your mobile development straight from your desktop, and pair it with Opera Dragonfly for advanced debugging. Opera Mobile Emulator 12.1 for Windows Opera Mobile Emulator 12.1 for Mac Opera Mobile Emulator 12.1 for Linux Mobile debugging on your desktop 더보기
HTML5를 이용하여 위치/좌표정보(GPS)를 사용하기 HTML5에서는 GPS 수신기기를 탑재한 스마트폰의 위치정보를 javascript를 통해 쉽게 이용할 수 있도록 하고 있습니다. 단순한 2개의 실수값(위도, 경도)이지만 위치정보는 매우 민감한 개인정보 중 하나이므로 웹페이지에서 이 기능을 사용할경우 브라우저는 사용자에게 위치정보 제공 여부를 선택할 수 있습니다. HTML5 Geolocation은 IE9, 파이어폭스, 크롬 등 대부분의 브라우저에서 지원하고 있습니다. 1. 위치정보 가져오기 -위치정보를 가져오기 위해서는 getCurrentPosition() 함수를 사용하면 됩니다. 2. 에러 처리 -위의 예에서 getCurrentPosition의 첫 번째 매개변수로 showPosition가 들어가 있습니다. 이 함수의 두 번째 매개변수는 에러 처리를 위한.. 더보기
파일찾기 찾아보기 버튼을 이미지로 파일찾기 버튼을 이미지로 두개일때는 아래처럼 추가 출처는 잊어버림... 더보기

반응형