[서식] #타이틀편1

 

#타이틀편!

 

#예쁜 서식 만들기

#타이틀 서식

#티스토리 서식

#제목 서식

#HTML모드

 

블로그를 쓰다가 서식만드는것에 재미를 느껴 이쁜 타이틀들을 하나씩 만들어보기 시작했다.

현직 개발자로 일하는 중이라 서식만드는게 굉장히 재미있었다.

 

내가 만드는 서식들은 글씨를 제외하고, 배경색이나 선색 등을 변경하려면

HTML모드에서 직접 고치는것이 가장 깔끔하다. 

 

그래서 서식을 만들때마다 조금씩 변경 방법 등 설명을 함께 작성할 예정이다.

 

복사 주의사항

자세한 설명을 위해 색으로 표시되어있는 코드가 아닌 타이틀 아래 코드를 복사해서 사용해주세요!

 

1. 

 

<div style="margin: 20px 0 20px; position: relative; width: 100%; display: flex;"><label style="display: block; flex: 1; border-bottom: 1px solid #ddd;"></label><span style="display: block; flex: 2; text-align: center; font-size: 25px; font-weight: 900; color: #000; border-bottom: 1px solid #000; padding: 10px 0 10px;">Outside life Of outsider</span><label style="display: block; flex: 1; border-bottom: 1px solid #ddd;"></label></div>​

 

타이틀 색 변경 : span → color [#000] 변경 (RGB)

타이틀 크기 변경 : span → font-size [25px] 변경

가운데 타이틀 라인 :

span → 색상 border-bottom [#000] 변경 (RGB)

span → 선 굵기 border-bottom [1px] 변경

Outside life Of outsider

<div style="margin: 20px 0 20px; position: relative; width: 100%; display: flex;"><label style="display: block; flex: 1; border-bottom: 1px solid #ddd;"></label><span style="display: block; flex: 2; text-align: center; font-size: 25px; font-weight: 900; color: #000; border-bottom: 1px solid #000; padding: 10px 0 10px;">Outside life Of outsider</span><label style="display: block; flex: 1; border-bottom: 1px solid #ddd;"></label></div>​

 

 

 

2. 

타이틀 색 변경 : div → color [#000] 변경 (RGB)

타이틀 크기 변경 : div → font-size [25px] 변경

가운데 타이틀 라인 :

span → 색상 background-color [#e4003b] 변경 (RGB)

span → 선 굵기 height [2px] 변경

span → 선 길이 width [50px] 변경

Outside life Of outsider

<div style="margin: 20px 0 20px; text-align: center; font-size: 25px; font-weight: 900; color: #000;">Outside life Of outsider<span style="display: block; width: 50px; height: 2px; margin: 10px auto 0; background-color: #e4003b;"></span></div>

 

3. 

숫자 색상 변경 : label → color [#e4003b] 변경 (RGB)

숫자 크기 변경 : label → font-size [16px] 변경

라인 변경 :

label → 색상 background [#e4003b] 변경 (RGB)

label → 선 길이 width [100px] 변경

01Outside life Of outsider

<div style="height: 34px;margin: 20px 0 20px;"><label style="display: block; float: left; font-size: 16px; font-weight: 900; margin: 0 10px 0 0; color: #e4003b; height: 34px; line-height: 34px;">01</label><label style="display: block; float: left; width: 50px; height: 1px; background: #e4003b; margin: 18px 30px 0 0;"></label><span style="display: block; float: left; font-size: 25px; height: 34px; line-height: 34px; font-weight: 500;">Outside life Of outsider</span></div>

 

4. 

Outside life Of outsider

<div style="margin: 20px auto 20px; position: relative; display: table; padding: 0 4px 0;"><span style="font-size: 25px; font-weight: 900; color: #000;">Outside life Of outsider</span><label style="position: absolute; bottom: 0; left: 0; background: #e9094373; height: 30%; width: 100%;"></label></div>