꾸준히 성장하는 개발자

우리가 평소 css로 스크롤바를 숨길 때 사용하는 방법이다. .scroll { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .scroll::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } 프로젝트를 진행하던중 스크롤 바를 안 보이게 하고 싶은데 이를 tailwind로 하는 방법이 너무 모르겠어서 어떻게 해야 하나 구글링 진행 대부분의 방법으로 Tailwind 플러그인인 tailwind-scrollbar-hide를 사용하는 것을 알려주었다. 방법 1 - Tailwind 플러그인 tailwind-scrollbar-hide yarn add t..

컴포넌트로 생성하여 가져와서 사용하는데 하위요소의 font-size만 바꿔주면 되는데 컴포넌트에 props로 추가하자니 일이 커지고,,,, 이럴 때 유용하게 쓸 수 있는 자식요소에 class를 추가해 주는 방법을 알게 되어 정리한다. className ='w-[200px] [&_input]:w-[140px] ' [&_...] [ ] 안의 &은 자신을 뜻한다. _ 는 띄어쓰기, 그러니까 후손을 나타낸다. [&>..] 이렇게 사용한다면 자식요소를 가리킬 수 있다. 위에 쓴 input 처럼 태그를 사용할 수도 있고 .idInput처럼 .을 찍고 class를 적는 것도 가능하다. 우선순위가 있다보니 태그를 적었을 때 안된다면 class로 사용해 보고 안된다면 !를 사용하여 inportant를 줘서 우선순위를 높..

overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; // 글이 넓이를 넘어가면 생략된다 white-space: nowrap; // 글이 줄바꿈을 하지 않고 한줄로 보기위한것 text-overflow: ellipsis; // 말줄임 ...을 표시해준다 ellipsis 는 display: block; 일때만 사용이 가능!

팀 프로젝트를 하면서 멘토님께 웹폰트를 가져다 쓰게 되면 프로젝트가 무거워지므로 경량화시켜보라는 조언을 듣게 되었다 이전에는 구글 폰트를 CDN으로 불러왔었다 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;500;700;900&display=swap"); 하지만 이렇게 하면 네트워크의 속도, 웹 폰트의 용량 등에 따라 웹 폰트가 적용된 텍스트가 보이지 않는 문제가 일어날 수 있다는 문제가 있다 그래서 웹폰트의 최적화가 필요하다 폰트를 경량화하는 작업을 한번 해보려고 한다. 1. 구글폰트에서 사용할 폰트를 내려받는다 https://fonts.google.com/ Google Fonts Making the web..

스크롤바 없애면서 스크롤 동작 되게 만드는 것을 찾아보았다. // body에서 스크롤 없애기 body{ -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; } class로 특정 부분 스크롤바 없애기 .클래스이름{ overflow-y: scroll; -ms-overflow-style: none; } .클래스이름::-webkit-scrollbar{ display:none; }

https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 위의 예시를 보면 버튼에 danger, info 등에 색상이 커스터마이징 된 것을 볼 수 있다. Customize에서 Color 로 들어오면 지정된 $theme-color을 확인할 수 있다. 이걸 복사해서 커스터마이즈 할수 있는 곳에 붙여넣기 해준다 나는 scss파일에 넣어주었다. 그리고 아래 적혀있는 our Sass maps... url로 따라 들어가면 아래와 같이 있는데 @import "../node_modules/bootstrap/scss/functions"; 를 내 프로젝트 scss파일의 제일 위에 넣어..

https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 이렇게 link태그와 script태그를 통해서 bootStrap을 손쉽게 가져올수 있지만 약간의 기능제한이 있다. 그래서 npm 프로젝트로 관리를 진행한다. 1. 터미널을 열어 npm init -y 을 입력하여 package.json파일을 만들어 준다. 2. npm i -D parcel-bundler 입력하여 개발의존성으로 설치한다. 3. 설치가 다 되면 package.json파일을 열어 devDependencies부분에 "parcel-bundler": "^1.12.5"이 잘 설치가 되었는지 확인한다. 4. "..

https://getbootstrap.com/docs/5.1/components/tooltips/ Tooltips Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage. getbootstrap.com BootStrap의 tooltip은 다른 것들과는 다르게 성능상의 문제로 초기화를 해주어야 한다. 초기화하는 방법: 아래 코드를 js파일에 넣어준다 var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-..