티스토리 서식 공유, 사용한 HTML 의미

서식 등록 방법에 대해선 이전 포스팅을 참고해 주시길 바랍니다 :)

2020/02/13 - [공부해요/티스토리를 시작하며] - 티스토리 원하는 서식 만드는 법/등록방법

티스토리 원하는 서식 만드는 법/등록방법

 

서식 공유라곤 했지만, 웹상에 돌아다니는 기본적인 서식을 사용해서, 색감과 틀을 원하는 대로 바꾸어 사용하면 되겠습니다. (서식을 꾸미는데 참고가 될만한 사이트와 색코드 관련 내용도 추후에 다룰까 합니다.)

'티스토리 서식'에 대해 검색 시 많이 나온 서식부터 시작하겠습니다.

 

제목서식 - 내용은 글을 쓰며 수정 가능합니다.

<p></p><h2 style=" color: #424242; border-left:10px solid #424242; border-bottom: 3px solid #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>

 

세미콜론을 경계로 나눌 수 있습니다.

color: #424242;

- 글의 색상

border-left:10px solid #424242;

- 틀의 왼쪽부분 관리 (굵기, 선 종류, 색상)

border-bottom: 3px solid #424242;

- 틀의 아래부분 관리 (굵기, 선 종류, 색상)

padding: 5px;

- 글과 틀의 공극 관리 (공간 사이즈)

padding-left: 20px;

- 글과 왼쪽틀의 공극 관리 (공간 사이즈)

제목서식

<p></p><h2 style=" color: #ECA7F2; border-left:10px solid #CAD1E8; border-bottom: 3px solid #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>

 

글의 색상과 왼쪽 틀의 색상을 바꿔보았습니다.

제목서식

<p></p><h2 style=" color: #424242; border-left:20px solid #424242; border-bottom: 1px dashed #424242; padding: 5px; padding-left: 20px; ">제목서식</h2><p></p>

 

왼쪽과 아래쪽의 틀의 굵기를 굵게/얇게 바꾸고

아래쪽 틀의 경우, 틀의 형식을 실선이 아닌 점선으로 바꾸었습니다.

제목서식

<p></p><h2 style=" color: #424242; border-left:10px solid #424242; border-bottom: 3px solid #424242; padding: 10px; padding-left: 40px; ">제목서식</h2><p></p>

 

모든 공극의 사이즈를 2배로 바꾸었습니다.

 

 

그리고, 색상 코드 검색에 유용한 사이트 입니다.

HTML Color Code: 색상 검색, 색상 코드 검색

https://html-color-codes.info/Korean/

HTML 컬러 코드