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

필자는 주로 혼자 일해왔기 때문에 깃을 쓸 일이 극히 적었는데 master에서 혼자 작업을 해왔기 때문에 commit, pull, push만 하면 그게 다겠거니 하고 살아왔다 허허.....(그럴거면 git은 왜 썼냐 ㅠㅠ) 최근에 깃을 쓰면서 발생했던 상황들에 어떻게 대처해야 할지 몰라 허버허버했던 나를 돌아보며 글을 쓴다... 깃을 시작하기 전 확실히 알고가자! 🤓 #1. git repository - 원격 저장소(remote repository) : 여러 사람이 함께 공유하기 위한 저장소 - 로컬 저장소(local repository) : 내 pc에 파일이 저장되는 개인 전용 저장소 *로컬 저장소에서 작업을 하고 원격 저장소에 올릴 수 있다. 다른 사람이 작업한 내용을 원격 저장소에 올려두면 pull..

아코디언 기능을 직접 짜서 사용해보았다!😊 원래는 clientHeight값을 끌어다가 쓰려고 했으나.. 여러 난관에 부딪힌 후 공부를 더 하고 도전해보기로... display값을 가져다가 나타나는 것보다는 스르륵 내려가는 기능을 만들어 보고 싶어서, height을 auto로 하고 transition을 주고 진행했다. See the Pen 아코디언 연습 by esther kang (@esther0619) on CodePen.

코드를 여러줄 작성할 필요 없이 변수값을 받아서 스타일을 꾸밀 수 있다. 엄청 간단하고만요😀 @each ABCDEFG ABCDEFG ABCDEFG $sizes: 13px, 20px, 50px; @each $size in $sizes { .font-#{$size} { font-size: $size; } } 변수값과 클래스명의 일부를 같게 지정해줘야해서 보기에 좋지 않다고 생각했는데... key,value를 이용해서 사용하는 방법이 있다! 두두둥😗 그것은 아래의 map활용을 봅시다 map을 활용한 @each 이전 예제의 코드를 이런식으로 변경 가능! ABCDEFG ABCDEFG ABCDEFG $sizes: (13:13px, 20:20px, 50:50px); @each $key, $size in $sizes ..

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

가끔 사이트 돌아다니다 보면 보이던 것인데 어떻게 하는지 늘 궁금했던 그것... 이미지를 어떻게 그라데이션 있게 반투명하게 할것인가! 포토샵에서는 이렇게 하면 되던데? 벡터 마스크를 씌우고 그라데이션을 넣으면 되는데 그럼 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..

사이트를 돌아다니다보면 뾰로롱 빵 하고 이미지가 현란하게 나오는데 뭔가 하고 관리자도구를 찍어보면 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..

오늘은 location 공부!🤨 (결론이 궁금하신 분은 맨 아래를 보셔도 무관합니다요) 1. 우선 개인 포트폴리오 사이트에서 콘솔에 찍어보고 결과 확인을 해보았다! 일단 아래에 있는 것들은 DOMstring이라는 것을 알고 넘어갑시다 location.href URL 값 location.protocol 프로토콜 값 location.pathname '/' 문자 뒤의 값 location.port url의 포트값 로컬에서 라이브서버로 돌릴 경우 5500으로 나오는 것을 확인 location.hostname URL의 도메인 부분 location.host URL의 호스트 부분 location.search '?' 문자 뒤 URL의 쿼리스트링 값 location.username location.password 도메인 ..