728x90 반응형 CSS127 [CSS] input type=file CSS적용하기 업로드 input[type="file"]의 경우 브라우저마다 기본 디자인이 다르다. 브라우저에 상관없이 같은화면을 보여주기위해 또는 디자인 적용을 위해서는 input[type="file"]을 숨기고, label을 이용해 버튼을 만들고, input을 하나 더 만들어서 파일경로를 출력해서 선택한 내용을 보여주도록 변경해 보았다. 선택한 내용을 보여주는 것은 input[type="file"]에 change 이벤트를 등록해 값이 변하면 그것을 읽어와 이름을 출력해 주는 방식으로 구현하였다. $(document).ready(function(){ var fileTarget = $('#file'); fileTarget.on('change', function(){ // 값이 변경되면 var cur=$(".filebox.. 2019. 5. 16. [CSS]input 태그 placeholder 스타일 적용하기/ caret - input 클릭시 생기는 커서 input 필드의 placeholder에 css를 적용할 수 있다 (font / color / background / opacity / text-indent / line-height / vertical-align / text-decoration / word-spacing / background ) ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ } ::-moz-placeholder { /* Firefox 19+ */ } :-ms-input-placeholder { /* IE 10+ */ } :-moz-placeholder { /* Firefox 18- */ } input 필드에 placehoder-shown input:placeholder-shown {.. 2019. 5. 16. [CSS]이미지에 포토샵 처럼 filter 씌우기 아래와 같이 다양한 필터를 적용할 수 있고, 하나에 여러개의 필터를 적용시키는 것도 가능하다 .filter1{filter:blur(5px);} .filter2{filter:brightness(0.4);} .filter3{filter:contrast(200%)} .filter4{filter:drop-shadow(16px 16px 20px blue);} .filter5{filter:grayscale(50%)} .filter6{filter:hue-rotate(90deg)} .filter7{filter:invert(75%)} .filter8{filter: opacity(25%)} .filter9{filter: saturate(30%)} .filter10{filter:sepia(60%)} .filter11{fil.. 2019. 5. 15. [CSS]transform(3D) 에서 함께 사용할 속성 perspective(원근법)과 backface-visibility(뒷면가시성) perspective perspective를 사용했을때와 안했을 때의 차이를 마우스를 올려 확인해보세요. See the Pen css-transform3d-translate by gahyun (@gahyun) on CodePen. perspective를 사용하지 않으면 translateZ의 변화를 느낄수 없습니다. (translateZ 변화없을 때 perspective 를 사용) 그러나 perspective를 사용해 원근감을 주면 차이를 느낄 수 있습니다. 다른 transform 속성에서 확인해 보세요 See the Pen css-transform3d by gahyun (@gahyun) on CodePen. 좀더 자세한 내용은 아래 링크 참고 https://developer.mozilla.org/ko/d.. 2019. 5. 15. 이전 1 ··· 20 21 22 23 24 25 26 ··· 32 다음 728x90 반응형