[티스토리] 이미지 테두리 간단하게 설정하기

티스토리에 이미지를 첨부하면 기본적으로 테두리가 없어 글과 섞여 보기 불편할 때가 있습니다. 아주 간단하게 모든 이미지에 테두리를 설정하는 방법에 대해 알아보겠습니다.

 

1. /manage 페이지 접속 > "스킨편집" 클릭

2. 오른쪽 상단에 "html 편집" 버튼을 클릭합니다.

3. 내 글에서 이미지 선택자 찾기

• CSS 는 스킨마다 다르기 때문에 본인이 작성했던 포스팅으로 접근하여 F12를 통해 선택자를 찾습니다.
• 저의 경우엔 "figure" 태그의 "imageblock" 클래스 하위 img 태그임을 알 수 있습니다.

4. css 탭 > img 태그 찾기

• html 편집의 css 탭으로 이동하여 img 태그를 찾습니다.

5. 테두리 수정

#article-view figure.imageblock img {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  height: auto;
  border: 2px solid green; /* 두께가 2px인 초록색 테두리 */
  border-radius: 10px; /* 10px 반지름으로 둥글게 만들기 */
  padding: 10px; /* 내용과 테두리 사이의 여유 공간 */
}

6. 적용확인

• 설정한 테두리가 적용된 것을 확인할 수 있습니다.

감사합니다.