내가 자꾸 까먹어서 쓰는 개발 이야기/HTML, CSS 검색 결과
14 개의 검색 결과가 있습니다.
내가 자꾸 까먹어서 쓰는 개발 이야기/HTML, CSS

Vuetify 처럼 BS form-group 에서 placeholder 애니메이션 주기

.form-group { position: relative; margin-bottom: 1.5rem; } .form-control-placeholder { position: absolute; top: 0; padding: 7px 0 0 13px; transition: all 200ms; opacity: 0.5; color: red; } .form-control:focus + .form-control-placeholder, .form-control:valid + .form-control-placeholder { font-size: 75%; transform: translate3d(0, -100%, 0); opacity: 1; } 매우 잘 된다. 출처: stackoverflow.com/a/58736840 H..

2020. 7. 14. 10:38
내가 자꾸 까먹어서 쓰는 개발 이야기/HTML, CSS

css에서 고정폭+가변폭 div

예를들어 이런 구조다. 이 상태에서, 1) .container는 부모 요소에서 상속 받은 너비의 100%.2) .left-child는 200px로 고정.3) .right-child는 그 나머지. 구글링 해보면 display:inline-block;을 써라, 200px와 100%로 하고 margin-left:200px; 를 줘라 등등이 나온다. 해결되지 않았다. 그러던 중 발견한 stackoverflow의 한 포스팅.. CSS3에는 함수가 있었다! calc() 함수를 이용하여 100%에서 200px를 빼주면 간단히 된다. 물론 sass나 less도 필요ㅇ벗다. 추가로 css3의 calc() 함수를 지원하는 브라우저는 아래 링크를 따라 가 보면 알 수 있다. http://techbug.tistory.com/..

2015. 2. 4. 16:35
내가 자꾸 까먹어서 쓰는 개발 이야기/HTML, CSS

IE8 이하 버전에 border-radius 적용하기

http://css3pie.com/download/ 이곳에서 다운받은 PIE.htc 파일을 서버에 업로드 한다. (/css/, /styles/ 등등 css 파일들이 있는 경로) 정의된 css 클래스 중 border-radius가 사용 된 클래스에 각각 한줄을 추가 해 준다. .box{ border:solid 1px #eeeeee; border-radius:10px; behavior:url(/css/PIE.htc); } 이제 IE8에서 곡선 스타일이 잘 표현된다.

2014. 2. 13. 20:03
내가 자꾸 까먹어서 쓰는 개발 이야기/HTML, CSS

[펌] IE 버젼별 CSS 핵

IE 버젼별 CSS 핵 #element { color: blue;} #element{*color: white; /* IE6+7 용 */}#element{_color: red; /* IE6 용 */ }#element{color: green \0/IE8+9; /* IE8+9 용 */}:root #element{color: pink \0/IE9; /* IE9 용 */} 출처: http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx @media all and (min-width:0) { #element { color:pink \0/; }} 출처: http://stackoverflow.com/questions/3890740/are-there..

2013. 11. 26. 17:07
내가 자꾸 까먹어서 쓰는 개발 이야기/HTML, CSS

IE input 객체에서 focus/blur 시 텍스트가 오르락 내리락 할때

당연하지만 역시 IE가 문제다. input 객체에 아무 속성을 안줬을 때 주로 발견할 수 있는 문제. css 클래스를 주거나, 혹은 객체에 직접 style 속성을 주어 해결한다. 출처 : http://sjpison.tistory.com/140 , http://blog.naver.com/clxm300/10163191355

2013. 7. 19. 14:27
내가 자꾸 까먹어서 쓰는 개발 이야기/HTML, CSS

JetBrain(phpStorm 등)에서 Zencoding 사용하기

문법은 동일하게 사용하는듯 하다. ex) table>tr*3>td#td_$*2 와 같이 타이핑 한 후 줄 맨 끝에서 tab키(editplus의 경우 ctrl+E)를 누르면 zencoding으로 아래와 같이 코드가 완성된다. 출처 : http://www.jetbrains.com/phpstorm/webhelp/zen-coding-support.html ZenCoding에 관한 내용 : http://code.google.com/p/zen-coding/

2013. 2. 21. 11:10