문제IconButton이라는 UI 컴포넌트를 외부 컴포넌트에서 불러와 특정 스타일을 추가 적용하려고 했다.// 외부 컴포넌트 const FileDeleteBtnStyle = css` position: absolute; right: 14px; top: 14px;`;참고로 여기서 IconButton 컴포넌트에도 emotion의 css 속성이 적용되어 있었다. // IconButton.jsxconst IconButton = ({ imgSrc, imgAlt, color, radius = "default", css: customStyle, onClick,}) => { return ( );};const IconButtonStyle = ({ color, radius ..

BFC(Block Formatting Context)란?CSS에서 박스의 레이아웃을 정의하는 독립적인 환경으로, 내부 요소들이 외부 요소의 영향을 받지 않고 배치되는 컨텍스트를 만들어 준다. BFC의 용도margin 병합(margin collapsing)float 문제 해결컨테이너 높이 자동 확장과 같은 다양한 레이아웃 문제를 해결하기 위함. BFC가 형성되는 조건float:left, rightposition: absolute, fixeddisplay: inline-block, table-cell, table-caption, flow-root 등overflow: hidden, auto, scroll, overlay 등 BFC의 특징내부 요소의 마진은 외부 요소와 병합되지 않음float 요소를 감쌀 수..

">

이 플레이어의 컨트롤 영역(재생/일시정지, 되감기, 앞으로 넘기기 버튼)을 position absolute 말고flex를 써서 플레이어의 정가운데에 놓는 방법이 있다. flex-basisflex-basis는 flex-item의 최초 width값을 정하는 속성이다.flex-basis: 100px; 로 설정하면 그 요소의 최소 너비는 어떤 일이 있든 간에 100px로 고정이다. 최소 100px에서부터 시작하여 flex-grow 또는 flex-shrink가 적용되는 것이다.이는 부모의 css flex direction에 따라서 가로의 크기가 될수도 있고 세로의 크기가 될수도 있다.만약 부모의 flex-direction 값이 column이라면 세로의 값이 되고, row라면 가로의 값이 된다.참고로 같은 요소에 ..

absolute 요소의 영역을 화면 전체로 지정하고 싶으면 top, left, right, bottom 값을 모두 0으로 지정하면 된다..el { position: absolute; top: 0; left: 0; right: 0; bottom: 0;}하지만 이걸 한줄로 축약할 수 있는데, 그게 바로 inset 이다..el { position: absolute; inset: 0;} inset 속성은 CSS로 요소의 위치를 설정하는 데 있어 더 최신의 단축 속성으로, 코드의 가독성을 높여준다.

요소에 우클릭 > force state > 가상클래스 상태 선택해서 테스트