블로그 페이지에 HTML 파일 넣어보기

블로그 페이지에 HTML 파일 넣어보기

< Update >

– 2024년 2월8일 재확인한 결과, 아래 글에서 소개한 방법이 네이버블로그에서는 더 이상 가능하지 않았습니다. 현재는 네이버 블로그 편집기 화면상태에서는 HTML 내용이 삽입된 것으로 표시되나, 네이버 블로그 발행을 마치면 해당 HTML 부분이 하나의 선으로만 표시되네요.

블로그를 사용하다 보면 엑셀 등에서 만들어진 표를 그대로 넣고 싶을 때가 있다.

나는 이러한 경우, 1) 엑셀에서 범위를 복사해서, 그대로 표 형태로 붙여 넣는 방법과, 2) 또는 해당 부분을 이미지 파일로 캡처한 후, 이미지 파일로 붙여 넣는 방법을 주로 사용한다. 표 형식으로 붙여 넣는 경우는 글자의 형태로 입력되며, 표에서 수정 등의 편집이 가능하지만, 스타일이나 포맷은 깨지는 단점이 있다. 반면 이미지 형태로 붙여 넣는 경우에는, 포맷과 색상, 스타일은 유지되지만 추후 편집이 불가능한 문제가 있다.

그런데, 간혹 이러한 자료를 웹에 게시할 때 HTML 방식으로 게시하고 싶을 때도 있다.

특히 수정이 빈번한 자료를 그대로 웹에 반복 게시하고자 할 때 같은 경우인데, 엑셀의 파일이 연동이 되거나, 엑셀의 자료를 HTML로 변환해서 그대로 게시할 수 있으면 좋을 것 같았다. 다만, 내가 사용하는 네이버 블로그에서는 이제 더 이상 HTML을 블로그 화면에 그대로 게시할 수 없다고 알려져 있는 상태였다.

혹시 방법이 있을까 궁금해서 이리저리 시도해 본 결과, 다음과 같이 네이버 블로그에 HTML을 게시하는 것은 가능했는데, 다만 발행후에는 글자의 바탕색 같은 스타일 요소가 일부 제거된 상태로 게시가 가능했다.

HTML 원본

네이버 블로그에서 HTML로 입력된 상태

내가 엑셀파일을 HTML로 변환하여, 네이버 블로그에 HTML 방식으로 집어넣었던 과정을 소개한다.

먼저, 최초의 엑셀파일은 다음과 같은 사무실 임대료 수준에 대한 표였다.

엑셀의 “파일” 메뉴에서, “내보내기“를 선택한 후, “다른 파일 형식으로 저장“을 선택한다.

그리고 여기서 “웹페이지” 또는 “웹 보관 파일”을 선택한다. 개인적으로는 단일 파일 형태인 “웹 보관 파일”을 더 선호한다.

이렇게 하면, 다음과 같은 단일 파일 형태의 HTML 파일이 만들어진다.

여기서 이 파일을 열어보면 다음과 같은 형태가 되는데,

화면에서 마우스 우측 버튼을 이용해 “소스 보기”를 선택하고,

다음과 같은 소스파일이 나오면, 전체를 선택해 복사해 준다.

이렇게 HTML 파일은 준비가 완료되었고, 이제ㅔ 이것을 네이버 블로그에 넣기만 하면 되는데,

다음과 같이 블로그 편집기 화면을 열고,

여기서 F12 버튼을 누르면 다음과 같은 HTML화면창이 우측에 열린다.

여기서 다음과 같은 화살표 부분을 누르면 파란색(원래 회색)으로 변환되면서, HTML을 검토할 수 있는 모드가 된다.

그리고 편집창에서 HTML 파일을 넣어줄 곳을 표시하고,

해당 부분을 선택하면 우측 창에 연관된 부분의 배경색이 달라지게 된다.

달라진 배경 부분을 선택하고 마우스 우측 버튼 메뉴를 활성화시키면, 이 중에 “Edit as HTML”이 나타난다.

이를 선택해 준다.

그리고 해당 부분에 다음과 같이 마우스 우측 버튼 메뉴의 하나인 “Paste”를 이용하여 붙여넣기 해준다.

그러면 다음과 같이 HTML 코드가 추가된 것을 볼 수 있다.

이 상태에서 화면 우측의 “X 버튼”을 이용하여 설정 내용을 저장해 반영시켜주면 된다.

(주의 : 이 부분에 X 버튼이 2개 있으므로, 올바로 누르도록 주의한다.)

그 즉시 편집창에 다음과 같이 추가된 HTML의 내용이 나타난다.

이후, 자신이 원하는 대로 나머지 부분을 편집하여 발행하면 완료된다.