CSS 팁 정리
이 글에서는 알아두면 편리한 CSS 테크닉에 대한 팁에 대해 알아보겠습니다.
이 포스팅은 좋은 팁을 숙지할 때 마다 업데이트될 것임을 알려드립니다.
Cross-Browser Transparency
모든 곳에 적용하고 싶어지는 CSS3 속성 중 하나인 불투명도(opacity)를 필터 속성을 추가해서 IE의 예전 버전에서도 우아하게 다룰 수 있을 것입니다.
.transparent {
filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}General Media Queries(범용 미디어 쿼리)
다음의 소스를 참고하여 프로젝트 환경에 맞도록 사용하시기 바랍니다.
이 코드는 min-device-pixel-ratio을 사용해 레티나 베이스 기기도 목표로 할 수도 있습니다.
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}Force Vertical Scrollbars(수직 스크롤바 강제)
페이지 컨텐츠가 브라우저 창의 전체 높이를 채우지 않는다면 결국 스크롤바를 얻지 못하게 됩니다.
다음의 소스는 스크롤바가 항상 남도록 HTML 엘리먼트가 브라우저보다 아주 약간 높도록 해줄 것입니다.
html { height: 101% }@font-face Template
기억하기 힘든 CSS3 가 있습니다.
@font-face를 사용하여 자신의 TTF/OTF/SVG/WOFF 파일을 웹사이트에 끼워넣고 별도의 폰트 패밀리를 만들어낼 수 있습니다.
만약에 zen-coding, emmet을 사용하신다면 단축어인 @f+ 를 이용하면 더욱더 편리합니다.
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Arial, sans-serif;
}CSS3 Column Text(CSS3 텍스트 열)
CSS3 columns은 컬럼(열) 형식으로 텍스트를 분할할 수 있습니다.
다음의 테크닉을 사용하여 단락을 원하는 개수의 컬럼으로 나눌 수 있습니다.
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}CSS Fixed Footer(고정 푸터)
웹사이트에 고정 푸터를 매다는 것은 아주 쉽습니다.
유저의 스크롤을 따니면서 사이트에 도움이 되는 정보를 보여줄 것입니다.
이상적으론 유저 인터페이스에 실제로 가치가 있는 경우에만 적용될 것입니다.
#footer {
position: fixed;
left: 0px;
bottom: 0px;
height: 30px;
width: 100%;
background: #444;
}
/* IE 6 */
* html #footer {
position: absolute;
top: expression((0-(footer.offsetHeight)%2B(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)%2B(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))%2B'px');
}Transparent PNG Fix for IE6(IE6용 투명 PNG 교정)
웹사이트에 투명한 이미지를 사용하는 것은 매우 일반적인 일입니다.
gif 이미지로 시작되어 알파 투명 PNG로 진화해 왔습니다.
불행히도 아주 오랜 버전의 IE는 투명도를 전혀 지원하지 않지만 이 CSS 스니핏이 문제를 해결해줄 것입니다.
.bg {
width:200px;
height:100px;
background: url(/folder/yourimage.png) no-repeat;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/folder/yourimage.png',sizingMethod='crop');
}
/* 1px gif method */
img, .png {
position: relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "images/transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}Cross-Browser Minimum Height
많은 최신 브라우저는 min-height를 완벽하게 다루어주나, IE와 오래된 Firefox는 문제가 있습니다.
이 코드 세트는 관련된 어떤 버그에도 교정해줄 것입니다.
#container {
min-height: 550px;
height: auto !important;
height: 550px;
}CSS3 Glowing Inputs Highlights(빛나는 Input 엘리먼트)
크롬과 사파리 유저는 폼에서 인풋 외곽선이 거슬릴지도 모릅니다.
스타일 시트에 이 스니핏을 넣으면 기본 인풋 엘리먼트를 완전히 새로운 디자인으로 만들어줄 것입니다.
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}Style Links Based on Filetype(파일 형식에 따른 링크 스타일링)
CSS 실렉터와 백그라운드 이미지 아이콘을 사용하여 링크의 화일 형식을 결정할 수 있습니다.
다양한 프로토콜(HTTP, FTP, IRC, mailto) 혹은 단순히 파일 형식 자체(mp3, avi, pdf)를 포함할 수 있습니다.
/* external links */
a[href^="http://"] {
padding-right: 13px;
background: url('external.gif') no-repeat center right;
}
/* emails */
a[href^="mailto:"] {
padding-right: 20px;
background: url('email.png') no-repeat center right;
}
/* pdfs */
a[href$=".pdf"] {
padding-right: 18px;
background: url('acrobat.png') no-repeat center right;
}Force Code Wraps(코드 줄바꿈 강제)
pre 태그는 많은 양의 코드를 보여주는 레이아웃에서 사용됩니다.
이 CSS는 노트패드나 텍스트에디터에서 보는 것과 같이 줄이 길 때 수평 스크롤바를 하지않게 코드를 보여줍니다.
즉, 컨테이너 바깥으로 튀어나가지 않고 모든 pre 태그가 코드를 줄바꿈하도록 합니다.
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5%2B */
}Continued List Ordering(항목 번호 이어가기)
UL 엘리먼트에서 CSS만으로 항목 번호를 이어지게 할 수 있습니다.
ol.chapters {
list-style: none;
margin-left: 0;
}
ol.chapters > li:before {
content: counter(chapter) ". ";
counter-increment: chapter;
font-weight: bold;
float: left;
width: 40px;
}
ol.chapters li {
clear: left;
}
ol.start {
counter-reset: chapter;
}
ol.continue {
counter-reset: chapter 11;
}다음의 링크를 참고하세요.
Display URLS in a Printed Webpage(인쇄된 웹페이지에 URL 표시하기)
뉴스 웹사이트나 인쇄할 게 많은 리소스를 운영하고 있다면 좋은 팁이 될 수 있을 것입니다.
웹페이지의 앵커 링크는 정확히 보통으로 보이고 표현될 것입니다.
그러나 인쇄될 때에는 사용자가 풀 하이퍼링크 URL을 볼 수 있습니다.
방문자가 링크해 놓은 웹페이지에 접근할 필요가 있으나 일반적인 인쇄된 문서에선 URL를 볼 수 없을 때 편리합니다.
@media print {
a:after {
content: " [" attr(href) "] ";
}
}Disable Mobile Webkit Highlights(모바일 웹킷 하일라이트 제거)
사파리나 웹킷 기반 엔진에서 모바일 웹사이트에 접근할 때 탭한 엘리먼트 주위로 회색 박스가 생기는 것을 눈여겨볼 수 있습니다.
웹사이트에 이 스타일을 추가하기면 하면 모든 모바일 브라우저의 하일라이트를 제거할 것입니다.
body {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}Paper Page Curl Effect(종이 페이지 휘는 효과)
이 페이지 휘는 효과는 웹사이트 컨텐츠를 담는 거의 모든 컨테이너에 적용될 수 있습니다.
이미지 미디어, 인용 문구 등을 즉시 생각해낼 수 있지만 실제로는 모든 것에 가능할 것입니다.
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0;
}
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
}
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
}Glowing Anchor Links(빛나는 앵커 링크)
CSS3 텍스트 그림자는 웹페이지 타이포그래피를 스타일링하는 방법입니다.
이 스니핏은 링크가 빛나는 호버 효과가 나도록 합니다.
a {
color: #00e;
}
a:visited {
color: #551a8b;
}
a:hover {
color: #06e;
}
a:focus {
outline: thin dotted;
}
a:hover, a:active {
outline: 0;
}
a, a:visited, a:active {
text-decoration: none;
color: #fff;
-webkit-transition: all .3s ease-in-out;
}
a:hover, .glow {
color: #ff0;
text-shadow: 0 0 10px #ff0;
}Featured CSS3 Display Banner(주목받는 CSS3 배너)
일반적으론 이 효과를 대체할 배경 이미지를 설정할 필요가 있지만 CSS3 지원 엔진에선 이미지 없이 컨텐츠 래퍼의 가장자리에 걸리는 동적 배너를 만들어낼 수 있습니다.
전자상거래 상품이나 이미지 섬네일, 비디오 프리뷰 혹은 블로그 기사 위에 붙여져 멋져 보일 수 있습니다.
'StyleSheet > CSS' 카테고리의 다른 글
| CSS 핵 보다 나은 조건부 주석문(conditional comment) (0) | 2016.05.31 |
|---|---|
| Boilerplate base CSS(보일러플레이트 초기화) (0) | 2016.05.30 |
| 순수 CSS 말풍선 만들기 (0) | 2016.05.24 |
| reset, default CSS (0) | 2016.05.20 |
| 효율적인 CSS 작성 방법 (0) | 2016.05.20 |
