반응형 개발/CSS34 fit-content와 100%차이 fit-content : 공간이 부족하지 않을땐 max-content, 공간이 부족하면 auto처럼 margin을 제외한 너비를 width로 사용(height도 마찬가지) min-content : 해당 엘리먼트의 크기를 최소로 줄이고 싶을 때 사용(ex : 텍스트의 경우 최대줄바꿈) max-content : 해당 엘리먼트의 최대 크기(ex : 텍스트의 경우 줄바꿈하지 않은 문장의 길이) 100% : 부모 엘리먼트의 크기에 꽉 채운다. 2022. 11. 2. CSS-masking image : 이미지에 마스크 씌우기 CSS Masking w3schools를 보다가 css masking이 있었다. 뭐지?? 하고 봤는데 신기했다. 이미지에 말 그대로 마스크를 씌우는 기법이다. import styled from "styled-components"; function Masking() { return ( Masking Original Image Masking Image ); } export default Masking; const Wrapper = styled.div` .masking { mask-size: 100px; -webkit-mask-size: 100px; mask-image: linear-gradient( 90deg, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.5) 50% ); -web.. 2022. 10. 23. display: inline-block, block, inline inline과 inline-block의 차이 display:inline과 display:inline-block의 차이는 width와 height을 element에 먹일 수 있다는 것이다. display:inline-block은 padding,margin을 먹일 수 있지만, display:inline에서는 그렇지 않다. block과 inline-block의 차이 display:block과 비교했을땐, display:inline-block은 줄바꿈이 없기 때문에 다른 element옆에 나란히 있을 수 있다. inline, inline-block, block의 차이 다음은 display:block display:inline display:inline-block의 차이를 나타내는 코드이다. span.a { di.. 2022. 10. 22. span은 text-align 로 가운데 정렬이 안됨 와 몰랐다 span은 text-align 안먹는다 block 아니면 text-align안먹음 작업하다가 급하게 하나 글 올리고 다시 감 2022. 9. 26. 이전 1 2 3 4 5 6 ··· 9 다음 반응형
