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

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


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


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


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



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

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




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

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


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


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




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

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


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




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




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

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


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



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

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




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


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

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


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

Comments 4

  • BlogIcon 똥 우

    좋은 정보 감사합니다 ㅎㅎ

  • BlogIcon Cacka IMae

    모바일티스토리보면
    https://roachsblog.tistory.com/ 여기블로그들어가면

    Software Hardware Game Technology 카테고리 검색창 직접만들고싶는데
    어디태그하고
    <title> 첫에블로그들어오면뜨는거바퀴의 블로그 :: 바퀴의 블로그</tilte>
    원도우10 맥OS 폰트로 바꾸기 :: 바퀴의 블로그 이거어캐해용?
    자세히 답변부탁드립니다 어캐만드는지 잘모르겠어용 ㅠ


    'Technology' 관련 글



    'Software' 관련 글

    'Software' 검색 결과

    'Hardware' 검색 결과
    Copyright 바퀴의 블로그. All Right Reserved.
    1/6
    ◀ PREV NEXT ▶


    Reply Edit



    이름 비밀번호 비밀 댓글 등록

    빠른 질문, 답변 & 방명록
    비밀글로 쓴 글에 대한 답변에는 닉네임을 언급하지 않아 "익명성"을 보장합니다. 편안하게 글을 써주세요.
    이 곳은 방명록 역할도 함께 합니다.
    개인정보가 들어가지 않을 경우 가능하면 "공개글"로 적어주세요.
    질문은 가능하면 이메일 문의 말고 이곳에 질문을 해주세요. 질문답변의 수는 31,420개를 넘었습니다.
    https://cdmanii.com/guestbook 이블로그[이미지넣기] [링크넣기] 태그 사이에 이미지나 링크 주소를 넣어주세요.
    Submit 이미지 업로드
    이매의 블로그은 티스토리 앱 알람을 켜놓았기 때문에 질문이 올라오면 거의 곧 바로 답변 드립니다.( 특정 사정이 있는 경우 제외 )
    전화상담이 필요한 경우 비밀글로 전화번호를 남겨주시면 전화를 드립니다. 단 제가 시간이 가능할때만 허용

    [이미지넣기] [링크넣기] 태그 사이에 이미지나 링크 주소를 넣어주세요.
    Submit 이미지 업로드