IT일상

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/40/ 웹에서 이런 애니메이션을 본 적 있을까요? 3D로 카드가 뒤집어지는 효과인데, CSS를 사용하면 간단하게 만들 수 있습니다. 핵심 키워드 빠르게 알아보기 카드를 뒤집는 데에 필요한 CSS 속성은 backface-visibility, transform: perspective, transform: rotateY 입니다. * backface-visibility는 rotateY로 인해 180도 뒤집혔을 때 표시할 지 여부를 정하는 옵션입니다. * transform: perspective는 3D 입체 효과를 주기 위한 원근감 옵션입니다. * transform: rotateY는 Y축을 기준으로 회전하는 속성입니다. 기본 모양 만들기..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/29/ 🏆 로또를 구매하세요~ 구매하기 로또를 구매하는 폼을 만들고자 합니다. 엘리먼트는 1) 1~45의 숫자 6개를 받아야 하며 2) 서로 중복되지 않는 번호인지 검증해야 합니다. customElements.define('my-lotto-input', class MyLottoInput extends HTMLElement { constructor() { super(); this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = ` `; } }); 커스텀 폼 컨트롤은 위와 같이 만들 수 있습니다. 하지만 이렇게 만들더라도 form은 이 input이 올바른지, 어떠한 값을 가..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/28/ 안녕하세요. 오늘도 좋은 날씨네요! my-modal이라는 Custom Element를 만들었습니다. 모달의 모양만 가지고 있는 엘리먼트인데, 그럼 모달안의 내용은 어떻게 전달할까요? Light DOM 안녕하세요. 오늘도 좋은 날씨네요! 오늘 날씨는 15도입니다. 기온이 많이 올라갔지만 따뜻하게 입는 것 잊지 마세요! customElements.define('my-modal', class MyModal extends HTMLElement { constructor() { super(); this.childrenHTML = this.innerHTML; this.innerHTML = ` ${this.childrenHTML} 확인..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/27/ customElements.define('my-alert', class MyAlert extends HTMLElement { constructor() { super(); this.innerHTML = ` 문제가 발생하였습니다. `; } }); customElements.define('my-article', class MyArticle extends HTMLElement { constructor() { super(); this.innerHTML = ` ${this.getAttribute('title')} ${this.getAttribute('content')} `; } }); Custom Element 두 개를 만들었습니다..

리뉴얼 된 블로그로 보기: https://solo5star.dev/posts/24/ 웹 페이지: https://solo5star.github.io/web-introduction 소스코드: https://github.com/solo5star/web-introduction 우아한테크코스에서 미션이 도착하였습니다! 프론트엔드, 백엔드, 안드로이드 과정들은 웹 기초 강의를 듣고 아래와 같은 형식으로 페이지를 제작해야 합니다. 프론트 과정만 미션을 하는 것이 아니라 백엔드, 안드로이드 과정도 이 미션을 한다고? 프론트엔드의 자존심을 걸고 백엔드, 안드로이드보다 화려하게 만들겠다 다짐했습니다. 3D 효과를 넣으면 화려하지 않을까? 하는 생각에 3D 효과를 찾아보았고, 아래와 같은 예제를 발견할 수 있었습니다. 이걸..