[CSS 스타일 샘플] 간단해 보이지만 복잡했던 장제목 스타일
어떻게 스타일 잡을까 고민하느라 시간이 한참 걸렸네요.
PDF로 보면 이런 모양입니다.
이 스타일이 까다로왔던 이유는
상단 굵은 줄과 장제목, 제목 사이의 빨간 줄이 글자 크기가 바뀔 때 같이 움직여야 해서였어요.
글자 크기 바꾸면 장번호도 크거나 작아져야 하는데, 그에 맞춰 상단 줄과 중간 빨간 줄이 같이 움직여야 하지요.
거기에 폭이 바뀌면 제목쪽만 움직여야 하니 여러 조건을 한번에 맞춰야 했습니다.
요즘 grid를 많이 쓰네요.
처음에 table로 작업할까 했는데, 제목 처리 하려면 헤딩 태그를 써야하니 테이블은 제외시켰고,
몇가지 방법을 생각해 하나씩 적용해 보다 그나마 코드가 간단한 방식을 찾은게 grid입니다.
<div class="ChapLine">
<div class="ChapLineRed"></div>
<div class="ChapLineGrey"></div>
</div>
<h3><span class="ChapTXT">CHAPTER</span><span class="ChapNo">10</span> <span class="ChapTitle">첫 번째 파이프라인<br/> PDF 전자책</span></h3>
===
h3 {
display : grid;
grid-template-areas :
"ChapTXT ChapTitle"
"ChapNo ChapTitle";
grid-template-columns : 2.5em auto;
grid-template-rows : 0.5em;
font-size : 2em;
align-content: center;
margin-bottom : 5em !important;
}
.ChapLine {
display : grid;
grid-template-areas :
'ChapLineRed ChapLineGrey';
grid-template-columns : 2.5em auto;
grid-template-rows : 5px auto;
font-size : 2em;
margin-bottom : 15px;
}
.ChapLineRed {
grid-area: ChapLineRed;
background-color : #EA5A4F;
}
.ChapLineGrey {
grid-area: ChapLineGrey;
background-color : #BFC0C0;
}
.ChapTXT {
font-size : 0.4em;
color : #EA5A4F;
justify-content: left;
}
.ChapNo {
display: flex;
grid-area: ChapNo;
box-sizing: border-box;
font-size: 1.8em;
color : #EA5A4F;
line-height : 1em;
align-items: flex-start;
justify-content: left;
}
.ChapTitle {
display : flex;
grid-area : ChapTitle;
box-sizing: border-box;
font-family: "제목고딕";
border-left : 1px solid #EA5A4F;
padding-left : 0.5em;
line-height : 1em;
}