목차
안녕하세요! 토미타미입니다. 오늘은 티스토리 블로그 꾸미기! 본문 이미지에 테두리를 적용해서 꾸며보려고 합니다. 저는 흰 배경을 사용하다 보니까. 썸네일 같은 경우는 상관없는데 본문 이미지 배경마저 흰 배경이면 어디까지가 이미지인지 배경인지 분간이 안 됩니다. 그래서 기존에는 피피티에서 이미지 테두리를 일일이 수정해서 넣곤 했는데. 이게 어려운 일은 아니지만 참 반복 작업이라는 게 귀찮더라고요 ㅎㅎ 어떻게 방법을 고민하다가 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 |