간단한 HTML 태그 기초 새창으로 열리는 배너링크 만들기 파일업로드 색상변경 이미지 크기변경

 안녕하세요 따뜻한 매드엔젤입니다.

오늘은 간단하게 만든 제 SNS 배너를 새창으로 열리도록 HTML 태그를 사용하여 네이버 블로그에 설치하는 방법에 대해서 이야기 남겨보려고합니다. 

 제가 현재 하고 있는 온라인 소셜 네트워크 서비스 SNS 는 총 5가지입니다.

인스타그램, 페이스북, 티스토리, 네이버TV, 네이버블로그 이렇게 5가지를 운영중입니다.

운영중이라는 말을 써야하는건 네이버블로그와 네이버TV 그리고 티스토리 정도가 어울릴듯합니다.

 네이버블로그를 시작으로해서 인스타그램이나 페이스북은 현재 하지않으면 안될정도로 많은 분들이 하게되었고요. 이후에 티스토리까지 넘어오게 되었어요. 

△ 인스타그램 △

<center><a target="_blank" a href="https://www.instagram.com/madangel1004"><img src="https://tistory2.daumcdn.net/tistory/2910294/skin/images/instagram.jpg" /></a><br>△ 인스타그램 △</center>

 인스타그램은 제 사진을 작게 적고 누구나 아는 인스타그램 이미지를 활용해서 만들었습니다

center는 가운데 정렬 a target에서 _blank 가 새로운 창으로 열리게해서 해당 페이지를 연결하는 HTML입니다. 

그리고 a href="연결할페이지링크주소" 를 남겨주시면 됩니다. 그리고 img src="배너로 만들어 놓은 이미지가 저장된 링크"  입니다. 

 배너는 간단한 이미지 파일인지라 저는 티스토리 - 블로그관리 - 블로그관리 - HTML - 파일업로드 에 들어가서 해당 이미지 파일을 업로드 해놓고 마우스 오른쪽 클릭해서 링크 복사 해서 사용하고 있습니다.

△ 티스토리 △

<center><font color="white"><a target="_blank" a href="https://mad-angel.tistory.com"><img src="https://tistory2.daumcdn.net/tistory/2910294/skin/images/tistorybanner2.jpg" /></a></font>△ 티스토리 △</center>

  티스토리 배너의 경우에도 동일합니다.

여기서 아까와는 조금 틀린 부분이 보이실꺼예요.

 font color="원하는색" 간단한 컬러는 red blue 이렇게 영문으로 입력해도 됩니다. 

좀더 섬세한 컬러를 선책하시려면 아래의 링크로 들어가셔서  https://html-color-codes.info/Korean/  색상코드표에서 원하는 컬러를 선택해서 해당 코드를 입력해주시면 됩니다..

△ 네이버 TV △

<center> <a target="_blank"  href="https://tv.naver.com/madangel"><img src="https://tistory4.daumcdn.net/tistory/2910294/skin/images/sssda2.jpg" width="170" height="85" /></a>△ 네이버 TV △</center>

  세상에 쓸모 없는 영상은 없다 세상쓸다 네이버TV 배너의 경우에는 width 폭 과 height 높이를 조절하는 HTML를 추가적으로 넣어봤습니다. 

기본적으로 배너 사이즈는 170*85로 만들었습니다.

 하지만 조금 사이즈 착오가 있어서 크기가 커졌거나 해당하는 사이트와 크기가 맞지 않을때 조절하는 코드인데요. 

이왕이면 이미지 자체를 사이즈에 맞게 만들어서 사이즈 조정하는 코드는 사용하지 않는게 더 좋다고 생각해요 ^^

  간단한 코드이지만 저도 기억할겸 도움이 될겸해서 한켠에 남겨놓습니다.