더 나은 코딩을 위한 CSS 테크닉 28가지

약간의 css를 추가하여 실현 가능한, 궁금했던 부분을 해결해주는 css테크닉을 샘플과 함께 소개합니다.
실제로 작업을 하면서 궁금했던 부분이나, 어떻게 해결해야 하는지 몰랐던 부분들을 중점적으로 모아봤습니다. 앞으로 코딩할 때 도움이 되었으면 좋겠네요~

01. 그라데이션 배경+마우스 오버 효과

See the Pen bwVGGr by nanati (@nanati) on CodePen.

마우스를 올려 놓으면 그라데이션 배경을 변화시킬 수 있습니다.

02. 텍스트 중앙(가운데) 정렬

See the Pen ALWBKA by nanati (@nanati) on CodePen.

CSS3 Transform을 이용해서 지금껏 고민했던 문제를 한방에 해결! (단, 적용되지 않는 브라우저도 있으니 요기서 확인해주세요^^)

03. 이미지를 상하 좌우 중앙(가운데) 정렬

See the Pen VKvYwx by nanati (@nanati) on CodePen.

04. 박스에 그림자효과를 원하는 변에만 적용하기

샘플은 맨 밑 변에 적용하였습니다.

See the Pen JRYjRX by nanati (@nanati) on CodePen.

05. 텍스트를 칼럼으로 나눔(Split the text into columns)

See the Pen BLoakP by nanati (@nanati) on CodePen.

입력된 한글은 무작위로 관련없는 단어를 모아서 더미를 만들어주는 사이트에서 생성하였습니다. 당연히 말도 안되는 문장이 탄생합니다. 샘플사이트를 만들 때 유용하겠네요^^

06. 테이블 폭을 글자수에 맞춰 자동조절

See the Pen qaOBrm by nanati (@nanati) on CodePen.

white-space: nowrap;을 적용하면 글자수가 많은 제목에 맞춰 테이블 폭이 자동으로 조절됩니다.

07. 첫 글자만 폰트사이즈 키우기

See the Pen yaYLGy by nanati (@nanati) on CodePen.

소설이나 잡지 등에 자주 보이는 첫 글자만 크게 표현한 모습입니다. 또한 첫 글자만 폰트를 변경할 수도 있습니다. 여러가지로 적용해 보세요^^

08. 글자(텍스트)를 뿌옇게(blur)

See the Pen PGPovX by nanati (@nanati) on CodePen.

09. 선택 한 input 강조하기

See the Pen 선택 한 input 강조하기 by nanati (@nanati) on CodePen.

10. 크로스브라우징 투명도설정

See the Pen 크로스브라우징 투명도설정 by nanati (@nanati) on CodePen.

11. 박스 요소 안팎에 dropshadow 효과

See the Pen 박스 요소 안팎에 dropshadow 효과 by nanati (@nanati) on CodePen.

※ box-shadow에는 RGB컬러를 적용하는 것도 가능하기 때문에, 좀 더 상세한 설정이 가능합니다.

12. 크로스브라우징 Min-Height

See the Pen 크로스브라우징 Min-Height by nanati (@nanati) on CodePen.

특히 IE에서 다른 방법으로 적용이 잘 안될 때 테스트 해볼 수 있는 테크닉입니다.

13. footer 고정시키기

See the Pen footer 고정시키기 by nanati (@nanati) on CodePen.

요소의 높이와 관계 없이 항상 브라우저의 맨 아래에 고정되는 footer.

14. Clearfix의 CSS핵

기본적인 clearfix핵에 추가로 커스터마이징 하는 방법입니다.

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

15. 클릭 요소에 포인터커서 표시하기

클릭할 수 있는 요소인데 브라우저상에서 포인터커서가 표시되지 않을 때 처리할 수 있는 방법입니다. 클래스명 「 .pointer」를 작성해두고 적용하고 싶은 요소에 추가하면 되겠습니다.

a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer {
       cursor: pointer;
}

16. iPad의 세로, 가로 보기에서 각각 스타일링하기

See the Pen iPad의 세로, 가로 모드에서 각각 스타일링하기 by nanati (@nanati) on CodePen.

iPad에서 확인 해 보면, 가로・세로 보기로 봤을 때 특정의 요소만 표시됩니다.

17. 각종 디바이스에 대응하는 미디어쿼리

/* 스마트폰 (가로・세로) ----------- */
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* 스마트폰 (가로용) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/*스마트폰 (세로용) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads （가로・세로) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (가로용) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (세로용) ----------- */
@media only screen
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* 데스크톱 ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* 큰 사이즈의 스크린 ----------- */
@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 */
}

18. 에릭 마이어의 리셋 css

그대로 사용할 수도 있지만 각각의 상황에 맞게 수정하여 사용하세요^^

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol, ul {
    list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

19. 멀티 보더(보더를 여러줄로) 설정

See the Pen 멀티 보더(보더를 여러줄로) 설정 by nanati (@nanati) on CodePen.

padding용으로 충분한 공간이 확보되어 있는지 확인합시다.

20. IE에서 Texarea의 스크롤바를 삭제

※ Internet Explorer에서 확인하세요.

See the Pen IE에서 Texarea의 스크롤바를 삭제 by nanati (@nanati) on CodePen.

21. 인용글 심플하게 스타일링하기

See the Pen 인용글 심플하게 스타일링하기 by nanati (@nanati) on CodePen.

22. 웹(Web)폰트 불러오기

@font-face {
    font-family: GraublauWeb;
    src: url("파일이 있는 위치/GraublauWeb.otf") format("opentype");
}
 
@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("파일이 있는 위치/GraublauWebBold.otf") format("opentype");
}

h1 {
    font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif;
}

23. 글자(텍스트)의 각도를 변경하여 디자인하기

See the Pen 글자(텍스트)의 각도를 변경하여 디자인하기 by nanati (@nanati) on CodePen.

날짜를 달력풍으로 스타일링할 때 유용한 테크닉입니다.

24. 배경만 투명도 조절하기

표시되는 글자(텍스트)에는 영향을 주지 않도록 배경의 불투명도만을 조절합니다.

See the Pen 배경만 투명도 조절하기 by nanati (@nanati) on CodePen.

25. 가로 폭의 사이즈가 불명한 div요소 중앙정렬

See the Pen 가로 폭의 사이즈가 불명한 div요소 중앙정렬 by nanati (@nanati) on CodePen.

width 사이즈를 알 수 없는 div요소의 내용을 중앙 정렬하는 테크닉. margin:0 auto;과 함께 기억해 두면 좋겠네요.

26. 파일의 종류에 따라 링크스타일을 변경

일반 링크와 메일, 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;
}

27. 글자(텍스트)의 선택범위(드래그)를 스타일링

선택한 글자(텍스트)의 배경색(또는 글자색)을 변경할 수 있습니다. 텍스트를 드래그 해보세요.

See the Pen 글자(텍스트)의 선택범위(드래그)를 스타일링 by nanati (@nanati) on CodePen.

28. 드롭캡(drop cap) 설정

See the Pen 드롭캡(drop cap) 설정 by nanati (@nanati) on CodePen.

첫 글자만 크게 하거나, 폰트를 변경할 수 있습니다.