바이오 대표

[ 티스토리 ] 블로그 꾸미기 - 본문 좌우 공백 padding 수정 (CSS 이용) 본문

Extra

[ 티스토리 ] 블로그 꾸미기 - 본문 좌우 공백 padding 수정 (CSS 이용)

바이오 대표 2022. 8. 11. 16:20

 

문득 게시물을 보는데 글이 화면 좌우로 꽉 차서 너무 답답해 보였기에 본문 좌우로 공백을 더 주고 싶어서 방법을 찾게 되었습니다. 2022.04.10 - [Extra] - [ 티스토리 ] 블로그 꾸미기 - 인용구(blackquote) css로 변경하기 와 같이 스킨 편집의 CSS 를 수정해 줄 수 있습니다. 아래 왼쪽를 보면 본문의 좌우 공백 (여기라고 표시되어있는 부분) 을 오른쪽 처럼 변경하는 방법을 설명하겠습니다. 

 

 

Step 1. 관리자 메뉴 -> 스킨편집 

 

 

Step 2. 오른쪽 스킨편집 창에서 html 편집 메뉴

 

 

Step 3. CSS 스킨편집 창에서 바꾸고 싶은 부분 찾기 { padding: 20px 15px 18 px; 

# body { padding: 20px 15px 18px; background-color: #fff; border: 1px solid #ddd; line-height: 180%; word-break: break-all; } 에서 변경하면 된다. 

 

지금 padding 에 3개의 값이기 때문에 (20px: 위 15px:좌우 18px:아래 값이다.)

  • 4개의 값 : 10px 5px 15px 20px; (위 오른쪽 아래 왼쪽)
  • 3개의 값 : 10px 5px 15px; (위 좌우 아래)  
  • 2개의 값 : 10px 5px; (위아래, 좌우)
  • 1개의 값  : 10px; (모두)

 
 

Step 4. 적용 -> 확인 

적용 한 후 확인 하면서 원하는 공백을 주면 됩니다.