It does not matter how slowly you go as long as you do not stop.
멈추지 않는 한, 느리게 가도 상관없다.
안녕하세요! 토미타미입니다. 오늘은 티스토리 블로그 꾸미기! 본문 이미지에 테두리를 적용해서 꾸며보려고 합니다. 저는 흰 배경을 사용하다 보니까. 썸네일 같은 경우는 상관없는데 본문 이미지 배경마저 흰 배경이면 어디까지가 이미지인지 배경인지 분간이 안 됩니다. 그래서 기존에는 피피티에서 이미지 테두리를 일일이 수정해서 넣곤 했는데. 이게 어려운 일은 아니지만 참 반복 작업이라는 게 귀찮더라고요 ㅎㅎ 어떻게 방법을 고민하다가 CSS 내용 변경으로 본문 자체 이미지에 자동으로 테두리가 생기게 설정하게 됐습니다. 그게 어려운 작업도 아니었고 이제 귀찮은 일거리도 줄었고 테두리 있는 게 나름 괜찮기도 해서 대만족이네요. 그럼, 본문 이미지에 테두리 적용하는 방법 알아보러 가시죠!
함께 보면 좋은 포스팅:
[티스토리 블로그] 사이드바에 구글 애드센스 광고 넣는 법
[티스토리 블로그] HTML코드로 오디오/음성 파일 만들기
적용 전과 후 비교
확실히 전/후를 비교해서 보면 적용 후가 이미지와 배경 구분이 확실히 잘 되죠? 늘 저런 테두리 작업을 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 등으로 변경하실 수 있습니다.
↓↓↓텍스트 파일 다운로드↓↓↓
'일상다반사 > 블로그' 카테고리의 다른 글
| [티스토리] 본문 소제목 꾸미기 : 쉽게 내용 구분하고 가독성도 높이자! (6) | 2022.06.24 |
|---|---|
| [티스토리] 상단 헤더(header)에 검색창 구현하기 (4) | 2022.06.13 |
| Whatever스킨 - 사이드바 인기글/최신글 썸네일 추가 (6) | 2022.05.12 |
| [티스토리 블로그] 사이드바에 구글 애드센스 광고 넣는 법 (40) | 2022.05.06 |
| 포스팅 URL 주소 통일해야하는 이유! (7) | 2022.04.18 |