반응형 2022/109 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. 22.10.22 그냥 중간회고 22.1.17에 인턴으로 입사하고 오늘은 22.10.22이다. 입사한지, 그리고 개발자로써 일을 한지 10달이 지났다. 첫 두달은 그냥 나에게 주어진 일을 쳐내기 급급했고, 3월 즈음부터 동료분께(당시 우리팀은 PM1, FE2명뿐이었음 ㅋㅋ) 리팩토링을 제안하는 등, 주도적으로 제품관리를 시작하였다. 그냥 정리차, 기록용으로 적어봄 내가 하는일 우리팀은 부트캠프 탑승 전까지의 사용자 경험과 운영 효율 개선을 담당하고 있다. 그 안에서 프론트엔드 개발자로서 나의 역할은 회사 랜딩페이지 업데이트 마크업, Headless CMS 연동 관리, 마케팅 지원 회사 서비스 마케팅지원 및 유지보수 GM팀에서 데이터 수집, 측정이 용이하도록 유지보수 사용자 경험이 저하되는 부분을 찾아서 상시 유지보수 선발 시스템 유지보.. 2022. 10. 22. 그냥 버튼 만들기 그냥 만들어보았다 // 하이 버튼 import styled from "styled-components"; function Button1() { return ( 버튼1 하이 ); } export default Button1; const Button = styled.div` .button { border-radius: 4px; background-color: #f4511e; border: none; color: #ffffff; text-align: center; font-size: 28px; padding: 20px; width: 200px; transition: all 0.5s; cursor: pointer; margin: 5px; } .button span { cursor: pointer; display.. 2022. 10. 22. 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. 이전 1 2 3 다음 반응형
