web sprit

css로 투명도를 설정하는 방법과 그 밖의 유용한 Tip 정보를 알려드리기 위해 늦은 시간을 활용하여 끄적여(?) 보겠습니다. 일반적으로 저는 모를 사항 이었습니다만... 우리가 투명도를 주기 위해서는 CSS의 opacity라는 속성을 사용합니다.접근성을 고려하여 아래와 같은 순으로 작성합니다. 1234567.box{ -ms-filter:alpha(opacity=0); /* IE8 */ filter:alpha(opacity=0); /* IE5 ~ 7 */ opacity:0; /* IE9+, chrome4.0+, firefox2.0+, safari3.1+, opera9.0+ */} Colored by Color Scriptercs 하지만 위와 같이 작성하여 내가 원하는 곳만 투명하게 작업하기 위해선 불만족..

일반적으로 가운데 정렬은 width 값이 존재하고 margin값을 margin:0 auto;를 주어 정렬하곤 합니다.하지만 width 값이 가변적으로 변경될 수 있다면 어떻게 정렬해야 할까요? 방법은 있습니다!!! 크게 2가지 방법을 알려 드리겠습니다.1. display:table12345678 .center-box{display:table; margin:0 auto; padding:30px; background:red;} .center-box .item{background:yellow;} contentsColored by Color Scriptercsex) 화면 contents 2. display:inline-block12345678 .center-box2{text-align:center; backgr..

display 의 inline-block 속성을 사용할때 가끔 크로스브라우징에 문제가 발생하곤 합니다.지금부터 그런 문제들의 대한 해결방안을 설명해 드리겠습니다. IE6 ~ 7 문제익스플로서의 낮은 버전의 브라우저에서 생기는 문제로inline태그에 inline-block 속성을 사용 : 이상없음block태그에 inline-block 속성을 사용 : inline-block을 block 속성으로 인식하는 버그12/* 해결방법 */.className{*display:inline; *zoom:1;}cs FF2 문제display:-moz-inline-stack 을 사용하여 해결.(이것보다 더 의미에 맞는 속성은 display:-moz-inline-box 속성 이나 -moz-inline-box 속성을 사용할 경우 ..

가상요소인 before 와 after 선택자 입니다.:before는 선택자의 앞에 속성값을 설정할때 사용하고,:after는 선택자의 위에 속성값을 설정할때 사용합니다. 위 선택자의 사용 방법은 아래와 같습니다. css2에서 사용예시 div:before{}div:after{} css3에서 사용예시div::before{}div::after{} :와 ::차이::는 css3에서 가상클래스와 가상요소를 구분하기위해 도입 되었습니다. :와 ::브라우저 지원여부:before, :after는 ie8+, FF, chrome, opera+, safari4.0+ ::before, ::after는 ie9+, FF1.5(1.8)+, chrome, opera7+, safari4.0+ 사용방법:before, :after는 주로 c..

CSS의 outline 속성은 border 속성과 비슷한 방식으로 작성할 수 있습니다.outline은 border의 바깥 외곽선을 말하며 어느 부분을 두드러지게 보이기 위해 사용합니다.border와의 또다른 차이점은 border는 레이아웃의 넓이에 영향을 주고 구조가 흐트러질 수 있지만 outline은 레이아웃 구조에 관여되지 않습니다. 한번에 작성하는 예는 아래와 같습니다.outline:2px solid #000; outline 속성을 세분화하여 css를 나열한다면 아래와 같은 속성들을 사용할 수 있습니다.위에서 속성값들은 아래와 같은 값을 나타내고 있습니다. outline-color = #000ex) outline-color:#000; outline-style =solidex) outline-styl..

CSS3 에서 투명도를 주는 속성으로 opacity가 있다.일반적으로 값을 아래와 같이 주면 된다.opacity:0 ---->완전 투명opacity:0.5 ---->반 투명하지만 낮은 익스8에서 인식이 안되는 문제가 발생한다. 이럴때는 filter속성을 사용하여 투명도를 적용한다.아래와 같이 적용하자-ms-filter:alpha(opacity=0); filter:alpha(opacity=0); 그렇다면 css를 작성할때 위의 2가지를 한번에 작성하여 투명도를 주면 된다. Colored By Color Scripter™1 2 3 4 5 6 7 8 9 @charset "utf-8"; /* CSS Code */ opacity:0; /* CSS3 에서 투명도 */ -ms-filter:alpha(opacity=0..

Colored By Color Scripter™12345678910111213141516171819202122232425262728293031/*①*/@font-face { font-family: 'NanumBarunGothic'; font-style: normal; src: url('./font/NanumBarunGothic.eot'); src: url('./font/NanumBarunGothic.eot?#iefix') format('embedded-opentype'), url('./font/NanumBarunGothic.woff') format('woff'), url('./font/NanumBarunGothic.ttf') format('truetype');} /*②*/@font-face { font-..