티스토리 블로그를 운영하면서 사진 이미지를 편집하는 방법은 사용자마다 다르겠지만 이미지 사진 테두리 설정을 선호하시는 분들이 많습니다.
저도 사진 이미지 테두리를 선호하는 편이고 현재도 포토샵을 활용해서 테두리를 직접 적용한 이미지를 사용하고 있습니다.
오늘은 그래픽 편집 프로그램을 사용하지 않고 CSS를 편집해서 본문에 넣은 사진 이미지에 자동으로 테두리를 설정하는 방법을 알아보겠습니다.
티스토리 본문 사진 이미지 테두리 설정
티스토리 관리자 페이지에 접속해 주시고 사이드바에 있는 [꾸미기]-[스킨 편집]을 클릭해주세요.
오른쪽 상단에 있는 [html 편집]을 클릭해주세요.
CSS 편집 창을 선택해 주신 다음 CSS 코드 내에서 [img]를 찾아주세요.
※ 현재 제가 사용 중인 SUARE 스킨에서는 'img'로 표시되고 있고, 티스토리 LETTER 스킨 코드도 살펴보니 동일했습니다. 모든 스킨이 동일할 것으로 생각되지 않고 별도로 img에 대해서 CLASS, ID가 지정되어 있다면 그것까지 확인해 주세요.
img { border: 0; max-width: 100%; } |
현재 사진 이미지에 적용된 CSS 속성은 'border와 max-width'입니다. 일단 이용하고 있는 스킨마다 속성이 다르게 입력되어 있을 수 있는데 자신이 속성을 건드리지 못하겠다면 나머지는 그대로 다 놔두고 'border' 속성만 변경해 주시면 됩니다.
img { border: 1px solid #000; max-width: 100%; } |
일단 위와 같이 border 속성 값을 입력해 주세요. border 속성 안에 1px는 '테두리 두께'를 의미하고 'solid #000'은 '테두리 색상'을 의미합니다.
※ 속성을 입력하신 다음 마무리는 세미콜론(;)을 입력해줘야 속성이 제대로 적용됩니다.
속성을 적용하고 티스토리 본문을 확인하시면 모든 사진 이미지에 테두리가 정상적으로 적용된 걸 확인하실 수 있습니다. 현재 테두리 두께와 색상이 마음에 들지 않으면 자신의 취향대로 변경하시면 됩니다.
img { border: 5px solid red; max-width: 100%; } |
테두리 두께는 5px, 테두리 색상은 빨강으로 변경했습니다.
위에서 변경한 CSS 속성 값 그대로 모든 사진 이미지에 적용되었습니다.
티스토리 본문 사진 이미지 테두리 없애는 방법
테두리를 없애는 방법은 너무 간단합니다. border 속성 값을 '0'이나 '빈칸'으로 해주시면 됩니다. 처음부터 속성 값이 적용되어 있었다면 이런 조치가 필요하지만 애초에 테두리가 적용된 상태가 아니라면 처음 그 상태로 만들어주시는 게 해결 방법입니다.
img { border: 0px; max-width: 100%; } |
최대한 쉽고 상세하게 설명하려고 노력했지만 작성하다 보니 확실히 CSS에 대한 기본적인 개념과 속성 명칭, 속성 값 입력 방법 등에 대한 이해가 부족하면 완벽하게 이해하기는 어려울 거 같다는 생각이 듭니다. 그래도 값을 그대로 동일하게 입력하면 변화를 확인할 수 있으니 이해는 잠시 접어두고 무작정 따라 해보시기 바랍니다.