티스토리 이미지에 테두리 넣고 빼는 방법

티스토리에 이미지를 넣으면 기본적으로 테두리가 없이 넣어집니다. 이미지에 테두리가 없으면 단락의 구분이 되지도 않고 그림이 깔끔하게 보이지도 않습니다. 이것을 해결하기 위해서는 티스토리 HTML 편집을 통해 CSS 접근이 가능한데 이곳을 수정하면 모든 티스토리의 그림에 테두리를 넣고 뺄 수가 있습니다. 이미 발행한 글도 같이 적용됩니다.

내가 발행한 글 중 이미지가 있는 페이지를 크롬이나 파이어폭스, 엣지 등 최신 브라우저로 띄워서 이미지의 CSS를 확인합니다. 본 포스팅에서는 크롬을 기준으로 작성하였습니다. 다른 브라우저도 비슷합니다.

이미지에 마우스를 올리고 오른쪽 마우스를 클릭하여 '검사'를 클릭합니다. 그러면 개발자 도구가 뜨는데 이미지가 선택이 되어 있고 오른쪽에 Styles라는 탭을 선택하면 아래로 여러 개의 CSS들이 나옵니다. 여기서 첫 번째의 CSS에 border 속성을 없으면 추가하거나 있으면 수정하면 됩니다. border는 테두리를 지정하는 것인데 두께, 모양, 색상을 지정할 수 있습니다.

티스토리 BookClub 스킨을 사용 중인데 여기서는 #tt-body-page figure.imageblock img, figure.imageblock img가 제일 처음에 나왔습니다. 여기에 테두리 두께는 1px, 선은 실선, 색상은 회색 계열로 지정하였습니다.! important는 다른 곳에 속성이 중복으로 나올 경우 이것을 제일 우선순위로 둔다는 의미입니다.

#tt-body-page figure.imageblock img, figure.imageblock img {
    display: inline-block;
    max-width: 100% !important;
    margin: 0;
    height: auto;
    border: 1px solid #9f8484 !important;
}

또한 크롬에서 네모난 색상을 클릭하면 색상표가 나오는데 마우스를 클릭한 상태에서 이리저리 움직이면 해당 색상이 바로바로 적용됩니다. 이것으로 원하는 색상을 바로바로 적용해 볼수 있습니다.

원한는대로 됬으면 CSS를 복사합니다. 브라우져에서 적용해 본것은 브라우져 닫으면 없어집니다. 새창 띄우면 기존의 설정대로 테두리 없이 나오기때문에 티스토리 스킨에 추가해 줘야 합니다.

티스토리 스킨편집누르면 편집창이 새로 뜹니다. 새로운 편집창에 보면 오른쪽에 현재의 스킨명이 나오고(저는 Book Club 스킨입니다.) 'html 편집' 버튼을 클릭하면 HTML, CSS, 파일업로드 탭이 보입니다. 여기서 CSS탭을 클릭합니다.

CSS 탭이 나오면 아래의 내용을 복사해서 저장해 놓습니다. 혹시나 편집하다가 화면이 깨지거나 오류가 나면 다시 원상복구 해야 하기때문에 따로 저장해 놓는것은 꼭 필요합니다. 적용해보고 이상이 없으면 지워도 되지만 적용하는 중에 문제가 생기면 백업파일이 없을경우 굉장히 난감합니다. 꼭 백업 필수!!

CSS 편집창에 아무곳에나 위의 내용을 붙여 넣으면 되는데 이왕이면 위쪽에 붙여넣어 주세요. 다음에 확인할때 편하게 하기 위해서서요.

내용을 다 붙여 넣었으면 '적용' 버튼을 클릭해 줍니다. 이러면 모든 과정이 끝났습니다.

이제 새로운 창의 띄워서 그림이 들어있는 티스토리 글을 하나 실행해 봅니다. 이상없이 이미지에 테두리가 원하는 대로 그려져 있으면 모든 과정이 성공적으로 됐습니다. 안됐으면 CSS 편집창을 체크해보기, 또하나는 브라우져 마우스 오른쪽 속성으로 들어가서 해당 CSS가 어떻게 적용 되어 있는지 확인해야합니다. 내가 원하는 대로 되어 있는지 아니면 다른것으로 되어 있는지 확인하고 문제를 해결하면 됩니다.

이미지의 테두리를 없애려면 스킨편집 CSS에 추가한 속성을 제거하고 적용하면 됩니다.

티스토리 이미지에 테두리 넣고 빼는 방법 화면 캡처

1. 브라우저에서 이미지의 CSS를 확인

2. 브라우저에서 이미지에 테두리와 색상 추가

색상을 마우스로 클릭하면 색상표가 나와서 사용자가 원하는 색을 고를 수 있습니다.

CSS 테두리 속성 추가 - border: 1px solid #9f8484 !important;

3. 티스토리 스킨 편집

4. 오른쪽 스킨 편집에 'html 편집' 클릭

5. HTML 탭 옆에 CSS 클릭

6. CSS 편집 칸에 브라우저에서 셋팅한값 붙여 넣기

테두리 속성이 border에 1px 두께, solid 실선, #9f8484 색상, !important 중복된 속성이 있을 경우 이것을 최우선으로 적용

7. CSS '적용' 클릭

수정을 할 경우 적용 버튼 색이 변하면 활성화됩니다.

8. 끝! 확인하기

적용된 웹페이지

저작자표시 비영리 변경금지

'블로그' 카테고리의 다른 글

구글 애드센스 가입과 신청 방법 (0)	2022.03.16
구글 서치 콘솔에 등록된 사이트 삭제하는법 (0)	2022.03.16
구글 서치 콘솔 색인 생성중 '발견됨 - 현재 색인이 생성되지 않음' 해결법 (2)	2022.03.16
티스토리 사이트를 네이버, 구글에 등록하기 (0)	2022.02.17
티스토리 수익형 블로그 초기 셋팅법 (1)	2022.01.27

초코