웹 개발에서는 다양한 UI 라이브러리와 프레임워크가 존재하지만,때로는 이러한 라이브러리에 과하게 의존하는 경향이 있다.(대표적으로 내가 그런 사람..)하지만 이는 프로젝트의 복잡성을 증가시키고, 추가적인 의존성 관리 및 번들 크기 증가로 이어질 수 있기에,어느 정도 웹에 대해 공부하신 분들은 아시리라 생각이 들지만,기본 HTML 태그와 CSS를 활용하여 간단한 기능들을 구현할 수 있는 기능들을 소개하고자 한다.라이브러리에 과하게 의존하지 않기1. Select box(Select, OptGroup, Option)각종 디자인 라이브러리(antd, 'bootstrap',mui, shadcn/ui 등)의 Select 컴포넌트나 React Select, Downshift 등의 라이브러리를 사용하지 않고,기본 HT..
최근 토스에서 Frontend Accelerator 1기를 모집하여, 신청하여 객관식 시험을 볼 수 있었는데,모두 골라야한다는 점이 확실히 알고 있어야하는 것인데, 100% 확신하는가라고 생각했던 문제가 거의 없었던 것 같다.그 중 텍스트 줄바꿈 속성에 관한 문제도 있었어서, 적어보려고 한다.텍스트 줄바꿈 방법 1. white-space <div class="text-container"> This is a long text that we want to wrap naturally to the next line without breaking words.</div> .text-container { width: 200px; white-space: normal; /* 기본값 */}..
위 글은 25 CSS Hacks Every Developer Should Know를 번역 겸 약간의 각색을 곁들인 글로,이 글은 3번째 중 3번째(마지막) 글이다.18. Full-Width Elements (전체 너비 요소)문제: 요소가 부모의 전체 너비를 차지하도록 만들고 싶습니다.해결책: width: 100vw를 사용합니다.부연 설명: width: 100vw는 뷰포트의 전체 너비를 차지하게 합니다. margin-left와 margin-right를 사용하여 부모 요소의 중앙에 배치할 수 있습니다..full-width { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);}19. SVG Icon Color Cont..
