CSS3

CSS3 기초 – border-radius

border-radius 모서리를 둥글게 해주는 속성입니다. 아래와 같이 사용하면 됩니다. <style> .round-box { width: 100px; height: 100px; background-color: blue; border-radius: 10px; } </style> <div class="round-box"></div> border-radius 를 사용하면 위와 같이 모서리가 둥근 엘리먼트를 만들 수 있습니다. border-radius: 10px; 로 했기 때문에 둥근 모서리의 반지름이 10px 이 됩니다. border-radius 를 사용하면 원을 만들 수도 있습니다. 아래와 같이 하면 됩니다. <style> .round-box2 { wid... »

CSS3 기초 – Prefix

CSS3 에서 prefix 란 브라우저 벤더(제조사)에 따른 접두사를 의미합니다. 아래와 같은 CSS 코드를 보신 적이 있으실 것입니다. .box { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 모서리를 둥글게 하는 CSS 속성인 border-radius 를 사용하기 위해서 -webkit-border-radius, -moz-border-radius, border-radius 이렇게 세 번 값을 정해주고 있습니다. 공식적인 속성명은 border-radius 하나 입니다. (width, background 같은 CSS 공식 속성명) 그런데 border-radius 한 번만 정의하지 않고 -webkit-border-radiu... »

Icon Fonts

Icon Fonts 는 텍스트를 사용해서 아이콘을 표시할 수 있게 해주는 웹폰트들입니다. 예를 들어, 어떤 icon font 의 폰트이름이 ‘iconfont’ 라면, <span style=”font-family:iconfont;”>a</span> 이렇게 하면 a 라는 글자대신 기어 모양의 아이콘이 화면에 출력되는, 그런 웹폰트 들입니다. Icon Fonts are Awesome http://css-tricks.com/examples/IconFont/ Foundation Icon Fonts http://www.zurb.com/playground/foundation-icons Font Awesome http://fortawesome.github.c... »

CSS Arrow Please – CSS로 말풍선 화살표 만들기

CSS Arrow Please http://cssarrowplease.com/ 말풍선 화살표를 만들어 주는 CSS 코드를 자동으로 생성할 수 있는 사이트입니다. 화살표가 있는 말풍선을 직접 만들때에는 이 강좌 Pure CSS Tool Tips Revisited 도 참고할 수 있습니다. »

CSS3 Pictogram Button

CSS3 Pictogram Button http://www.webstuffshare.com/2012/05/css3-pictogram-button/ 예쁜 CSS3 버튼들입니다. »

Page 4 of 7«23456»