[질문&답변] 화살표 선이 들어간 제목 스타일

재미있는 스타일을 문의 주신 분이 있어 만들어 봤습니다.

스타일은 이렇게 2종류예요.

 

프롤로그 제목은 위에처럼 화살표가 있고 제목이 들어갑니다.

장제목은 화살표 앞에 번호가 붙어야 하고요.

제목 옆에 선이 들어간 스타일은 많이 만들어봤는데, 

선 끝에 화살표 처럼 포인트가 들어간 스타일은 선을 넣는 스타일과 다릅니다. 

선을 넣는 것 보다 까다롭지요.

전자책이기 때문에 화면 크기가 늘었다 줄었다 할 수 있지요.

그리고 장 제목 글자 수도 일정하지 않습니다.

책에 따라 장 번호가 1, 01, 001 처럼 여러 자리일 수도 있어요.

 

스타일을 만드는 방법은 수백가지예요.

편집자에 따라 중요하게 생각하는 포인트가 다를거고,

그에 따라 스타일도 달라집니다.

 

저 제목 스타일을 봤을 때 제가 중요하게 생각한 부분은 장제목이었어요.

화살표 길이는 폭에 따라 늘었다 줄었다 해도 되지만, 제목은 가능한 한줄로 표시되야 한다고 생각했습니다.

장 제목과 장 번호는 글자 수에 따라 늘었다 줄었다 하지만, 뷰어 폭에는 영향을 받지 않아야 합니다.

뷰어 폭이 제목의 폭보다 좁다면 줄이 바뀌어야 하지만, 

한 줄에 제목이 들어갈 정도의 폭이라면 제목은 한 줄로 표시하고 싶었습니다.

 

그리고 제목 글자 수가 바뀌더라도 화살표 길이가 알아서 조절돼야겠지요.

각 장 제목마다 폭을 하나씩 맞추기는 귀찮으니까요.

 

화살표도 중요합니다. 처음엔 간단히 이미지를 넣으면 되겠지 생각했는데

화살표 길이를 뷰어 폭에 자동으로 맞추려면 이미지로 넣으면 안되더라구요.

이미지 가로 길이를 100%로 하면 화살표 머리 부분이 가로로 찌그러지고, 가로, 세로를 100%로 맞추면 선의 폭이 두꺼워지면서 화살표 머리가 커집니다.

 

제가 생각한 해결책은, 화살표를 아주 길게 만들어 웬만한 뷰어 가로 폭에서도 잘리지 않도록 하고

배경으로 넣는 방법입니다.

 

이 외에도 다른 여러 방법이 있어요.

삼각형을 오른쪽 끝에 정렬하고, 삼각형 왼쪽에 이미지로 선을 넣은 후 글자 간격을 없애던가,

테이블 속성을 이용해 상자 2개를 붙여 왼쪽은 선을, 오른쪽은 삼각형을 넣던가,

border로 선을 만들고, 선 끝에 삼각형을 넣은 후 margin으로 겹치게 해도 되겠네요.

 

제가 만든 스타일은 이렇습니다.

 

  <style>

div.box_title {

width : 100%;

display : flex;

}

.arrow {

background-image: url("../Images/aaa.png");

background-position : right top;

background-repeat : no-repeat;

flex-basis : 100%;

min-width : 2em;

height : 1em;

-ms-flex: 1;

flex: 1;

}

.txt_chap_title {

    text-align: right;

margin-left : 1em;

}

.txt_chap_No {

font-size : 2em;

color : grey;

    font-style: italic;

margin-right : 0.5em;

}

.txt_grey_small {

    color: grey;

    font-weight: bold;

    font-size: 0.8em;

}

</style>

 

flex를 이용해 div 박스 3개를 가로로 놓고, 가운데 상자 크기가 자동으로 조절되도록 했습니다.

장 번호와 제목 상자는 글자 양에 따라 폭이 알아서 바뀌고요.

 

스타일을 적용하면 이렇게 보입니다.

가로 폭이 넓으면 화살표만 길어져요.



그리고 화살표 상자에 min-width를 둬서가로 폭이 아주 좁아져도 화살표가 사라지지 않게 했습니다.

화살표가 남으면 제목이 줄바꿈 되지요.

설정

트랙백

댓글