[CSS] 티스토리 블로그 이미지 테두리 만들기

 

 

배경이 흰색이다 보니 캡처한 이미지와의 경계가 불분명해

가독성이 떨어진다고 생각했습니다.

CSS 수정을 통해 첨부되는 이미지에 테두리가 나타나도록 바꾸어 보겠습니다.

 

 

---

 

 

 

 

[블로그 관리] > [스킨편집] 탭을 선택합니다.

 

 

 

 

 

 

그럼 다음과 같은 스킨 편집 페이지가 열립니다. 

왼쪽 상단에서 편집하고자 하는 페이지의 분류를 선택하고

왼쪽 메뉴에서 [html 편집]을 선택합니다.  

 

 

 

 

 

 

 

 

 

그럼 HTML과 CSS를 편집할 수 있도록 편집기가 열립니다.

 

이번 글에서는 CSS 수정을 통해 이미지에 테두리를 추가할 것이기 때문에

 오른쪽에서 [CSS]를 선택합니다.

 

 

 

 

 

 

 

 

편집창을 한번 클릭하고 Ctrl + F를 누릅니다.

그럼 노란 창이 켜지며 검색 기능이 활성화됩니다.

그리고 img를 입력합니다.

 

(크롬 창의 검색과는 다릅니다. 반드시 편집창을 한번 클릭해야 합니다.)

 

 

 

 

 

 

 

그럼 이미지 태그의 CSS를 빠르게 찾을 수 있습니다.

현재는 border(테두리) 속성이 0(두께), none(스타일)로 설정되어있습니다.

속성의 값을 바꾸어 테두리를 설정할 수 있습니다.

 

 

 

 

 

 

 

 

 

저는 1px 두께, solid 스타일의, #EAEAEA색상으로 재설정해보겠습니다. 

다음과 같이 코드를 입력하고 [적용] , [새로고침] 버튼을 눌러 확인합니다.

 

 

 

 

 

 

 

 

 

모든 이미지에 연한 회색의 테두리가 생긴 것을 확인할 수 있습니다.

 

 

 

감사합니다.

 

 

 

---

 

 

 

공부한 내용을 복습/기록하기 위해 작성한 글이므로 내용에 오류가 있을 수 있습니다.