Dalin's Archive

이전 글에서 마우스를 호버하면 카드가 뒤집어지는 애니메이션을 구현했는데, 추가로 구현할 부분이 생겼습니다. 바로 모바일에서는 스크롤하면 카드가 뒤집어지게 하는 것이었습니다. 이 글에서는 꼭 모바일은 아니고, 스크롤 하면 카드가 flip 애니메이션 효과를 구현해보겠습니다. IntersectionObserver라는 걸 활용해서 하는데 이것도 재미있습니다 😀 예제 코드 🌸🖥️ See the Pen Scroll card flip by Seoin (@tjdls111) on CodePen. 설명 🤗💕 Intersection Observer Api를 이용했는데, 이것은 타겟 요소와 상위 요소가 겹치는 부분을 관찰해줍니다. 그리고 페이지가 스크롤되다가, 타겟 요소가 등장하면 원하는 콜백 함수를 실행할 수 있습니다. 핵..

상황 설명 회사에서 서비스 설명하는 사이트가 있는데, 거기에서 카드가 뒤집히는 효과가 들어간 스타일이 있었다. 라이브러리를 써야 하나? 생각할 정도로 어렵고 복잡한 줄 알았는데 해보니까 생각보다 간단했다 ㅎㅎ 일단 구글에 검색을 하니까 w3School에서 flip card를 알려주는 페이지도 있었다! 예시 화면, html, css 코드가 있다. 나는 전체적으로는 이걸 참고했다. 카드 뒤집히는 효과 CSS , HTML 🌈 W3School의 코드를 조금 바꾸고, 설명을 달았다. ㅎㅎ See the Pen Untitled by Seoin (@tjdls111) on CodePen. HTML (봐야 할 부분만) 뒤 Lorem ipsum dolor sit, amet consectetur adipisicing eli..

상황 설명 🌈 이번 스프린트에 사용자가 송장(invoice)을 신청하고, pdf로 받아볼 수 있는 기능을 추가했다. 나는 인보이스 신청하는 프론트엔드 코드도 작성하고, pdf생성을 위한 html,css를 작성해서 백엔드 개발자님에게 넘기기로 했다. 디자인도 심플하니까 빨리 할 수 있을 것이라고 생각했다. 그.런.데. 생각보다 오래 걸렸다 🥹 디자이너님도 많이 괴롭혔다 🥹 (죄송하고 감사해요...) 웹 브라우저에서 보는 것과 pdf로 뽑은 결과물이 많이 달랐기 때문이다!! 그래도 이번 시간을 통해서 인쇄용일 때는 html, css을 어떻게 작성해야 할지, 무엇을 고려해야 할지 알게 됐다. 엄청 고생하면서 알게 된 것들이라서ㅠㅠ 블로그에 남기려고 한다 ㅎㅎ (pdf로 뽑는 것은 인쇄용과 동일했기 때문에, 인..

들어가며..📝 메일 코딩을 하게 됐다. 메일도 코딩하는 건 상상도 못했는데, 하게 됐다 !! WOW 처음에는 색다르고 재미있었는데, 하다 보니 아주 소소한 것들(1, 2 픽셀이 왜 안맞을까, 지메일에서는 되는데 아웃룩에서는 안되네, 아웃룩 웹으로 켜면 되는데 앱으로 켜면 안되네 등) 때문에 머리를 싸매게 됐다.. 평소에 편하게 쓰는데 메일 코딩에서 안되는 HTML 요소/속성과 CSS 속성이 많아서, 시간이 생각보다 오래 걸렸다. 그래도 종종 메일 코딩을 하게 될텐데 한번 해봐서 좋았고, 색다른 경험이었다! 개요 😆 메일 코딩은 HTML + css로 한다. 아 CSS는 인라인으로 해야 한다 ^^ Javascript 는 못 쓴다. ㅠ 다행히 html 요소에 클래스를 주고, 클래스에 css를 주면 인라인 cs..

HTML Heading 요소( 등)는 구획, 의미를 생각해서 사용해야 한다 당연히 알고 계신 분이 많을 수도 있는데, 나는 잘 인식하지 못하고 있었다.ㅜㅜ 처음에 HTML 문법을 배울 때 h1을 쓰면 제일 크고 두꺼운 글자가 나오고, h6을 쓰면 작고 얇은 글자가 나오는 것 정도만 기억했다. 그래서 지금까지 구획..보다는 디자인(글씨 크기, 두께 등)을 위해서 이 태그들을 사용할 떄가 많았다. ㅠㅠ 회사에서 한 페이지에 태그를 두 개 넣었는데, 코드 리뷰에서 그러면 안된다고 알려주셔서 찾아봤다. 일단 HTML Heading 요소는 , , ... , 등 제목을 나타낸다. 그런데 단순한 제목이 아니다. MDN 문서에 "HTML 요소는 6단계의 구획 제목을 나타냅니다."라고 한다. 구획! 레이아웃! 과 관련있..