티스토리 사용 방법 두 번째 이야기-이미지 편집 액자 테두리 만들기

 

의도치 않은 티스토리 사용방법 두 번째 이야기

티스토리 사용방법에 대하여 포스팅을 한 적이 있었습니다. 그러다가 일치하는 콘텐츠 광고가 있다는 것도 발견하게 되었습니다. 일치하는 콘텐츠 광고는 트래픽 규모와 고유한 페이지 수에 대하여 최소한의 요건을 충족하는 사이트가 있어야 된답니다. 그 요건을 충족시켜 모바일에서만 콘텐츠 광고가 보여줬던 것인데요. 제 모바일 폰에 자동적으로 생성되었던 것은 티스토리 관리자모드-애드센스 수익란에서 전체 자동 광고를 미리 클릭해 놓았기 때문입니다. 이것을 해제하면 모바일에서 일치하는 콘텐츠 광고가 사라집니다. 더 자세한 사항은 포스팅 함께한 사용방법, 설정 방법을 참고하시면 되겠습니다. 

 

2021/01/15 - [마쭈 ☆ 구글] - 굼뜬 달팽이의 티스토리 사용방법 이야기

2021/01/21 - [마쭈 ☆ 구글] - 나도 몰랐던 일치하는 콘텐츠 광고 설정 방법

 

 

CSS를 이용한 이미지 편집 - 액자 테두리 만들기

다음 카페나 티스토리 이미지 사진을 첨부하려면 답답증이 나는데요. 한 번에 이미지 편집이 안되어 더 그럴 것 같습니다. 여러장의 이미지 사진을 예쁘게 테두리 액자 이용하여 올리고 싶어도 하나씩 편집하여 올려야 되는 번거로움이 없지 않아 있는 다음(daum), 티스토리입니다. 오늘 액자 테두리 만드는 방법을 알아보다가 CSS에서 이미지 액자 테두리, 폰트 사이즈(font size), 폰트 색상 등등 한 번에 올릴 수 있다는 것을 굼뜬 달팽이만 또 뒤늦게 알게 된 하루입니다. 

 

CSS는 서치 콘솔 사용할 때 딱! 한번 사용해보고 그 뒤로는 HTML 편집 수정하면서도 눈길조차 전혀 주지 않았던 CSS였습니다. 그런데 티스토리 하시는 분이라면 CSS에 사용방법에 대해서도 알고 계시면 유용하다는 것을 알게 됐습니다. 그렇다고 CSS에 대하여 많은 정보를 드리지 못한다는 점 미리 양해 구합니다. 

 

HTML 태그 사용을 10여년 전에 사용해보고 이제는 사용할 일이 없겠지 했는데 티스토리를 만나면서 태그 사용을 이렇게 또 접하게 될 줄은 전혀 몰랐던 CSS에 이어 두 번째 사건입니다. 엉뚱한 이야기는 접고 이미지 편집기 사용이 불편한 티스토리에서 이미지 사진을 올리면 자동적으로 액자 테두리가 만들어지는 CSS를 만나보겠습니다. 

 

 

티스토리에서 한번에 테두리 액자 만들기, CSS란 클릭 후 보이는 태그가 짧으신 분은 border를 쉽게 찾으실 수 있을 것입니다. 그러나 찾기 어려우신 분은 찾기 단축키 Ctrl+F를 클릭 후 검색:border를 입력해 주시면 단어를 찾아줍니다. 저는 세 개를 보여주는데요. img, fieldset란을 보시면 됩니다. border; none 값으로 입력되어 있다면 border: 1px solid #000 !important; 값으로 변경해 주시면 아래 보시는 이미지 사진처럼 테두리 만들기가 자동적으로 생성됩니다. 

액자 테두리 만들기 후 두께 값은 0px부터 하시고자 하는 입력값을 넣으면 되겠습니다. 저는 2px가 적당하여 설정해봅니다. 이렇게 이미지의 액자 테두리 선을 CSS에 설정 해 놓으면 앞으로 포스팅하는 이미지와 그전에 포스팅한 이미지가 자동적으로 액자 테두리 만들기가 생성됩니다. 그동안 일일이 편집하여 액자 만들기를 어렵게 하는 수고는 덜은 셈입니다. 

앞으로의 이미지 편집 중 액자 테두리 만들기는 관리자 - 스킨편집 - HTML편집 속 HTML과 같이 있는 CSS를 클릭하시여 활용도 높은 티스토리 운영을 해보시기 바랍니다.

CSS를 이용한 폰트 사이즈(font size) 설정

앞서 테두리 액자 만들기 설정하는 것과 같습니다. 다만 이미지는 img태그를 찾았다면 이번에는 글씨 태크 폰트(font)를 찾아야겠죠! 그전에 아무 포스팅 창을 여시고 단축키 F12를 클릭합니다. 그러면 오른쪽 html 태그가 보입니다. 여기에서 네모창 화살표를 클릭하여 왼쪽의 본문을 마우스로 클릭해 줍니다. CSS에 폰트 사이즈(font size) 설정이 되어 있으면 복사하지 않아도 상관이 없습니다. 

 

그러면 아래 왼쪽과 같은 창이 생성됩니다. entry-content p 값을 복사하여 CSS창으로 이동합니다. 액자 테두리 만들기 설정 때처럼 Ctrl+F 찾기 단축키를 눌러 entry-content p를 검색하고 font-size : 0.9375em;을 붙여 넣기 합니다. 입력값으로 1em으로 변경하여 고쳐봤습니다. 글자의 폰트값 설정은 숫자가 커질수록 폰트도 커집니다. 1px 입력값도 있는데요 저는 숫자만 변경한 em 태그가 먹혀서 폰트 사이즈 설정을 해봅니다. 

 

왼쪽 - F12 단축키에서 찾은 것 / 오른쪽 - 티스토리 html편집기 CSS

 

굼뜬 달팽이의 티스토리 사용방법 의도치 않은 두 번째 이야기 전해드립니다. 제가 티스토리 이야기를 전해드리면서 이미지 사진은 전혀 신경을 안 쓰기로 한다고 했었는데요. 티스토리가 단순하게 가면 나도 단순하게 간다. 그런데 CSS에 자동적으로 만들수 있는 이미지 편집 태그가 숨겨 있을 줄 누가 알았겠습니까??? html 태그를 사용할 줄 알면 여러가지 변형을 시켜보겠는데요. 오늘은 액자 테두리 만들기와 폰트 사이즈(font size) 크기 설정까지만 알게되어 여기까지만 포스팅 하겠습니다. 

 

오늘 굼뜬 달팽이는 티스토리 일치하는 콘텐츠 광고를 모바일과 PC에 올리는 방법, 서식관리 사용방법, CSS 설정하는 방법까지 알아내느라 지친 하루가 됐습니다. 언제나 그렇듯 액자 테두리 만들기까지 1%라도 도움이 되셨길 바랍니다.