본문 바로가기

[티스토리 블로그] 본문 이미지 테두리 적용하기

나를 바꾸는 한 마디

목차

본문-이미지-테투리-설정

 

안녕하세요! 토미타미입니다. 오늘은 티스토리 블로그 꾸미기! 본문 이미지에 테두리를 적용해서 꾸며보려고 합니다. 저는 흰 배경을 사용하다 보니까. 썸네일 같은 경우는 상관없는데 본문 이미지 배경마저 흰 배경이면 어디까지가 이미지인지 배경인지 분간이 안 됩니다. 그래서 기존에는 피피티에서 이미지 테두리를 일일이 수정해서 넣곤 했는데. 이게 어려운 일은 아니지만 참 반복 작업이라는 게 귀찮더라고요 ㅎㅎ 어떻게 방법을 고민하다가 CSS 내용 변경으로 본문 자체 이미지에 자동으로 테두리가 생기게 설정하게 됐습니다. 그게 어려운 작업도 아니었고 이제 귀찮은 일거리도 줄었고 테두리 있는 게 나름 괜찮기도 해서 대만족이네요. 그럼, 본문 이미지에 테두리 적용하는 방법 알아보러 가시죠!

 

함께 보면 좋은 포스팅:

[티스토리 블로그] 사이드바에 구글 애드센스 광고 넣는 법

[티스토리 블로그] HTML코드로 오디오/음성 파일 만들기

[티스토리 블로그] 광고 수익 높여주는 로딩 이미지 설정하기

포스팅 URL 주소 통일해야하는 이유!

 

 

 

 

 

적용 전과 후 비교

 

본문-이미지-테투리-설정본문-이미지-테투리-설정
왼: 적용 전 / 오: 적용 후

확실히 전/후를 비교해서 보면  적용 후가 이미지와 배경 구분이 확실히 잘 되죠? 늘 저런 테두리 작업을 ppt로 이미지 서식으로 손수 했다니 ㅠㅠ 글을 잘 안 쓰게 된 이유가 여기 있었네요! 농담이고 적용 방법은 CSS만 변경해주시면 됩니다. 쉽게 따라 하실 수 있을 거예요ㅎㅎ.

 

 

 

 

 

CSS 변경하기

 

본문-이미지-테투리-설정

 

1
2
3
.entry-content img{
 border: 3px solid #000;
}
cs

[스킨 편집-HTML 편집-CSS]에서 찾기로 .entry를 검색해주세요. 그런 다음 .entry-content로 시작하는 부분 아무 곳에 위 사진에 있는 값을 넣어주시고 적용을 누르시면 됩니다. 굳이 같은 곳에 설정값을 넣을 필요는 없지만 한 곳에 있어야 나중에 찾아서 수정하기 쉬워요. 해당 설정값에 있는 3가지 요소는 선 굵기, 타입, 색상입니다. 제가 설정한 건 검은색 3px짜리 줄선이라서 맘에 들지 않으신다면 수정하시면 됩니다!

  • 굵기: 선 굵기를 얇게 하고 싶으시다면 숫자를 낮추고 굵게는 높여주시면 변경이 됩니다. 
  • 색상: 색상은 # 뒷부분을 변경해주시면 됩니다! 원하는 색상이 웹 컬러(Hex)로 어떤 건지 모르시겠다면 여기에서 찾아보시는 것도 추천드립니다.
  • 타입: 선 모양은 solid, dashed, dotted 등으로 변경하실 수 있습니다.

 

↓↓↓텍스트 파일 다운로드↓↓↓

본문 이미지 테두리 적용.txt
0.00MB

 

 


top