![]()
Web Components 들이 매우 많아 귀찮을 경우, 여러개의 태그들을 하나의 단어로 축약할 수 있는 문법 자바스크립트 문법은 아니고 브라우저 기본 기능 중 하나임. 커스텀 html 태그 만드는 법 예를 들어서 이라고 입력하면 이렇게 2개의 태그가 안에 출현하게 만들고 싶음 같은 커스텀 태그를 이제부터 컴포넌트라고 칭할겁니다. 컴포넌트를 만들고 싶으면 이런 형식에 따라서 그대로 타이핑만 하면 됩니다. 이건 정해진 문법이라 이해할 필요는 없고 따라치면 됩니다. class 클래스 extends HTMLElement { connectedCallback() { this.innerHTML = '이름을 입력하쇼' } } customElements.define("custom-input", 클래스); 1. 컴포넌트..
![]()
말풍선을 어떻게 만들지? scope프로젝트에서는 테스트진행 페이지에 진행도를 나타내는 프로그래스바가 있었고 그 상태게이지 상단에 말풍선모양의 디자인을 구현해야하는 와이어 프레임을 전달 받았다. svg형태로 가져다 쓰면 편하겠지만 css로 만들어 보고싶었다. border-width, ::before, ::after 이 3가지가 핵심 - border-width : top, right,bottom, left 순서로 적용 - ::before는 중심컨텐츠앞 ::after는 뒤에 배치 const ArrowBubble = styled.div` position: relative; width: 100%; height: 25px; padding: 0 5px; background: #f1f9ff; /* -webkit-bor..
