개발쬬

input 에서 type을 number로 설정하면 위아래로 올리는 키가 나온다. 이걸 spin button 이라고 하는데, UI 적으로 예쁘지 않아 숨기는 경우가 많다. 공통 css 코드에 inner-spin-button 을 숨겨주면 예쁘게 사용할 수 있다. input::-webkit-inner-spin-button { appearance: none; -moz-appearance: none; -webkit-appearance: none; }

[CSS] 페이드 효과 넣어주기 fade-up fade-down scss up, 이나 down 등 여러가지 애니메이션 효과를 지정해 줄 수 있다. 해당 class 명을 사용해 원하는 곳에 넣어주면 된다..fade { &-up { opacity: 0; animation: fadeUp 1s ease forwards; } &-down{ opacity: 0; animation: fadeDown 1s ease forwards; } }​ css forwards 설정을 넣어줌으로써 애니메이션 상태가 유지될 수 있도록 해준다..fade-up { opacity: 0; animation: fadeUp 1s ease forwards; }​ animation keyframes 를 지정한 후 0% - 100% 상태를 변경해준다..

[CSS] 글자 수 초과하면 말줄임표 제한하기 한줄 두 줄 등등 scss // 줄 한도 시 ... 제한 .limit-text { width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; // 2줄 한도 시 ... 제한 &-line { width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } css // 줄 한도 시 ... 제한 .limit-text { width: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; ..

환경세팅 React + Next + TypeScript 최근 단일 페이지를 퍼블리싱 하면서 데이터로 뿌려주는 리스트형 요소들의 before 선택자 내부 content 를 동적으로 바꾸는 작업을 처리했다. 사실 이것저것 찾아보기 전까지는 단순히 js 코드 내에서만 해결하려고 했는데, css 내부에 attr 변수를 통해서 동적으로 처리해주는것이 가능했다. 동적 content CSS적용 코드 index.tsx /** 리스트 아이템 **/ 시멘틱태그 내부에 data-content 를 선언하고 내부 요소들을 태그 데이터로 넘겨준다. 이와 다양한 코드들오 넘겨주는것이 가능하다. index.css .wrap::after { position: absolute; width: 15px; height: 15px; left:..

미디어쿼리 범위 지정해서 사용하기 참고 사이트 https://css-tricks.com/the-new-css-media-query-range-syntax/ 1. media Query Range 최근에 단톡방에서 범위지정 css가 존재한다는 소식을 듣고 알아보았다. 기존에는 css 를 선택할때 불편하게 코드를 작성하곤 해서 범위지정이 되는게 있으면 좋겠다는 생각을 했었는데, 이렇게 나와있었다니 전혀 몰랐다. 아직 적용해보진 못했지만 퍼블할 일이 많으니 작업하면서 꾸준히 써보려고 한다. @media (min-width: 400px) and (max-width: 1000px) { /* code */ } 이렇게 적용했던 불편했던 코드들이 @media (400px

스켈레톤 UI : skeleton 스플래시 스크린이나 트로버는 단순히 로딩 중임을 알려주기 때문에 사용자들은 언제쯤 로딩이 완료될지 아무런 추측을 할 수 없다. 반면, 스켈레톤 스크린은 완전히 로드된 페이지의 모습을 대략적으로 흉내내어 나타내기 때문에, 사용자에게 실제 로딩 진행 과정을 어렴풋이나마 보여주어 사용자의 체감 로딩시간을 줄일 수 있게 된다. 로딩할 각종 미디어 자원이 많은 유튜브, 페이스북 등에서 사용하고 있다. * 참고 스켈레톤 스크린 - 나무위키 이 저작물은 CC BY-NC-SA 2.0 KR에 따라 이용할 수 있습니다. (단, 라이선스가 명시된 일부 문서 및 삽화 제외) 기여하신 문서의 저작권은 각 기여자에게 있으며, 각 기여자는 기여하신 부분의 저작권 namu.wiki HTML CSS ..

input checkbox 스타일을 쉽게 지정할 방법은 어떤것이 있을까? 기존에 작성된 더러운 코드들을 다 뜯어고치고 공통으로 스타일을 찾아보는데 확실시 html구조에서는 label 안에 넣어서 input을 적용해주는게 한눈에 보기에도 직관적이고 좋아보였다.(기존에 내가 짯던 코드들은 요소들이 분리되어있어 한눈에 보기 너무 불편했었다) 문제는 input 에 들어갈 체크박스 스타일을 박아찾아보다가 input type값을 활용해 css에서 부모요소를 찾아 고정 스타일을 주는 방법을 생각해냈다. 👉 main.js const TermsWrap = () => { return ( 약관동의 개인정보 수집동의 ); }; input 요소를 체크해 부모 라벨에 스타일을 입혀주었다. input는 타입에따라 스타일을 고정해서..

화면에 데이터를 뿌려서 확인할 경우 깔끔하게 정리해서 보고싶을때 사용하기 좋은 css 코드이다 .pre { white-space: pre; }