본문 바로가기

FrontEnd/CSS

iphone css media-query iPhone 5 CSS media query CSS Media Queries for iPads & iPhones /* iPhone < 5: */ @media screen and (device-aspect-ratio: 2/3) { } /* iPhone 5: */ @media screen and (device-aspect-ratio: 40/71) { } /* iPhone 6: */ @media screen and (device-aspect-ratio: 375/667) { } /* iPhone 6 Plus: */ @media screen and (device-aspect-ratio: 16/9) { } /* iPad: */ @media screen and (device-aspect-ratio: 3/4) { } 더보기
bootstrap dl-horizontal http://getbootstrap.com/css/#type-lists bootstrap css 를 모두 사용하긴 그렇고 dl-horizontal 클래스 정의만 사용하고 싶을 때... 아래 css를 추가한다. dt { display: block; font-weight: 700; line-height: 1.42857143; } dd { display: block; -webkit-margin-start: 40px; line-height: 1.42857143; margin-left: 0; } @media (min-width: 768px) { dt { float: left; width: 160px; overflow: hidden; clear: left; text-align: right; text-overflow.. 더보기
부트스트랩 +iconmoon Customizing Bootstrap Icons using Gulp Create an Icon Font Using Illustrator & IcoMoon 부트스트랩에 프로젝트에서는 기본으로 제공되는 Glyphicons을 사용할 수 있는데요. Glyphicon 외 내가 직접 구성한 아이콘셋과 아이콘셋을 이용할 수 있게 제공되는 CSS를 이용해서 부트스트랩에서 사용할 수 있는 방법입니다. icomoon CSS을 다운로드 받으면 style.css 도 같이 다운로드 됩니다. 이 style.css 의 패턴을 참고해서 부트스트팹의 style.css를 최적화하면 사용이 가능합니다. 하지만 Customizing Bootstrap Icons using Gulp에서 안내하는 방법이 glyphicon.less 를 이용해서.. 더보기
Div, Text 중앙, 가운데 정렬 중앙정렬 1. Div 중앙정렬 2. Text 중앙, 가운데 정렬 * IE7 이하에서 tabel-cell 기능은 없음. IE에서 동일하게 동작하도록 수정 Center IE8 까지는 된다. 하지만 IE7에서는 안된다. Center 더보기
css hack 참고 CSS Hacks for IE6,IE7,IE8,IE9 and IE10CSS hacks - quick code, without unnecessary explanation About conditional comments (Internet Explorer)IE Conditional Comments 필터링 CSS-only Filters Summary #hack{ color:red; /* All browsers */ color:red !important;/* All browsers but IE6 */ _color:red; /* Only works in IE6 */ *color:red; /* IE6, IE7 */ +color:red;/* Only works in IE7*/ *+color:red; /* Only.. 더보기
CSS odd & even rules Web Style Sheets CSS tips & tricks col:first-child {background: #FF0} col:nth-child(2n+3) {background: #CCC} Month '94 '95 '96 '97 '98 '99 '00 '01 '02 '03 Jan 14 13 14 13 14 11 11 11 11 tr:nth-child(even) {background: #CCC} tr:nth-child(odd) {background: #FFF} IE는 아직 안된다는... :( 더보기
네비게이션 링크 네비게이션 링크 복수 페이지 사이의 관계를 링크로 표시하는 기능 네비게이션 링크를 확실하게 지정하면 사이트에서 이동이 편리해지고 사용성이 향상된다. WCAG1.0에서도 '우선도2'로 네비게이션 링크를 지정하게 규정하고 있다. rel속성값 및 내용 start : 시작페이지 next : 다음페이지 prev : 이전페이지 contents : 차례 index : 찾아보기 glossary : 용어집 copyright : 저작권보호 chapter : 장 sectioin : 절 subsecton : 항 appendix : 부록 help : 도움말 bookmark : 즐겨찾기 link 요소로 대체문서를 지정 대체문서 지정, 다른어어버전 표시 및 media 속성을 지정하면 다른 미디어에 적용할 버전을 표시할 수 있다. .. 더보기
웹 표준 경진대회 & CSS PLAYGROUND 웹 표준 경진대회 & CSS PLAYGROUND 출처 : http://wiki.standardmag.org/kws3day 더보기