블로그스팟(구글 블로그, 블로거) 이미지 자동 테두리, CSS 삽입 위치 어디?

블로그스팟에서 이미지 외곽에 테두리를 자동으로 만드는 법에 대해서 알아보겠습니다. 그리고 CSS 넣기를 해야 하는데, 위치가 변경되어 모르시는 분들도 함께 해보겠습니다.

이미지 자동 박스 CSS 코드

블로그를 작성하다 보면 이미지의 배경이 하얀색이어서 구분이 테두리를 넣어서 바탕색과 구분을 지어줘야 할 때가 있습니다.

이때마다 포토샵이나 간단한 디자인 프로그램을 사용하려면 귀찮을때가 많죠. 이때 간단하게 CSS 코드를 통해 자동으로 모든 이미지에 얇은 테두리를 넣는 방식입니다.

아래와 같이 이미지가 보이게 됩니다.

아래 CSS 코드를 복사하세요.

/* 이미지 자동 박스 */

.post-body img {

border:1px solid #555555;

width: fit-content;

}

구글에서 검색하다 보니까 아마 위치가 변경 된거 같더군요. 그래서 이 CSS를 어디에 삽입하는지 모르는 분들을 위해서 적어둡니다.

1. 관리자 페이지어 들어갑니다.

2. 왼쪽 메뉴 중 '레이아웃'을 누릅니다.

3. '테마 디자이너'를 클릭합니다.

4. 왼쪽 메뉴를 아래로 내리면 고급이 있습니다.

5. 'Main Accent Color'을 클릭하세요.

6. 아래로 내리면 'CSS 추가' 가 있습니다.

☝위와 같은 메뉴로 안들어가지시는 분들은 아래를 참고하세요.

1. 위에서 복사한 CSS 코드 붙여넣기 합니다.

2. 오른쪽 하단 '저장' 버튼 클릭합니다.

이렇게 하면 항상 모든 이미지가 검은 테두리가 생기게 됩니다. 사진이나 예술작품같은 이미지를 테두리 없이 올리고 싶은때는 사용하면 안되겠지요.

지금까지 블로그스팟(구글 블로그, 블로거) 이미지 자동 테두리 넣는 CSS 코드와 삽입 위치에 대해서 알아봤습니다.

ratings