반응형

아래 블로그 글을 작성하고 테스트 하는 과정에서 네이버블로그 스마트에디터 3.0에서는 HTML 소스코드 삽입시 편집모드에서는 실행이 되지만 발행을 하면 적용이 되지 않네요.
아무래도 Html코드 보안 이슈가 있어서 막아 놓은듯 합니다.
혹시 해결방법이 나오면 여기에 등록하도록 하겠습니다.
유튜브 동영상 등은 링크를 이용하여 등록하시면 됩니다.



"네이버 블로그 HTML 소스코드 입력"

 

안녕하세요.

네이버블로그 스마트에디터 3.0에 HTML 소스코드 입력하기가 많이 복잡해 졌습니다.

조금은 어렵게 느껴지시겠지만 하나하나 따라하기 해보시면 금방 하실겁니다.

 

※ 티스토리 블로그 HTML 소스코드 입력 방법

참고로 티스토리 블로그는 오른쪽 상단 [기본모드] 클릭하시면 [HTML] 모드 선택하신후 삽입하시면 됩니다.

 

 

사전준비

크롬브라우저에서 작업을 추천 드립니다.

IE는 속도도 느리고 불안정 합니다.

 

크롬브라우저 다운로드

 

삽입할 소스코드는 요즘 핫한 펭수 유투브 동영상 소스코드를 삽입할 예정입니다.

[영상 오른쪽 마우스] --> [소스 코드 복사]

샘플로 복사한 소스코드는 아래와 같습니다.

<iframe width="871" height="490" src="https://www.youtube.com/embed/Julz19sYVpU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

 

 

네이버블로그 글작성

크롬브라우저에서 네이버블로그 글을 작성합니다.

▼ 네이버블로그 글 작성

① 제목

② 본문에 소스가 들어갈 부분에 구분할수 있는 글자나 문자를 입력합니다.

 

html 소스보기(개발자) 모드 진입

단축키 F12 버튼을 클릭합니다.

주로 프로그램을 담당하시는 프로그래머나 디자인 분들이 페이지 점검을 위해 사용하는 도구 입니다.

 

▼ 아래와 같이 ①왼쪽에는 본문  ②오른쪽은 html 소스보기 모드가 위치합니다.

 

html 작업창 변경

한 화면에 본문과 소스보기가 함께 나오기 때문에 편집하기 불편하실겁니다.

몇가지 모드를 변경하겠습니다.

 

본문과 소스보기창 분리

① [옵션] 더보기 아이콘을 클릭합니다.

② [Dock side] 맨 왼쪽 아이콘을 클릭하면 창이 분리가 됩니다.

③ html 소스코드 삽입을 위해 [Elements] 탭으로 이동합니다.

④ PC모드 <-> 모바일 모드 보기 Toggle (토글) 아이콘 입니다.

▼ 본문과 소스창이 분리된 모습입니다.

 

html 소스코드 삽입

 

▼ 소스코드 삽입할 위치 찾기

① [Elements] Tab을 선택 합니다.

② [Ctrl + F] 키를 누르고 본문에 소스삽입할 위치 구분자로 입력했던 문자를 입력합니다.
     저는 [여기에소스코드삽입] 이라고 입력하였으며 소스코드 본문에 노란색으로 위치가 표시가 됩니다.

③ 소스코드 삽입할 위치가 노란색으로 표시가 되며 마우스를 클릭하여 <span> ~ </span> 블럭이 선택된 상태에서
     오른쪽 마우스를 누릅니다.

④ [Edit as HTML]을 클릭합니다.

 

▼ 복사한 소스코드를 입력합니다.

① 편집모드로 변경이 되었으며 기존 소스를 삭제하고 복사한 소스를 입력하고 
    편집모드 영역 밖에 마우스를 클릭 합니다.

 

소스가 치환되어 삽입이 되었습니다.

① 소스가 삽입된 모습

 

▼ 정상적으로 소스가 삽입되어 본문에 유투브 영상이 나옵니다.

    871 * 490 사이즈라 본문 영역에서 벗아나 보이네요.

    소스보기로 사이즈를 조절하시면 됩니다.

 

 

 

* 쿠팡 파트너스 활동으로 수익이 발생 할수 있습니다.

반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기