Web/CSS 썸네일형 리스트형 css :before, :after 가상태그의 활용 점점 모바일과 반응형 사이트의 빈도가 많아지면서 가상태그를 사용하게 되는 경우가 많아졌습니다. 아래와 같이 간단하게 마크업을 했을 경우에 1welcome to designsharpcs css로 :before 가상태그를 넣어줍니다. 12345p:before { content: "hi bro! "; font-weight: bold; font-style: italic;}cs 그럼 아래와 같은 결과화면을 볼 수 있습니다~ 이번에는 :before 가상태그를 이용해 아이콘을 한번 넣어보겠습니다~ 123456789p:before { content: ""; display: block; background: url("http://icons.iconarchive.com/icons/iconsmind/outline/128/A.. 더보기 클래스 스타일을 일괄 수정하기 편리한 팁! 같은 스타일을 가진 요소를 묶어서 스타일을 줄때 사용하는 방법입니다. 여러 요소에 동일한 클래스를 주어서도 가능하지만 하나의 클래스로도 여러 스타일을 줄 수 있는 장점이 있는데요, 예를 들어 event-1, event-2, event-3 처럼 여러 요소에 해당 클래스를 주었을 때 event 라는 텍스트가 중복이 됩니다. 여기서 event라는 중복되는 클래스명을 아래처럼 스타일을 주어 사용하면 됩니다. 끝. [class|="중복클래스명"] {position:relative;padding:0;margin:0} 더보기 CSS3 애니메이션을 편하게 적용할 수 있도록 도와주는 Animate.css CSS3 애니메이션 모듈화 파일을 제공해 주는 사이트입니다. 애니메이션 적용을 위해 매번 css파일을 복잡하게 건들지 않고 클래스만 삽입시켜 간단하게 애니메이션 효과를 볼 수 있다는 장점이 있겠습니다. http://daneden.github.io/animate.css/ 더보기 ie9 이하에서 css3 transition 사용하기 css3 transition은 ie10이상의 환경에서만 구동되도록 되어있습니다. ie9이하에서 사용할 수 없을까 하는 생각으로 검색해보니 역시나 jquery 를 활용한 방법이 있었네요~ 사이트 주소는 아래와 같습니다. http://louisremi.github.io/jquery.transition.js/test/index.html http://playground.benbarnett.net/jquery-animate-enhanced/ 더보기 Sass 프로젝트를 위한 아키텍처 웹서핑 중 웹액츄얼리 블로그에서 sass에 관한 글을 보았습니다.그 외에도 웹작업에 도움이 되는 글이 많아서 즐겨찾기 고고~ http://bit.ly/1tcTjto 더보기 background 에서 이미지를 두개 이상 사용할 때 css를 이용하여 백그라운드에 이미지를 두개 이상 구현해야 할 경우가 있습니다. 아래의 이미지처럼 풀과 하늘이 있는 전경 이미지와 양 이미지를 넣고자 한다면요~ http://caniuse.com/#feat=multibackgrounds 하지만 ie8이하에서는 보이질 않습니다... ie9부터 지원을 합니다... http://caniuse.com/#feat=multibackgrounds 더보기 브라우저별 설정 브라우저별 명칭 - webkit / safari, chrome - o / opera - moz / firefox - ms / explorer -webkit-tap-highlight-color포커스가 될 떼의 색상을 결정한다. 아이폰에서는 사각형 박스형태로 표시되며 색상, 알파값이 제대로 적용이 된다. 안드로이드에서는 알파값이 0이 아니라면 두꺼운 주황색테두리로 표시가 된다. 사용예) -webkit-tap-highlight-color:rgba(255,255,255,255) 처럼 사용할 수 있다. -webkit-text-size-adjust:none;텍스트 비율을 조정한다. 속성 : auto(기본값) | none -webkit-border-radius:2px;인풋 요소의 라운딩을 조절 -webkit-appe.. 더보기 box-sizing ??? 이전부터 해오던 스타일도 있고, 크로스브라우징 때문에 사용하지 못했던 css가 바로 box-sizing 입니다. 보통 width값을 정해놓아도 padding이나 border값에 의해 너비값이 변경되는 구조였다면, box-sizing을 지정하면 padding과 border의 영향을 받지 않고 너비를 고정시킬 수 있습니다. 해당 css는 IE8 이상부터 지원됩니다. 1 2 3 4 5 6 7 8 designsharp.tistory.com designsharp.tistory.com 1 2 3* {padding:0;margin:0} .cnt {width:400px;padding:30px;margin:20px;background:#f5f5f5;border:1px solid #d1d1d1} .cnt1 {padding.. 더보기 이전 1 2 다음
