본문 바로가기

퍼블리싱/CSS/CSS3

border-radius, box-shadow 를 IE8이하버전에 적용시키기 css3에서 가장 많이 사용하는 속성 중 하나가 바로 border-radius이다. 기존에는 이미지로 처리했던 방식을 css로 처리할 수 있으니 퍼블리셔입장에선 매우 간편한 속성이라고 할 수 있다. 하지만 이 속성은 IE 8 이하버전에서는 적용이 되지 않는다.그럴 때 사용하는 것이 바로, PIE라는 것인데,특정 파일을 업로드시키고 border-radius 속성쓰는 부분에 다음코드를 추가작성해주면 된다.behavior: url( "PIE.htc" );주의사항!1. position후에 작성할 경우 무시가 되기때문에, 해당속성을 가장 앞에 작성해줘야만 한다.2. url()의 PIE의 경로를 css파일이 아니라 html파일에 상대적인 주소여야한다. 파일 및 자세한 내용은 http://css3pie.com/ 에서.. 더보기
CSS3 transform 속성으로 배경색 변경하기 CSS3 transform 속성으로 배경색 변경하기 .btn { -moz-transition: background, 0.5s; -o-transition: background, 0.5s; -webkit-transition: background, 0.5s; transition: background, 0.5s; backgroud: #d1d1d1; color:#fff; } .btn:hover { background:#262626; } 더보기
CSS Reset @charset "utf-8"; /* ================================================================================= * @Author : * @File Name : * @Description : Style Sheet * @Version : * @Create Date : * @Update Date : * @History : * ================================================================================= */ /* Reset Document */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, f.. 더보기
:not(셀렉터) 사용하기 매우 유용한 가상클래스. 괄호 안의 선택자에 매치되지 않는 요소를 선택하게 됨예) div:not(.mid) 우선 모든 div를 선택한 후 클래스가 mid인 것을 제외한 후 해당 스타일을 적용함 여러개의 : not 가상클래스를 함께 묶을수 있다 예) h2:not(header > h2):not(.logo) header안에 있는 h2와 logo라는 클래스가 지정된 h2를 제외한 페이지의 모든 h2에 해당 스타일 적용 - 출처 : HTML5&CSS3 실전에서는 이렇게 쓴다! 더보기
background에만 opacity적용하기 나만 그런지 모르겠지만, 특정 영역에 투명도를 줄때 요소 css에 opacity속성으로 주는 편이다. 그러다보니 그 요소 안에 들어있는 모든 요소들에 투명도가 적용되어, 또 다시 투명도가 필요없는 요소에 opacity나 z-index를 적용시키는 불필요한 작업을 하게된다. 그러다가 background속성에서 투명도를 조절할 수 없을까하는 생각을 갖게되었고, 바로 구글링을 하였다. 그런데...역시...가능했다. /* header {background-color:rgba(R, G, B, Opacity);} */ header {background-color:rgba(170, 204, 203, 0.9);} RGB값으로 넣어주고, 뒤에 opacity 값을 넣어주면 해결, 물론 이것도 IE 9이상 버전에서만 적용된.. 더보기

티스토리툴바