첫 번째. 깜빡이는 글자(Text) .blinkText { -webkit-animation:blink .2s ease-in-out infinite alternate; /* Safari 4+ */ -moz-animation:blink .2s ease-in-out infinite alternate; /* Fx 5+ */ animation:blink .2s ease-in-out infinite alternate; /* IE 10+, Fx 29+ */ } @-webkit-keyframes blink { 0% {opacity:0} 100% {opacity:1} } @-moz-keyframes blink { 0% {opacity:0} 100% {opacity:1} } @keyframes blink { 0% {opa..
항상 html 작업을 하다보면, hr의 css를 고민했었다.고민하다 그냥 빼버리는 경우가 거의 다반사....이제는 제대로 해보자!! 검색하면 많은 내용들이 나오지만, 마음에는 드는 한곳을 찾았다.심플하게 ㅋㅋㅋㅋ 난 심플하게 좋아요~일단 소스....hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gradient(left, #ccc, #333, #ccc); backgrou..
사용방법 ★안드로메다 탱이별★ ★안드로메다 탱이별★ ★안드로메다 탱이별★ ★안드로메다 탱이별★ ★안드로메다 탱이별★ ★안드로메다 탱이별★ 결과물 ★안드로메다 탱이별★ ★안드로메다 탱이별★ ★안드로메다 탱이별★ ★안드로메다 탱이별★ ★안드로메다 탱이별★ ★안드로메다 탱이별★ Browser Support
단어별 잘라 개행하기( br 태그효과) style="word-break:keep-all" 특수문자를 제외하고 강제 줄바꿈을 한다. style="word-break:break-all" 특수문자를 포함하고 강제 줄바꿈을 한다. style="word-break:break-word" width를 지정하였지만 개행이 되지 않기를 원할때 사용. style="word-break:nowrap" 텍스트가 한글일 경우 띄워쓰기 기준으로 개행된다. style="word-break:keep-all" 출처 :: http://mhub.kr/4
CSS 속성 중 !important 선언 * !important 선언에 대해서 !important(!중요도) 선언은 모든 style 규칙에 우선하며 inline style, id selector, class selector들로같은 style 속성을 선언했더라도 그 값을 모두 무시하여 !important로 선언한 속성값을 적용시킵니다.이러한 !important 선언을 하는 이유는 다양하겠지만 주로 인쇄 즉 프린트 적용을 위해 많이 사용된다고 합니다. 웹페이지를 모니터로 볼때는 글씨 색이 여러가지면 보기 좋을지 모르지만 프린터로 출력하게 되면블루계통이나 그레이계통의 글씨들과 같이 흐린 색상의 글씨는 희미하게 출력되어 보기가 불편하게 됩니다.이런 경우 글씨를 검정색으로 바꾸기 위해 selector를 하나하나 ..
[CSS] Position - static, fixed, relative, absolute AAABBB AAABBB 출처 - http://www.w3schools.com/css/css_positioning.asp
참고사이트 :: http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/ CSS 작성으로 제어하기/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @med..
