[질문&답변] 다양한 형태의 제목 밑줄 스타일
전자책 Q&A 게시판에 올라온 질문이 있어 스타일 만들어 봤습니다.
제목 아래에 다양한 형태의 밑줄을 넣는 방법입니다.
연필로 그린 선, 점선, 사선 등등...
옛날에 올렸다고 생각했는데 찾아 봐도 안나오네요.
그래서 샘플 파일을 하나 만들어 올립니다.
아래에 설명한 내용은 샘플 파일에서 확인할 수 있어요.
기본 스타일은 이렇습니다.
h3 {
font-size : 1.3em;
background-image: url(../Images/line1.png);
background-position : left bottom;
background-repeat : repeat-x;
padding-bottom : 1em;
margin-left : 0;
margin-right : auto;
display : table;
}
<h3>제목 아래 다양한 밑줄 스타일 </h3>
background-image의 이미지만 수정하면 이렇게 다양한 모양의 밑줄을 그릴 수 있습니다.
그런데, 여기서 문제가 하나 생겨요.
제목이 짧을 때는 별 문제 없는데 제목이 길어 2줄 이상 줄바꿈이 되면 어떻게 될까요?
이렇게 제목이 몇 줄로 늘어나든 밑줄은 하나만 그려집니다.
이렇게 편집한 책도 많이 있어요.
그런데 어떤 책에는 2줄이면 2줄 다 밑줄을 그려야 돼요.
h3 {
font-size : 1.3em;
}
h3 > span {
background-position : left bottom;
background-repeat : repeat-x;
padding-bottom : 0.5em;
margin-left : 0;
margin-right : auto;
background-image: url(../Images/line4.png);
line-height : 1.8em;
}
<h3><span>줄이 바뀌어도 줄마다 밑줄이 생기는 스타일 </span></h3>
이건 블럭 태그와 인라인 태그의 특성을 이용한 거예요.
기본 스타일은 똑같습니다. 대신 줄을 블럭 태그가 아닌 인라인 태그에 그려줬어요.
블럭 태그와 인라인 태그의 특성을 이해하면 쉽게 만들 수 있어요.