개인공간

https://codepen.io/SampathParavasthu/pen/yrJKJa Intro text animation CSS text intro ... codepen.io

1. Animista https://animista.net/ Animista - On-Demand CSS Animations Library Animista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use. animista.net 이 사이트 같은 경우는 애니메이션의 다양한 효과를 눈으로 직접 확인 할수 있고 장점은 내가 원하는 효과를 바로 복사해서 쓸 수 있다는 점이다. 굉장히 다양한 효과들이 있어서 참고 해 보면 좋을 것같다. 1. 원하는 스타일을 선택한다. 2. 소스내보내기를 눌러주세요. 2. CSS..

content:attr(href); href의 링크를 가져와서 프린트시 URL을 출력해준다 (ctrl + p에서 확인가능하다) html css @media print { a[href]:after { content: ""; } } content:open-quote,no-close-quot,close-quote blockquote를 content로 표현가능하다. 따옴표(open-quote, close-quote) html 따옴표(open-quote, close-quote) css blockquote p { margin: 0; text-indent: 1em; quotes: "\201c" "\201d"; } blockquote p:first-of-type { text-indent: 0; } blockquote ..

counter-resetBROWSER SUPPORT (more…)IE8+FF1+SA3.1+OP9.2+CH2+FULLFULLFULLFULLFULL Album Year The Raging Wrath of the Easter Bunny 1986 Bowel of Chiley 1987 Goddammit I Love America 1988 OU818 1989 Mr. Bungle 1991 Disco Volante 1995 California 1999 html Album Year The Raging Wrath of the Easter Bunny 1986 Bowel of Chiley 1987 Goddammit I Love America 1988 OU818 1989 Mr. Bungle 1991 Disco Volante 1..

유효성체크가 되는형식이긴하나, placeholder 가 없으면 안되기때문에작업할때 placeholder 전체 사용여부를 체크후 사용할것! 플레이스홀더가 없는경우 : 플레이스홀더가 있는경우 : .inp170222_2{background-color:#ccc;border:1px solid #ddd;} .inp170222_2:not(:placeholder-shown) {background: #fff;border:1px solid #ccc;}

required="required" : required="required" : required="required" 없는경우 input에 required="required" 유효성검사 속성추가 input:valid 이용하여 스크립트가 아닌 input에 value가 있는것을 체크하여 css로만 input체크 처리 .inp{background-color:#fafafa !important;border:1px solid #e9e9e9 !important;} .inp:valid {background-color: #fff !important;} .inp:focus{border:1px solid blue !important;background:#def0ff !important;}

list_num 기본 list_num 기본 list_num 기본 list_num list_base list_num list_base list_num list_base list_num list_circle list_num list_circle list_num list_circle 자동 카운트로 ol 리스트 만들기 .ol.list_num{counter-reset:number 0;} .ol.list_num > li{position:relative;line-height:22px;} .ol.list_num > li:before{position:absolute;top:0;left:0;counter-increment:number;} .ol.list_base > li{padding-left:15px;} .ol.list..

@mediaonly screen and (-webkit-min-device-pixel-ratio: 1.5),only screen and (-webkit-min-device-pixel-ratio: 2),only screen and (min-device-pixel-ratio: 1.5),only screen and (min-device-pixel-ratio: 2) { //모바일 버전일때의 미디어 쿼리 }

이번에 font-face를 사용해서 홈페이지를 만들었는데 문제 발생을 하였다. 아래처럼 작업했더니 웹호스팅에서 적용을 못해주는거였다. 서버도 다 환경에 맞게 수정했는데도 안되었다. @font-face{ font-family:NanumBG; src:url(/front/com/font/NanumBarunGothic.eot); src:local(NanumBarunGothic), url(/front/com/font/NanumBarunGothic.woff) format('woff'); src:local(NanumBarunGothic), url(/front/com/font/NanumBarunGothic.ttf) format('truetype'); } [보완 : 아래처럼 써보길] @font-face{ font-fam..

display: box; A B .displayBox div { display: -webkit-box; height:200px; border: 5px solid black; } .displayBox #a {width: 30%; background-color: yellow;} .displayBox #b {width: 70%; background-color: skyblue;} display: box; A B box-orient 엘리먼트들이 배치되는 방향을 결정. A B box-orient 엘리먼트들이 배치되는 방향을 결정. A B .box-orient { display: -webkit-box; -webkit-box-orient: horizontal; /* -webkit-box-orient: vertical;..