티스토리 블로그 본문 글자 크기 설정-CSS, 스킨위자드

Posted by 넉넉한

2018. 2. 27. 13:43 웹페이지

★티스토리 블로그 본문 글자 크기 설정-CSS, 스킨위자드

티스토리 블로그를 운영하기 위해서는 HTML 태그와 CSS 스타일에 대해서 어느 정도 지식을 요합니다. 티스토리 블로그의 본문 글자 크기를 조절하는 방법 두가지를 들겠습니다.

1. CSS 스타일 수정

2. 스킨위자드에서 수정

CSS 스타일 수정

티스토리 블로그 본문은 HTML "article" 클래스를 갖고있는 태그에 실려있습니다. 본 article 클래스의 스타일에서 본문 글자 크기를 수정합니다. 블로그 관리화면 좌측메뉴 항목에서 "꾸미기=>스킨편집"을 선택합니다.

스킨편집화면 우측상단 "html 편집을"" 선택합니다.

html 편집화면 우측상 "CSS"를 선택하면 CSS 파일이 열립니다.

여기서 control+F(검색)을 눌러 aticle을 입력하고 앤터를 눌러 아래의 내용을 찾습니다.(계속검색은 control+G) 스킨에 따라 내용은 차이가 있습니다.

.article {
    color:#000;
    font-size:/@post-body-font-size/16px/@/;
    word-break:break-all;
    word-wrap:break-word;
    overflow:hidden;
}
.article p {margin:1em 0;}

위의 스타일속 항목에서 붉은 박스로 표시된 font-size:/@post-body-font-size/16px/@/;에서 16px를 원하는 크기로 변겅합니다. 저의 경우 스킨 처음 적용시 14px였습니다.

/@post-body-font-size/16px/@/ 이 표현은 티스토리 자체 표현인 것같습니다. 지우고 font-size: 16px로 해도 적용이 되는데 또 어디에 영향을 줄지 모르니 픽셀(px) 숫자만 변경했습니다. 편집화면 우측상다 "저장"을 클릭하고 편집을 마칩니다.

크기 단위는 여러가지가 있습니다.(px, pt, em, rem 등) 절대단위 상대단위로 말하는데 근자에는 상대단위(em, rem)를 권장하는 것으로 압니다.

★참조

1. 블로그관리 콘텐츠=>설정에서 나오는 "에디터에서 속성이 없는 글씨를 보여줄 때 글꼴은 ●● 크기는 ●●pt로 표시합니다."라는 내용은 글쓰기 화면(에디터)에 보여지는 모양이고 실제 웹브라우저에서 적용되는 내용은 아닌 것으로 보여집니다.

2. 에디터상에서 글꼴, 글자크기를 변경하면 해당되는 스타일의 span 태그가 추가됩니다. 글자크기는 px단위가 아니고 pt단위입니다. 저도 px단위로 착각했습니다. 참고로 pt: 1인치의 1/72 px: 1인치의 1/96로 나옵니다만 px단위가 절대단위로 설명되면서도 해상도에 따라 다르다고 하니 이 비율로 pt와 px를 계산하는 것이 어디에나 적용되지는 것은 아닙니다.(이 비율상 12pt는 16px)

스킨위자드에서 수정

스킨위자드를 사용하면 보다 손쉽게 여러가지 모양을 수정할 수 있습니다. 스킨위자드를 적용하려면 스킨위자드를 지원하는 스킨을 선택해서 사용해야합니다. 블로그관리=>꾸미기=>스킨변경에서 티스토리에서 추천하는 스킨을 보면 스킨위자드 지원 여부가 표시돼있습니다. 스킨위자드가 지원되는 스킨에서 블로그관리 메뉴에서 꾸미기=>스킨변경을 선택합니다.