Tag CSS
[요약]추가적인 CSS코드 냄새에 좋은 내용이 있어서 사람들이 많이 알았으면 해서 퍼왔다. @extend mixin보다 성능이 떨어진다. CSS 성능이란 건 대체로 용량을 말하는데, 용량이 작아야 빨리 다운로드할 수 있기 때문이다. gzip 압축시 mixin은 완전한 반복이므로 용량이 확 줄어드는 반면, extend는 완전한 반복이… Continue Reading →
Sass를 사용하여 css로 컴파일 하여 출력 할 때 4가지 스타일 중 하나를 선택할 수 있다. 스타일 nested expanded compact compressed 아래 Sass로 네가지 스타일로 변환을 해보겠다. (확장자는 본인이 편한걸로 하면 된다.) Scss Sass Scss Syntax ul { font-family: Helvetica,… Continue Reading →
반응형 웹(Responsive Web) 디바이스 해상도에 따라 웹페이지의 크기가 자동으로 변경되는 것을 말한다. CSS 2.1부터 미디어타입으로 단말기 종류에따라 각각 다른 스타일을 적용이 가능해졌다. 디바이스별 해상도 크기는 다음거 같다. @media (max-width:1199px) { /* Style */ } @media (min-width: 992px) and (max-width: 1199px)… Continue Reading →
사이트마다 CSS 속성들을 얼마나 사용했는지를 알 수 있는 프로그램이 있다. 크롬에 확장프로그램을 받아서 볼 수 있다. 사용 예 테스트 사이트로 우리나라에서 많이 사용하는 포털중에 하나 네이버를 예를 들겠다. 네이버에서 이 프로그램을 실행했을 경우 나오는 화면이다. css를 불러오는것을 체크를 하고 START… Continue Reading →
CSS 속성에도 순서를 지켜주면 참 좋다. 되고 말고 CSS를 입력하는 사람들이 있는데… 협업을 할 때는 절대적으로 필요한 순서이며 대체적으로 이렇게 해주면 좋다는 것을 가지고 있다. 필자가 몇군데서 본 속성 순서를 공유하겠다. 여기서 보면 HTML, CSS속성 순서에 대해 설명이 잘되어있고, CSS… Continue Reading →
속성:값 작성시에 속성: 값으로 나올때가 있다. CSS나 SASS에서 나오는 현상여간 신경쓰이고 귀찮은게 아니다. Sublime Text css_completions.py 수정하기 Ctrl+shift+p를 눌러 ‘PackageResourceViewer’라는 플러그인을 설치하자. 이 플러그인을 이용하지 않을 경우 폴더로 가서 직접 수정해야한다. 단축키 prv 를 누르면 PackageResourceViewer:Open Resource 나오는데 이거 선택하면… Continue Reading →
Gulp 환경에서 CSS파일에 처리 적용할 업무는 문법 검사, 코드 병합, 압축 과정으로 필요한 모듈은 gulp-csslint, gulp-concat-css, gulp-uglifycss 이다. 설치하기 npm install –save-dev gulp-csslint gulp-concat-css gulp-uglifycss 설정하기 var csslint = require(‘gulp-csslint’); var concatcss = require(‘gulp-concat-css’); var uglifycss = require(‘gulp-uglifycss’); /** *… Continue Reading →
Ruby 설치하기 루비 인스톨러(Ruby Installer) 설치 루비인스톨러 설치 파일을 다운받아야 하기 때문에 루비인스톨러 다운 페이지로 가보자. 루비인스톨러 파일 다운로드 하기 버전은 최신버전으로 다운받으면 된다. 자기 OS환경따라 받으면 되지만 32/64비트 상관없이 맨 위에 것을 설치 해도 상관없다. 루비 인스톨러 설치하기 언어는… Continue Reading →
레이어 중앙 정렬 레이어 중앙 정렬 하는 방법 3가지 정도 추천을 할까 합니다. 1.Margin을 이용하는 방법 1-1.Magin 반값을 사용하는 방법 장점: 자주 쓰이는 방법이고 모든 브라우저에서 사용이 가능하다. 단점: 레이어의 사이즈가 유동인 경우 활용하기가 어렵다. 1-2.Margin auto값으로 하는 방법 장점:… Continue Reading →
한줄 말줄임 { text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; } 여러줄 말줄임 { max-height:54px; display:block; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; } p { white-space: nowrap; width: 100%; overflow: hidden; /* “overflow” value must be different from “visible” */ text-overflow: ellipsis; } … Continue Reading →
sitepoint.com에 올라온12 Little-Known CSS Facts라는 글을 간단히 요약한 내용입니다. 원본 글에 들어가면 적용된 화면을 실시간으로 볼 수도 있으므로 원본 글을 읽어볼 것을 추천합니다. 여기서는 간단하게 요약만 해보겠습니다. 1. color는 글자에만 적용되는 게 아니다. – 이미지가 없을 때의 대체 텍스트 색상… Continue Reading →
고정값이 없을때 고정값을 넣을때.. textarea에 width:100%를 줬을때 영역 벗어날 경우를 볼수 있다. textarea의 width 값은 100% + padding + borders 일 것이다. 그래서 padding과 border값을 빼줘야 한다. class로 해서 주게되면 다음과 같다.. <!doctype html> <html lang=”en”> <head> <style> label {… Continue Reading →
CSS comments snippets for Sublime Text. 코드에서 주석은 매우 중요하다. Package Control에서 CSS Comments를 검색해서 다운받으면 된다. 만약 Package Control이 없다면 다운을 받아서 카피를 해야한다. Basic Comment trigger: c-basic⇥ /* Basic comment */ Long Comment trigger: c-long⇥ /* * Long… Continue Reading →
아이폰 사파리에서 화면 회전시 폰트 사이즈 변경 되는 것이 있었다. 테스트 결과 <div>, <p>, <li>태그 등 다양하게 반응이 일어나는 것을 확인했다.사이즈 변경이 안되는 것도 있었다. 그래서 차이점이 뭘까 테스트 결과 높이값이 있는 곳에서는 사이즈 변경이 안되지만 높이값이 없는 곳에서는 사이즈… Continue Reading →
CSS .gradient-top-to-bottom{ width: 300px; padding: 20px; border-top: 5px solid #000; border-bottom: 5px solid #ccc; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(#ccc)); background-image: -webkit-linear-gradient(#000, #ccc); background-image: -moz-linear-gradient(#000, #ccc), -moz-linear-gradient(#000, #ccc); background-image: -o-linear-gradient(#000, #ccc), -o-linear-gradient(#000, #ccc); background-image: linear-gradient(#000, #ccc), linear-gradient(#000, #ccc);… Continue Reading →
모든 웹 브라우저에 동일한 스타일을 적용시키려면 모든 CSS속성을 초기화를 시켜야한다. 총을 쏘기 위해서 0점 사격을 하듯이 말이다. normalize.css 공식사이트 reset.css 보통 넣기도 하고 basic.css로 넣기도 한다. normalize 3.0.0 normalize 4.0.0 3.0.0버전은 옛날버전이고, 4.0.0이 요즘 나온 버전이다. /*! normalize.css v4.0.0 |… Continue Reading →
@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 */ } … Fonts Formats… Continue Reading →
CSS sprites는 페이지의 첫 로딩 속도를 줄여주는 여러 방법중, 서버로의 요청 횟수를 최소화 하는 것은 최적화요소 중에서도 중요하며, 실제 적용하기에도 아주 손쉬운 방법중에 하나이다. 아이콘, 버튼같은 자주 쓰는 이미지들을 쓸 때마다 여러 이미지들을 불러오는 것이 아니라, 한 이미지파일로 통합한 후… Continue Reading →
IE 브라우저 IE6 ~ IE10 브라우저 호환모드를 위한 것이다. #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;… Continue Reading →
웹접근성 데이터 테이블 지침서 표의 제목셀과 내용셀을 올바르게 짝짓기 표의 제목셀과 내용 셀은 짝짓기가 바르게 되어야 표를 표시할 수 없는 상황에서 표를 펼치거나 화면 낭독 프로그램 등에서 표를 순서대로 읽어줄 때에도 표가 제공하고자 하는 정보를 이해할 수 있음. 짝짓는 방법… Continue Reading →
CSS 아웃라인 제거 방법 이렇게 하면 IE6까지 된다. div { outline:none;selector-dummy:expression(this.hideFocus=true) }
CSS Max Height (IE6에서 max-height 값 적용시키기) div{ _height: expression( this.scrollHeight > 332 ? “333px” : “auto” ); /* sets max-height for IE6 */ max-height: 333px; /* sets max-height value for all standards-compliant browsers */ overflow:scroll; }
1. Hexadecimal Colors Hex 색상 값은 모든 주요 브라우저에서 지원된다. Hex 컬러는 #RRGGBB로 명시한다. – RR(Red – 빨강), GG(Green – 녹색), (Blue- 파랑) 16진수 색상으로 명시한다.모든 값은 0 ~ FF 사이여야 한다. 예를 들면, #0000ff 값은 파랑색으로 렌더링 된다. 그… Continue Reading →
IE6 마우스 롤오버시 혹은 클릭이벤트로 이미지를 바꾼다거나 백그라운드 포지션이 변경이 될때 깜빡거리는 현상이 일어나는데.. CSS 나 javascript로 방지할 수 있다. CSS <style type=”text/css”> html { filter: expression(document.execCommand(“BackgroundImageCache”, false, true));} </style> Javascript *추천 <script type=”text/javascript”> try {document.execCommand(“BackgroundImageCache”,false,true);}catch(e){} </script>
text-overflow:ellipsis 속성 (제목이 길 경우 … 으로 표시) IE6,7 IE8,9 Chrome Safari FireFox Opera text-overflow:ellipsis O O O O O (Ver. 7 부터 지원) O 말줄임표 정렬 위치 (서체별) IE6,7 IE8,9 Chrome Safari FireFox Opera 굴림,Gulim 하단 중앙 중앙 중앙… Continue Reading →