[CSS] 티스토리 게시물 이미지에 테두리 적용

이미지 테두리

페이지에서 이미지임을 강조하거나 은연중에 이는 다른 요소와 다름을 나타내고 싶을 때가 있다.

이것을 위해 티스토리 css 를 변경하여 해결할 수 있다.

 

 

 

일단 이미지가 있는 자신의 블로그 페이지를 띄우고

빈 여백에 마우스 우클릭을 하여 inspect (검사) 를 켠다.

 

 

 

그러면 오른쪽에 검사 창이 뜨는데 이제 관련 코드를 픽하여 변경 테스트를 해볼 것이다.

 

왼쪽 위의 네모 안 마우스 포인트 버튼을 클릭하면 왼쪽 창에서 해당 요소를 집어낼 수 있는데,

이미지를 클릭하여 해당 요소를 찾는다.

 

오른쪽 창의 Elements 를 통해 관련 html 코드가 선택 및 펼쳐진 것을 확인할 수 있고,

아래쪽 Styles 에서 css 에 해당하는 코드들이 나타난다.

제일 위에 해당하는 #tt-body-page figure.... 의 속성 항목에 border: 10px solid #b92444; 를 추가해보면, (색상은 상관없음)

10px 붉은 테두리가 나타난다.

이로써 수정해야 할 필요한 코드를 찾았다.

 

 

 

해당 코드를 모두 복사하여,

티스토리 html 편집기를 열고 css 맨 밑에 붙여 넣는다.

 

이제 사용자의 입맛에 맞게 속성을 수정하여 꾸민다.

나는

    border: 1px solid #333333;
    padding: 10px;

를 추가하여 마무리하였다.

 

 

 

 

이렇게 코드를 붙여 넣으면 기존에 있던 코드들은 밑으로 가고 티스토리 style.css 에 적용된 코드가 위로 덮어써지게 된다.

 

 

 

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

2022년 9월 현재 티스토리 스킨 목록 중 Odyssey 에 적용한 코드.