CSS2 [CSS] 기본 display(inline, block, inline-block) 이해와 style 제한 예전에 css 배우고 난 이후 제대로 공부한게 많지 않아 기본 display(inline, block, inline-block) 에 대한 이해가 부족한 것 같아 정리※ flex 를 자주 쓰기도 하고 대강 안다고 생각하면서 제대로 짚지 않아 정리할 필요성을 느낌1. block 설명*block 요소는 전체 너비를 차지하고, 항상 새로운 줄에서 시작하여 레이아웃에 큰 영향을 미칩니다.style 관련기본적으로 부모 컨테이너의 전체 너비를 차지(width: 100%)하며 높이는 콘텐츠 크기에 맞춰(height: auto)집니다.width와 height 속성을 사용하여 크기를 지정할 수 있습니다.margin, padding, border를 모두 적용할 수 있습니다.2. inline 설명inline 요소는 기본적으로.. 2024. 12. 31. [CSS] 이미지 테두리에 그림자 원 형태의 소셜 로그인 이미지 버튼에 그림자를 주려했으나 box-shadow 을 주니 네모난 모양의 그림자가 생겨 방법을 찾으니 기존에 박스형태의 태그에 그림자 주는 방식은 box-shadow 속성을 주었지만 이미지에 그림자를 주려면 CSS filter 속성 중 drop-shadow을 주면된다. ※ CSS filter : 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용하며 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 사용됨 + 최신브라우저만 지원하므로 확인하고 사용해야한다 drop-shadow(x y blur color) styled-component 로 적용한 모습 const ImgBox = styled.div` width: 200px img { width: 100%; filter: .. 2022. 8. 28. 이전 1 다음
