[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;

}