실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 27건의 글
JavaScript 없이 CSS의 popover 속성과 popovertarget 속성만으로 팝업창을 여닫는 방법을 보여주는 CodePen 예제다. 버튼 요소에 popovertarget="id"를 지정하고 대상 요소에 id와 popover 속성을 설정하면, 브라우저 기본 팝업 동작으로 모달을 구현할 수 있다.
See the Pen popovertarget by H J (@H-J-the-typescripter) on CodePen.
inline-block 요소에 배경 스타일을 예쁘게 적용하는 방법을 보여주는 CodePen 예제다. display: inline-block 요소에 배경색·패딩·테두리 반경·그림자를 조합해 탭·버튼·뱃지처럼 보이도록 꾸미며, 요소 사이 간격과 수직 정렬까지 함께 다루는 예시를 제공한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
CSS 애니메이션으로 요소를 부드럽게 움직이고 전환 효과를 주는 예제를 보여주는 CodePen 데모다. @keyframes로 위치·크기·색상 등의 변화를 정의하고 transition을 함께 사용해 자연스러운 모션을 구현한다. 버튼·배너·배경 등에 바로 적용할 수 있는 스타일이며 duration과 easing 조절 방법도 함께 확인할 수 있다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
배경 이미지에 따라 글자 색이 자동으로 적응하는 효과를 CSS로 구현한 CodePen 예제다. mix-blend-mode와 background-clip을 활용해 밝은 배경과 어두운 배경 모두에서 글자가 또렷하게 보이도록 하며, 배경 위에 겹쳐진 텍스트의 가독성을 높이는 기법이다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
스크롤 위치에 따라 배경 요소가 서로 다른 속도로 움직이는 시차(Parallax) 스크롤 효과를 보여주는 CodePen 예제다. CSS background-attachment: fixed를 이용하거나 JavaScript 스크롤 이벤트로 요소의 transform을 조절해 깊이감 있는 화면을 연출한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
프로젝트 문의 및 견적 요청은 언제든 환영합니다.