짱똥이는 공부한다💻👀 짱똥이는 공부한다💻👀

공부한다/CSS

• <select> placeholder 만들기

  공부한다/CSS 2021. 4. 19. 21:49

  required(boolean attribute) 데이터 전송 전 반드시 작성해야 하는 폼 요소를 가리킨다. 아래의 타입에서 작동한다. text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file 작성하지 않고 넘어갈 경우, 안내창이 뜨고 데이터가 전송되지 않는다. www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required disabled(boolean attribute) form 요소를 비활성한다. 비활성된 요소는 클릭하거나 사용할 수 없다. 비활성된 요소는 js를 사용해 disable value를 지워서 사용할 수 있다. option태그에 사용시..

  Read More

• backdrop-filter

  공부한다/CSS 2020. 12. 24. 23:50

  backdrop-filter filter와 비슷한데, 이것은 요소 '뒷면'에 필터를 주는 효과라고 한다 테스트를 해보았는데 drop-shadow나 opacity값은 어떻게 다르게 나오는지 확인하지 못했다... See the Pen backdrop-filter test by esther kang (@esther0619) on CodePen. 이것 역시 ie 지원 안함😂

  Read More

• masking + gradient = 반투명 그라데이션 효과

  공부한다/CSS 2020. 12. 16. 21:59

  가끔 사이트 돌아다니다 보면 보이던 것인데 어떻게 하는지 늘 궁금했던 그것... 이미지를 어떻게 그라데이션 있게 반투명하게 할것인가! 포토샵에서는 이렇게 하면 되던데? 벡터 마스크를 씌우고 그라데이션을 넣으면 되는데 그럼 css로 gradient와 mask 씌우면 되는건가? 궁금해서 해봤더니 가능은 하더라! 문제점이 있다면 ie 호환이 안된다는것... developer.mozilla.org/en-US/docs/Web/CSS/mask-image mask-image - CSS: Cascading Style Sheets | MDN The mask-image CSS property sets the image that is used as mask layer for an element. mask-image: non..

  Read More

• 피그마를 사용해 SVG 애니메이션 적용을 해보자

  공부한다/CSS 2020. 12. 9. 19:15

  사이트를 돌아다니다보면 뾰로롱 빵 하고 이미지가 현란하게 나오는데 뭔가 하고 관리자도구를 찍어보면 path태그 천지인 것을 볼 수 있다. 그것이 바로 svg라 하는 것!!!!! svg는 대부분이 아시겠지만 ai에서 펜툴을 이용해서 슥삭쇽하고 그리고 svg로 내보내기 하면 된다. 그리기 귀찮기 때문에 만들어진 svg파일을 이용해서 애니메이션을 적용하도록 하겠다. 아래 사이트에서 이미지를 다운로드 받았다. (무료 사이트라는데 라이센스는 잘 확인해보시길!) undraw.co/illustrations Illustrations | unDraw The design project with open-source illustrations for any idea you can imagine and create. Creat..

  Read More