CSS (4) 썸네일형 리스트형 box-sizing 개발을 하다가 자꾸 fixed인 div 요소가 화면 밖을 벗어나는 현상이 있었다. div에 width: 100%를 설정해두고, 안에 padding을 설정했는데, width가 화면 전체 너비를 차지할 것이라는 예상과 달리 화면 밖을 벗어나는 것이었다. 이는 box-sizing: border-box;라는 css 속성을 변경함으로써 해결될 수 있었다. box-sizing: content-box;기본적으로 CSS는 box-sizing: content-box;로 설정되어 있다. 이 방식에서는 width와 height가 컨텐츠 영역만을 포함하며, padding과 border 같은 요소는 width와 height에 포함되지 않는다..box { width: 200px; height: 100px; pad.. display: inline-block, block input이 full 옵션에 맞춰 부모 크기로 늘어났다가 원래 크기로 줄어드는 코드를 작성해야 했다. 그 과정에서 이해가 되지 않는 css display 개념이 있어서 정리해보았다. 이해가 안되는 코드display가 왜 꼭 inline-block 이어야 동작하는지, full 옵션을 주었을 때는 왜 block으로 바뀌어야 하는지 모르겠었다. {value && clearable && ( close )} .input-container { dis.. Mixins을 활용한 스타일 동적 적용 아래 코드를 보면, className을 동적으로 부여하고 있는 것을 확인할 수 있다. 예를 들어, props로 넘어온 color가 blue라면 color-blue라는 클래스 이름을 부여하고, red라면 color-red라는 이름을 부여하는 것이다.import classNames from 'classnames/bind'import styles from './button.module.scss'import type {Color} from '../types/colors'const cx = classNames.bind(styles)interface ButtonProps { children?: React.ReactNode color?: Color backgroundColor?: Color si.. module.SCSS와 bind CSS ModulesCSS 파일을 여러개 정의하면, 다른 파일이지만 같은 classname으로 스타일이 겹치는 경우가 있다. 이때 사용할 수 있는 것이 CSS Moduels라는 개념이다. 이는 CSS 클래스 이름을 로컬 스코프로 한정하여 한 컴포넌트에서 정의된 클래스는 다른 컴포넌트와 충돌하지 않도록 고유화한다. 즉, 해시 형태로 변환하는데 .button 이라는 클래스를 정의하면, 실제 DOM에 적용될 때는 _button_2xF1A와 같이 고유화된 이름으로 변환되어 적용된다. classnames 라이브러리CSS 모듈을 사용하는 경우, 클래스 이름이 해시값으로 변환되므로 기본 classname 사용이 어려울 수 있다. 이를 해결하기 위해 classnames/bind를 활용한다. 설치와 활용 방법은 아래와 .. 이전 1 다음
