실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 26건의 글
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.
텍스트가 가로 방향으로 흐르는 롤링 효과를 CSS로 구현한 CodePen 예제다. @keyframes에서 요소를 왼쪽으로 translateX 이동시키고 infinite 애니메이션을 적용해, 공지사항이나 배너 문구가 화면을 가로질러 반복적으로 흐르도록 만든다. 속도 조절과 일시정지도 CSS로 처리할 수 있다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
프로젝트 문의 및 견적 요청은 언제든 환영합니다.