네이버 홈페이지형 블로그 기초편 .06버튼이미지 위젯 링크걸기(스마트에디터3.0버전)

네이버 블로그를 운영하신다면 홈페이지형 블로그 만들기 도전을 해보셨으면 좋겠습니다. 홈페이지를 저렴한 비용에 만드는 곳도 많아지긴 했지만 네이버 블로그만큼 네이버에 노출이 잘되는 채널을 찾기 힘든 것 같습니다.

물론 키워드 부분이나 여러 블로그 공부를 통해서 마케팅을 해야겠지만 소규모로 시작하는 마켓이라면 블로그를 최대한 활용하는 것을 추천합니다. 홈페이지형 네이버 블로그 만드는 방법을 유튜브에 영상으로 먼저 올리고 글로 남기게 되었습니다. 아무래도 영상으로 전달하는 것이 좀 더 쉽게 느껴지지 않을까 해서 시작했는데 영상만으로는 부족한 부분이 있어서 이렇게 포스팅을 하게 되었습니다.

*네이버 홈페이지형 블로그 만들기 HTML 위젯 코딩 소스 종합 모음(txt 파일 첨부)를 글 하단에 두었습니다. 파일을 다운로드하여 편하게 작업해 보세요.

홈페이지형블로그 기초6편 목차

1. 유튜브 강의
2. 스마트에디터 3.0으로 HTML코딩 방법
3. target속성
4. alt 속성

영상에서는 다루지 못한 부분들을 좀 더 디테일하게 작성을 하게 되었고, 한번 더 저도 정리를 하는 시간을 갖게 되었습니다. 역시 블로그만의 정적인 맛도 장점인 것 같습니다. 그럼 오늘은 저번 포스트에 이어서 버튼 이미지 위젯 링크 거는 다른 방법을 알아보도록 하겠습니다. 이전 글쓰기 버전으로 링크 거는 방법이 좀 더 쉽게 느껴지신다면 아래 관련 글 바로가기를 참고 부탁드립니다. 이번 시간에는 스마트 에디터 3.0 버전으로 버튼 위젯에 html로 링크 연결하는 방법을 알아보도록 하겠습니다.

네이버홈페이지형블로그-스마트에디터3.0

유튜브 강의
홈페이지형 네이버 블로그 만들기
01 / 02 / 03편

스마트에디터 3.0으로 버튼 이미지 업로드 후
HTML코딩 방법

방법1) 포스트쓰기(새글쓰기)-비공개 카테고리로 지정한 "게시판" 카테고리로 선택합니다.

방법2) 키보드 Ctrl을 누른 채 파일을 클릭하면 복수 선택이 가능합니다. 업로드할 이미지를 선택한 후 열기 버튼을 클릭합니다. 버튼 이미지가 업로드되었다면 발행 버튼을 클릭하여 비공개로 포스트를 발행합니다.

방법3) 저의 경우 투명인 배경에 흰색 텍스트라 이미지가 보이지 않지만 업로드가 잘되었습니다. 블로그에 업로드 한 이미지는 각각의 주소(URL)를 갖게 됩니다. 이 주소를 메모장에 붙여 넣기 해주면 됩니다.

방법4) 이전 글쓰기 버전에서 했던 방법과 이 부분은 동일합니다. 버튼 이미지를 우클릭하여 나타나는 메뉴 중 속성을 클릭합니다. 주소(URL)의 속성 값을 드래그하여 복사합니다. *주소의 속성 값이 긴 편이므로 "http://"로 시작하는 부분부터 끝까지 확실하게 드래그해야 합니다.

네이버-스마트에디터3.0-HTML코딩-방법

방법6) 이제 준비된 주소로 간단하게 HTML 코드를 작성해보겠습니다. 링크 버튼 위젯의 HTML 코드는 아래와 같습니다.

<a href="링크url" target="_blank">

<img src="버튼이미지url"

alt="버튼이미지명"></a>

target 속성

◎target 속성: target속성으로 지정을 하면 프레임에 링크된 문서가 열 리가 됩니다. 문서를 여는 프레임을 지정하는 값을 알아보겠습니다.

_blank 이름이 없는 새로운 창을 열고, 그 창에 내용을 표시합니다.

_self 링크하는 곳과 같은 프레임에 내용을 표시합니다.

_Parent 링크될 문서를 링크 전 원래의 프레임인 부모 프레임에서 나타냅니다. 부모 프레임이 없는 경우에는'_self'와 같은 결과를 나타냅니다.

_top 이미 있는 프레임을 모두 해제하여 창 전체에 내용을 표시합니다. 부모 프레임이 없는 경우에는 '_self'와 같은 결과를 나타냅니다.

alt 속성

alt 속성: 이미지를 표시하지 못하는 브라우저를 위해 간단한 이미지의 설명을 붙여주는 것입니다.

네이버-홈페이지형블로그-기초6편

한번 더 최종 정리를 한다면, 메모해 두었던 이동할 페이지 링크 주소(url)를 붙여 넣기 해주면 됩니다. 버튼의 주소 또한 마찬가지로 메모장에 복사해 두었던 링크 주소(url)를 붙여넣기 해주면 됩니다. 그리고 클릭 시 보이는 창이 새창으로 열리게 할 것인지, 아니면 보여지는 창에 열리게 할 것인지를 위 target속성을 참고하여해 주시면 됩니다.

<a href="이동할페이지url"

target="_blank">

<img src="버튼이미지url"

alt="이미지설명텍스트"></a>

버튼 이미지 위젯 링크 거는 방법은 이렇게 이전 글쓰기 버전으로 하는 방법과 스마트에디터 3.0버전으로 하는 방법 두가지 알아봤습니다. 다음 포스트에서는 이렇게 만들어 놓은 hrml코드로  위젯으로 설정하여 최종적으로 블로그에 적용하는 방법까지 알아보도록 하겠습니다.

HTML위젯 코딩소스 종합모음(txt파일 첨부) 파일 다운로드

댓글