실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 27건의 글
텍스트가 가로 방향으로 흐르는 롤링 효과를 CSS로 구현한 CodePen 예제다. @keyframes에서 요소를 왼쪽으로 translateX 이동시키고 infinite 애니메이션을 적용해, 공지사항이나 배너 문구가 화면을 가로질러 반복적으로 흐르도록 만든다. 속도 조절과 일시정지도 CSS로 처리할 수 있다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
요소의 너비를 콘텐츠 크기에 맞게 자동으로 지정하는 CSS 기법을 보여주는 CodePen 예제다. width: fit-content를 사용하면 블록 요소가 화면 전체가 아닌 내용만큼만 너비를 차지하도록 줄어들며, 인라인 요소나 버튼처럼 자연스러운 크기를 만들 때 유용하다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
이미지 주변으로 텍스트가 자연스럽게 흐르도록 배치하는 CSS float 예제다. 이미지에 float: left나 right를 적용하고 margin으로 여백을 조절하면, 본문 텍스트가 이미지 옆과 아래를 감싸는 신문 기사 형태의 레이아웃이 만들어진다. 동작을 확인할 수 있는 CodePen 데모를 포함한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
텍스트 아래에 예쁜 밑줄 효과를 넣는 CSS 기법을 보여주는 CodePen 예제다. background-image에 linear-gradient를 지정해 밑줄의 굵기·색상·위치를 자유롭게 조절하거나, border-bottom과 text-decoration을 활용해 깔끔한 언더라인을 구현한다. HTML과 CSS 코드를 함께 제공한다.
HTML
<p> 하늘이 처음 이 세상에서
너의 운명을 정하실 때에 날 미처 모르고
다른 사람을 보내셨기에
<span>우린 이렇게 눈물 남기고 스쳐야 할 인연 인가봐
남은 여생은 하루처럼 생각하며 살다 가기로 해
그저 남보다 조금 긴 하루라고 여기면 돼
*내가 하늘로 돌아가면 눈물로 천년동안 빌겠어
이 다음 생애엔 꼭 이룰 수 있게 도와 달라고
잠시만 서로 맡기는 거야
사연이 많아 천년 후에야 되찾으러 가는 것뿐야</span>
남은 여생은 하루처럼 생각하며 살다 가기로 해
그저 남보다 조금 긴 하루라고 여기면 돼
내가 하늘로 돌아가면 눈물로 천년동안 빌겠어
이 다음 생애엔 꼭..이룰 수 있게 도와 달라고 </p>CSS
p{line-height:170%;}
span{
background:linear-gradient(to right, #f60, #9c0) no-repeat right bottom;
background-size:0 2px;
transition:background-size 1s;
}
span:hover{
background-position:left bottom;
background-size:100% 2px;
}DEMO
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
문장 일부 span에 형광펜처럼 예쁜 백그라운드를 입히는 CSS 방법을 보여주는 CodePen 예제다. span에 배경색과 padding을 적용하고 line-height를 함께 조절해, 줄바꿈이 발생해도 배경이 끊기지 않고 자연스럽게 채워지도록 꾸민다. HTML과 CSS 예제 코드를 제공한다.
HTML
<p> 하늘이 처음 이 세상에서
너의 운명을 정하실 때에 날 미처 모르고
다른 사람을 보내셨기에
<span>우린 이렇게 눈물 남기고 스쳐야 할 인연 인가봐
남은 여생은 하루처럼 생각하며 살다 가기로 해
그저 남보다 조금 긴 하루라고 여기면 돼
*내가 하늘로 돌아가면 눈물로 천년동안 빌겠어</span>
이 다음 생애엔 꼭 이룰 수 있게 도와 달라고
잠시만 서로 맡기는 거야
사연이 많아 천년 후에야 되찾으러 가는 것뿐야
남은 여생은 하루처럼 생각하며 살다 가기로 해
그저 남보다 조금 긴 하루라고 여기면 돼
내가 하늘로 돌아가면 눈물로 천년동안 빌겠어
이 다음 생애엔 꼭..이룰 수 있게 도와 달라고 </p>CSS
p{line-height:170%;}
span{
background:linear-gradient(90deg, #f60, #9c0);
border:1px solid #000;
padding: 0 .5em;
border-radius:.3em;
box-decoration-break:clone;
-webkit-box-decoration-break:clone;
}DEMO
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
프로젝트 문의 및 견적 요청은 언제든 환영합니다.