'WEB/CSS' 카테고리의 글 목록 (2 Page)

유지보수 , 확장성을 고려한 CSS

className을 지을때는 camelCase, under_score 보다는 hypen(-)을 사용하자모듈화를 생각하자id 보다는 className을 활용하자태그선택자의 사용을 지양하자짧고 단순한 네이밍을 지양하자탐색레벨을 낮고 단순하게 유지하자환경에 대한 변경자로 root node를 활용하자상태값 제어CSS 속성은 한줄에 하나만 선언한다 출처 https://windtale.net/blog/maintainable-expandable-front-end-web-strategy/

WEB/CSS 2017. 3. 29. 10:27

흑백처리

.grayscale{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:url(grayscale.svg); /* Firefox 4+*/filter:gray;/*IE 6-9*/} Download ZIP (with .svg)

WEB/CSS 2017. 3. 16. 15:38

nth-child

http://nthmaster.com/

WEB/CSS 2017. 3. 10. 13:51

text-indent + padding

* 가나다마바사 아자차카타하* 가나다마바사 아자차카타하 일정한 들여쓰기가 필요할때 사용하는 CSS ul>li{padding-left:10px;text-indent:-10px;}

WEB/CSS 2017. 3. 7. 11:00

Font Awesome을 이용한 css폰트 <i>태그 아이콘 만들기

Font Awesome을 사용해야 하는 이유 이 블로그에서는 Font Awesome 폰트를 사용하고 있습니다. 모바일 환경에서 표시되는 좌측 하단의 사이드바 아이콘과 본문 하단에 출력되는 같은 카테고리 글 목록 아이콘에 Font Awesome이 사용되었습니다. Font Awesome을 사용하면 운영체제에서 기본적으로 표현할 수 없는 특수문자를 간단하게 만들 수 있다는 장점이 있습니다. 예를 들어, 의 말풍선 아이콘은 운영체제 기본 폰트 파일에서는 지원하지 않는 아이콘이기 때문에 이와 같은 아이콘을 만들기 위해서는 직접 포토샵과 같은 그래픽 편집 프로그램에서 새로운 아이콘을 만들어야 합니다. 하지만 Font Awesome에서는 공식적으로 지원하고 있는 아이콘이기 때문에 다음과 같은 방법을 사용하면 말풍선 ..

WEB/CSS 2017. 2. 9. 19:23

모를 수도 있는 CSS의 7가지 단위

https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

WEB/CSS 2017. 2. 7. 09:41

screen_out

overflow:hidden;display:block;position:absolute;left:-9999px;width:1px;height:1px;font-size:0;line-height:0;.hide{visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0;} .blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;}

WEB/CSS 2017. 1. 9. 14:52

[TIP]지정한 넓이보다 텍스트 내용이 넘칠때 ...으로 보이기

text-overflow:ellipsis;white-space:nowrap;overflow:hidden;

WEB/CSS 2017. 1. 4. 09:53

float해제->.clearfix

float해제할때 가상선택자인 :after를 .clearfix로 지정해두고 간단히 사용하기 /* Personal Reset */ .clearfix{ *zoom:1; }.clearfix:after{ content: ''; display: block; clear: both;}

WEB/CSS 2016. 12. 15. 16:42

ul, li 가운데 정렬

보통 가운데 정렬 할때 margin:0 auto; -> 가로크기를 고정으로 해야한다는 단점. 유동적으로 하고 싶을 때의 방법 text-align: center;display: inline-block; 사용 태그가 text-align 속성이 먹히는 이유-> inline-block 속성을 가진 태그이기 때문. 즉 text-align 은 텍스트와 inline-block 속성을 가진 태그들을 정렬. * 해결ul을 감싸는 wrap { text-align: center }ul { display: inline-block; } 출처 http://kkotkkio.tistory.com/37

WEB/CSS 2016. 12. 12. 16:54

webflower

WEB/CSS 검색 결과