Dev Diary 💻

Intro안녕하세요. select element 에서 dropdown icon 바꾸는 방법에 대해 알아보도록 하겠습니다 :)  How to solve problem Option 1 Option 2 Option 3/* Hide the default dropdown arrow */.custom-select { appearance: none; /* For Firefox */ -webkit-appearance: none; /* For Chrome, Safari, Opera */ -moz-appearance: none; /* For Firefox */ background-image: url('custom-dropdown-icon.png'); /* Custom arrow icon */ backgrou..

Intro 안녕하세요. 이번 시간에는 CSS에서 긴단어 처리 시 줄바꿈 단어 기준을 정하는 방법에 대해 알아보겠습니다. How to solve the problem 아래의 html이 있다고 가정해봅시다. {item.desc} 처음에 제가 적용한 CSS는 다음과 같습니다. 단어 뒤에 elispsis 처리는 되었지만, 줄바꿈 처리가 제대로 안되고 있었습니다. > p { margin-bottom: 8rem; font-size: 10rem; line-height: 1.3; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; } 따라서 저는 word-break라는 속성을 이용하여 break-all 로 지정해줬습니..

Intro 안녕하세요. 이번 시간에는 li 태그에 있는 점을 없애는 방법에 대해 알아보겠습니다. How to do 적용된 스타일 중 list-style-type을 none으로 바꿔주면 됩니다. list-style-type: none; list-style-type list-style-type의 종류는 다음과 같으니 참고 부탁드립니다. /* Partial list of types */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: trad-chinese-informal; list-style-type: ..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 82. 모듈 소개 Conditional & Dynamic Styles Styled Components CSS Modules error error:03000086:digital envelope routines::initialization error 소스코드를 다운받아 실행하자 다음의 에러가 발생했다. 노드 17관련 에러로 nvm 을 사용하여 node 버전을 낮춰 다시 실행하니 정상 작동되었다. 83. 동적 인라인 스타일 설정하기 input 창에 입력 없이 Add Goal을 눌렀을 때 color를 동적으로 바꿔주도록 한다. Course Goal 하지만 inline 스타일은..