어쩌다 블로그

흐르는 글자 애니메이션을 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..

css 에서 position:sticky; 하고 top:0;으로 화면 상단에 요소가 붙게 하는 거나 화면에서 절대위치로 버튼등을 넣는 것을 floating button 이나 floating header라고 하더라. 완성본은 이런 모양이다 이전 앵귤러 테이블을 쓸 때에는 ng data table 자체적으로 위 옆으로 붙는 기능이 있었지만 모바일에서 스크롤 값을 못 읽었고 리액트에서는 전부 하드코딩으로 구현을 하면서 그런 것에 대한 버그는 많이 줄었다. 계속 이 테이블 구현을 위한 디벨롭을 하면서 이전에도 API를 이용하기도 하고, 아예 API를 쓰지 않기도 했었는데 개발자 분이 UI를 찾고 찾아 발견한 ag-grid가 넘 좋았다. 처음부터 cell의 width값, 테이블의 column수, 높이값, 등을 입..

리액트에서 setinterval로 state값을 변경해서 렌더링시 componentdidmount, componentwill~~에도 함수와 감지하는 소스를 만들어주어야함 useEffect내부에 setinterval 을 넣고 두 번째 인자로 빈배열을 넣어주고 return () => { clearInterval} 필요치 않을 때 없애준다. const [adsImg, setadsImg ] = React.useState(false) //상단에 state 변수 하나 만들어 놓음 React.useEffect(() => { //data관련 함수~ let id = setInterval((e) => { setadsImg(adsImg => !adsImg) },8000); return () => { fetching = fa..

React material UI 의 문서를 읽어보고 툴팁 내부에 html로 삽입이 가능한 tooltip UI를 제작했다. https://material-ui.com/components/tooltips/#customized-tooltips 를 이용했다. clickawaylistener를 이용하면 요소의 바깥쪽 클릭 감지가 매우 깔끔하게 되는 점이 좋아서 구글링+ API문서를 참고하여 제작함 툴팁 요구사항이 내부의 요소가 a태그도 들어가야했고, 모바일에서 마우스오버한다고 길게 클릭하면 깔끔하게 작동하지 않게 되므로 마우스오버가 아닌 버튼으로 제작했고 문서를 참고해 마우스오버 툴팁으로도 제작이 가능하다. 뜯어보면 open 변수 토글로 간단히 제어되는 툴팁임 *** 툴팁사용법 *** title: 툴팁 내부의 텍..

React material UI에서 제공하는 기본적인 UI에서 필요한 기능만 갖고 와서 custom dropdown을 만들어 보았다. 평소에 clickaway listener를 이용하면 요소가 어느 위치에 있던지 외부 클릭 감지가 잘 된다는 것을 깨닫고 구글링 + 필요한 코드 발췌로 만듬! 참고자료 : https://material-ui.com/components/menus/ Menu React component - Material-UI Menus display a list of choices on temporary surfaces. material-ui.com 사용법 buttonText : 보여지는 버튼 내부의 텍스트 dropdownitem : 드롭다운 내부의 아이템 으로 감싼 후 안에서 for문 돌려..