동적뷰 사이드바뷰에서 글 목록과 본문 사이의 간격 설정

어제 올린 글에 한 분이 동적뷰 사이드바 뷰에서 글 목록과 본문 사이의 거리를 벌리는 방법에 대해 물어봐주셨습니다.

"https://lh6.googleusercontent.com/-Igs9iOvcb9M/Uh1TMstvCqI/AAAAAAAACpw/5ZqBzH9E2CE/w520-h292-no/0b.png

출처 블로그 구경하는 중에 링크 이미지 처럼 사이드바와 본문과의 거리를 벌린것을 봤는데요. 요것도 어떻게 하는지 알려주시면 정말 정말!! 고맙겠습니다."

저 역시 방법이 궁금하여 찾아보았는데요. 아래의 코드를 이용하여 사이드바와 본문 사이의 거리를 벌릴 수 있었습니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin-left:200px;   
 }  

코드 삽입 위치는 [대시보드 → 템플릿 → 맞춤설정 → 고급 → CSS추가] 입니다. 코드 삽입 시 200px을 자신이 원하는 수치로 대체해주면 됩니다.

위에서는 왼쪽 마진을 200px 주는 것을 예로 제시했습니다만, 왼쪽이 가능하다면 오른쪽 역시 가능할 것입니다

그림1

그림2

그림3

그림4

<그림2>에서처럼 오른쪽의 간격을 벌리고 싶다면, left 대신 right를 입력해주면 되겠죠. 코드는 이런 모습일 것입니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin-right:200px;   
 }  

그리고, <그림3> 에서처럼 왼쪽과 오른쪽 간격을 모두 설정하고 싶다면, 왼쪽 마진과 오른쪽 마진을 동시에 입력해 줍니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin-left:200px;   
 margin-right:200px;   
 }  

<그림4>와 같이 왼쪽, 오른쪽, 위, 아래 모두 간격을 주고 싶다면, left나 right라는 단어를 빼 버리고 그냥 'margin'이라고 입력해주면 될 것입니다.

 .sidebar .article {   
 word-wrap:break-word;  
 margin:200px;   
 }  

덧붙여, 아래의 글은 패딩(padding)이나 마진(margin) 개념을 이해하는데 도움이 될 만한 도면을 모아둔 글입니다. 시간날 때 참고하시면, 블로그의 간격을 조절할 때 도움이 되리라고 생각합니다.

관련 글 - 패딩(padding), 마진(margin) 개념을 이해하는데 도움이 될 만한 도면 모음

! 내용수정

이런 저런 테스트를 해보던 중 공백이 "전혀" 없는 긴 텍스트를 입력할 경우, 본문이 본문 영역을 뚫고 나가는 현상이 생기는 것을 확인했습니다. 공백없는 텍스트를 길게 입력하는 경우는 거의 없으므로 크게 문제가 되지 않으리라 생각합니다만, 그래도 혹시라도 모를 경우를 위해 각각의 코드에 다음의 코드를 추가하였습니다.

 word-wrap:break-word;