티스토리 선(경계선)긋기, 줄만들기 - 본문 박스만들기

티스토리 선(경계선)긋기, 줄만들기 - 본문 박스만들기

티스토리 블로그 새단장? 하면서 익힌 줄긋는 방법(줄만들기) 입니다.

HTML은 아니고 CSS쪽에 아래 파랑색 명령어를 추가해주면 됩니다. 

해보면 별거아닙니다. 겁먹지 마시고 설명 따라와보세요! ~_~ 

티스토리 블로그 기준으로 설명해보겠습니다.

1. 아래 명령어를 복사하세요.

#content {

margin:0;

float:left;

width:/*@post-width=*/639px/*@*/;

padding: 35px 0 0 30px;

border-right:1px solid #ddd; padding-right:30px;

border-left:1px solid #ddd; padding-left:30px;

border-bottom:1px solid #ccc;  padding-bottom:35px;

border-top:1px solid #ccc;  padding-top:35px;

}

직접 드래그-복사가 안되니 메모장 파일 올려드릴테니 다운해서 복사하세요!

줄만들기.txt

2. 원하는 섹션에가서 명령어를 붙여넣기 하세요.

#content - 본문 부분

#sidebar - 사이드 바 부분

(보너스1) 명령어 설명/해석

border-right:1px solid #ddd;

- 해당 섹션에 경계선을 만드는데 solid 타입으로 우측에 1px 굵기로 #ddd 색으로 한다.

 padding-right:30px;

줄과 해당섹션에 30px 여백을 둔다

(보너스2) 디자인 오류 해결법

* 만약 박스를 만들었는데 요소가 튕겨나간다 그런문제가 발생하면 그건 전체 본문크기가 작아서 그런겁니다.

css부분에서 #container 찾아서 적당히 늘려주세요.