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

써보고, 해보고

간단한 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로 만들었습니다.

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

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

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