[CSS 스타일 샘플] 노트 같은 밑줄 스타일

지금까지 애써 외면하던 스타일이 하나 있습니다.

밑줄 노트 스타일.

​

저걸 왜 외면했는지 아는 분들은 다 아시겠지요.

밑줄을 그리면 이렇게 되거나

이렇게 됩니다.

아니면 이렇게 되고요.

​

그래서 저도 손을 대지 않았는데,

밑줄 노트 스타일 책이 들어오고, 시간 여유도 있어서 도전을 해 봤습니다.

음... 의외로 간단히 해결을 했네요 ㅡ.ㅡ;;

 

 

Previous imageNext image

 

화면폭, 글자 크기가 바뀌더라도 틀어짐 없이 밑줄이 생겨요.

​

아직 문제가 있긴 해요.

글자 크기가 바뀌면 일부 줄 두께가 2px로 표시됩니다.

그리고 직선만 가능하고 점선은 제대로 안되네요.

점선 표현하려면 linear-gradient가 아니라 이미지를 써야할 것 같아요.

그래도 원본 도서의 밑줄 색이 옅은 녹색 계열이라

두께가 달라져도 빨간색 처럼 눈에 확 들어오지 않아서 그냥 쓰기로 했습니다.

​

CSS 코드는 이렇습니다.

​

background-image: -webkit-linear-gradient(top , transparent, transparent 1.76em, #D4E6CE 0);

background-size: 100% 1.85em;

​

글자크기 1em, 줄간격 1.8em 일때 기준입니다.

줄간격이 바뀌면 안되니 밑줄 상자의 줄간격은 !important 쓰는게 안전합니다.

​

스타일의 비밀 눈치 채셨나요?

이런 배경을 넣고, 줄간격을 조절해 줄 사이에 글자를 넣는거예요.

그런데 이미지를 넣으면 글자 확대/축소를 해도 이미지 크기가 고정이라 문제가 싱기지만,

linear-gradient로 줄을 그리고 줄 간격을 em으로 잡았기 때문에 글자 크기에 맞춰 줄 간격도 조절이 됩니다.

​

p 태그에 직접 적용하면 됩니다.

​

<p>THE Caterpillar and Alice looked at each other for some time in silence: at last the Caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p>​

​

약간씩 차이나는 줄 두께는, 색으로 조절을 했어요.

진한 빨간색은 줄 두께 차이가 두드러지지만,

옅은 색으로 줄을 넣으면(원본 색이 옅어 다행^^;) 큰 티가 나지 않습니다.

오늘은 여기까지~