어쩌다 블로그

흐르는 글자 애니메이션을 marquee라고 한다. 굳이 애니메이션을 넣지 않아도 된다. css로만 구현하는게 생각보다 가볍다. 물론... 옛날에 유행했던거라 더 이상 쓰지 않을 것 같지만 메모만 하기.. 포인트는 같은 텍스트를 두 번 넣고 하나의 텍스트가 width:100% 차지 하게 하는 것 @keyframes marquee { 0% { left: 0; } 100% { left: -100%; } }​ .history-top{ position:absolute; left:50%;top:0; width:1600px; height: 100%; margin-left:-800px; // outline:1px solid white; overflow: hidden; >div { display:flex; justify..

사이트에서 아이콘 이미지 등은 클릭시 컬러가 변경될 때도 있고 디자인 변경시 컬러가 변경될 때가 많다. 백터 이미지만 있으면 이런 변경사항에 대응해 css로 컬러 변경이 가능함. (백그라운드 이미지 필터를 사용해도 될 것 같지만 특정 컬러로의 변경은 불가능하다) mask-image에 svg 이미지 경로를 연결하고 background-color로 컬러 마스크를 씌우면 됨 -webkit-mask-image:url(/static/img/arrdn_mn.svg/); mask-image:url(/static/img/arrdn_mn.svg/); -webkit-mask-size: 9px; mask-size: 9px; background-color:$txtColor; 사이즈도 조정가능하고 svg라 변형도 간단해서 유용..

react checkbox 사용시 사이트에 맞게 내부 css 를 변경해야 할 때가 있다. 기본 제공 style을 공식 사이트에서 가져왔더니 내부 아이콘 이미지가 svg였다. 컬러를 변경하려고 보니 컬러 코드가 신기하게 되어 있어서 찾기 어려웠는데 fill= %23ffffff 이런 식으로 코드가 작성되어 있으니 뒤에 부분만 바꾸면 된다 %23은 크롬에서 #과 같다. '&:before': { display: 'block', width: 11, height: 11, backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + " fill..

a{ text-decoration:none; font-style:none; cursor:pointer; &:visited , &:hover, &:active, &:focus { text-decoration:none; font-style:none; } &:hover{ text-decoration:underline; } } 반응형 구문 작성하기 //반응형 (13인치 일반 피씨 사이즈) @mixin for-desktop-up { @media (max-width: 1280px) { @content; } } //태블릿, 모바일 (default) @mixin for-phone-only { //큰 사이즈 태블릿 @media (min-width: 768px) and (max-width: 1024px){ @content..