실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.
총 26건의 글
요소의 너비를 콘텐츠 크기에 맞게 자동으로 지정하는 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.
position:sticky를 이용해 헤더나 타일 요소를 스크롤 중 화면에 고정시키는 방법을 보여주는 CodePen 예제다. 스크롤 위치가 top 기준점을 지나기 전에는 일반 문서 흐름을 유지하다가, 지나간 뒤에는 화면에 붙어 따라오는 sticky 동작을 JavaScript 없이 CSS만으로 구현한다.
See the Pen Untitled by H J (@H-J-the-typescripter) on CodePen.
프로젝트 문의 및 견적 요청은 언제든 환영합니다.