티스토리 html/css 에디터 편하게 사용하기

안녕하세요. 와니닷컴 입니다.

티스토리 참 좋은 블로그 인데요, 많은 프론트엔드 개발자 들이 티스토리 관리자의 HTML/CSS 편집 에디터 를 사용 하는데, 편리하게 사용 할 수 있는 방법을 알려 드리려 합니다. 

많은 분들도 알고 계실지 모르지만, 이것도 하나의 팁이 될 거 같아서 적어 봅니다. 

(개인프라이버시 내용으로 블로그에 들어가는 내용과 소스코드는 모자이크 처리 했습니다.)

티스토리 관리자 페이지에 들어오면, 위 이미지 처럼 화면이 나오는데요.

빨간 테두리로 표시 되어 있는 HTML/CSS 편집을 클릭 합니다. 

그럼 HTML편집 화면이 나오는데요. 

왼쪽에는 페이지가 미리 보여지는 프레임창이 보이고, 오른쪽에는 HTML / CSS 소스 코드가 나와요. 

이렇게 되어 있으면, 소스를 보기가 조금 불편하기도 하고, 티스토리 를 이용해서, 프론트작업을 하시는 분들은 소스코드가 잘 나와 있는 상태가 아니기 때문에 불편한게 이만 저만 아닙니다. 

일단, 웹브라우저를 크롬으로 추천 드립니다.

먼저, 빨간색으로 표시한 프레임바를 마우스 클릭한 상태로 드래그앤 드롭으로 살짝 이동 시켜 줍니다. 

( 프레임바를 이동 시켜야 수정이 가능 합니다. )

그후, 마우스 오른쪽을 클릭 하고, 크롬의 경우 "검사" 를 클릭 해 줍니다.

그럼 위 화면처럼 개발자도구 창이 나옵니다.

소스에 보시면, class="editor" 라는 소스가 있는데, 

style="width:687px;" 의 값을 변경 해 줍니다. 

(위에서, 프레임바를 수정한 사이즈 마다 위 값은 다를 수 있습니다. class="editor" 가 있는 부분에 수정 하시는 것만 중요 합니다.)

위 화면 처럼 style="" 의 값을 

style="width:100%;" 로 입력 해 주고 엔터를 누릅니다.

그럼 위 화면처럼, 소스코드만 나오게 됩니다. 

위 상태로 HTML / CSS 수정하고 편집 하면, 좀더 나은 환경에서 작업을 하실 수 있습니다.

도움 되셨는지 잘 모르겠네요. 

html/css 편집할때 이제는 편하게 소스코드를 보실 수 있습니다.