본문 바로가기
반응형

개발/CSS33

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.
안드로이드, 아이폰 크로스 브라우징 IOS와 안드로이드의 css 기본값 차이를 정리한 것은 아니다. 그냥 오늘 있었던 일을 말한다. qa중이었다. 내 핸드폰에서는 글씨가 검은색으로 잘 보이는데, 아이폰을 가진분들한테는 글씨가 파란색으로 보인다고 하셨다. 처음부터 파란색이어서 원래 파란색인줄 아셨다고 했다. 한참을 찾아보는데 10년차 백엔드개발자분이 이런 말씀을 해주셨다. 시스템의 기본 설정값을 폰트 색상으로 사용하고 있는 듯 합니다. 그런데 ios계열은 기본 시스템 버튼 색상이 파란색이고 그 외는 검은색이라 그런 것으로 판단됩니다. 색깔만 지정해주면 될 것 같네요 그렇다. color가 없었기에 각 시스템의 기본 설정값으로 보이는 것이었다. color : black을 추가해주니 해결되었다. 또다른 문제가 있었다. 나의 화면에서는 다음과 같이.. 2022. 8. 26.
반응형