html 이미지 링크 / 이미지에 링크 거는 쉬운 방법 / css / html

안녕하세요 :)

오늘은 처음으로!! html 강좌를 해 보려 합니다. :ㅇ

첫 강좌이니 기본 기능을 알아보고 기본 기능만으로 이미지를 삽입하고

이미지에 링크를 걸어 보도록 하겠습니다.

자 우선 html은 head / body로 이루어져 있고

또 나누면 div나 각 구문들로 나눠집니다.

html 코드를 작성하는 방법을 알아봅시다.

간단히 알려드리기 위해 앞에 쓰는 몇몇 head 구문은 작성하지 않았습니다.

오늘 이미지 링크에 필요한 img, a, div 에 대해 알려 드리겠습니다.

div

div 는 division의 약자입니다. division은 한글로 번역하면 나누기, 분할, 분배.. 뭐 이렇습니다.

div는 말 그대로 구역을 '나누어 주는' 역할을 합니다.

img

img는 이미지를 넣을 수 있는 구문입니다.

예시를 보시죠

  <img src="https://tistory4.daumcdn.net/tistory/4848925/skin/images/marpple.jpg" />

이렇게 <img src="이미지 주소"/>라는 구문을 입력하면 그 이미지가 나옵니다.

이미지를 가운데로 옮기고 싶으시다면.

img 코드 앞뒤로 center를 추가하거나

<center>
  <img src="https://tistory4.daumcdn.net/tistory/4848925/skin/images/marpple.jpg">
  </center>

이 외에도 다양한 방법들이 있는데 제 블로그에는

<body>
  <img src="https://tistory4.daumcdn.net/tistory/4848925/skin/images/marpple.jpg" style="display: block; margin: 0 auto;">
</body>

이렇게 블록을 이용해서 가운데로 했습니다.

이 방식에는 조금 차이가 있지만 여러분들이 편하신 대로 하시면 됩니다.

저는 center 추천합니다.

이제 이미지 위치를 조금 바꿔서 여백을 주도록 하겠습니다.

지금까지 내용 중에서 이미지를 넣는 것 말고는 선택사항이니 어려우시면 건너뛰고

이미지에 링크만 걸어도 됩니다.

<body>
    <div class="marpple">
  <img src="https://tistory4.daumcdn.net/tistory/4848925/skin/images/marpple.jpg" style="display: block; margin: 0 auto;">
    </div>
</body>

요렇게 이미지에 div을 넣어서 class는 원하시는 대로 하면 됩니다.

<div class="marpple" style="margin-top:30px;">
  <img src="https://tistory4.daumcdn.net/tistory/4848925/skin/images/marpple.jpg" style="display: block; margin: 0 auto;">
    </div>

이렇게 div 태그 안에 style을 추가해 주시고 style="magin-top:30px"이라는 문구(?)를 넣음으로써

이 div 위에 여백이 30px 생기게 됩니다.

자, 이제는 이미지에 링크를 시켜봅시다. 저는 마플 샵을 운영하고 있기 때문에 저 마플샵 로고를 클릭하면

제 마플샵 링크로 이동되도록 만들어 보겠습니다. 실제로 제 블로그 홈에도 있는 저 로고를 클릭하면

마플샵 링크로 이동해 굿즈를 구매할 수 있습니다. (수익률이.... 또륵..)

링크를 시키려면 <a>라는 코드를 이용해야 하는데요.

예를 들어 네이버라는 글자를 클릭하면 네이버로 이동되게 하고 싶다 하시면

<a href="www.naver.com">
 <b>네이버</b>
</a>

이런 식으로 <a href="이동할 링크">와 </a> 사이에 표시할 글자나 이미지를 넣어 주면 됩니다.

그래서 이렇게 적용해 보면

<div class="marpple" style="margin-top:30px;">
  <a href="http://marpple.shop/egg" target="blank">
    <img src="https://tistory4.daumcdn.net/tistory/4848925/skin/images/marpple.jpg" style="display: block; margin: 0 auto;">
    </a>
    </div>

이렇게 실제로 적용된 html 코드를 티스토리에서 넣어봤어요~

위의 MARPPLE이라는 글자를 클릭하면 바로 마플 샵으로 연결된답니다!!

이런 식으로 자신의 블로그 링크나 메일 주소, SNS 주소 등을 html로 링크해 제작해 보세요.

티스토리에서 서식에 등록해 놓으면 바로바로 글을 쓸 때마다 불러올 수 있답니다.

참고로 mailto:이메일 주소를 링크하면 메일을 바로 보낼 수 있는 링크가 된답니다.

한번 브라우저 검색창에 쳐 보세요.

mailto:egg.design@daum.net

Daum

나의 관심 콘텐츠를 가장 즐겁게 볼 수 있는 Daum

www.daum.net

그리고 구독하기 버튼 만들어서 구독 유도하는 방법!!

<div align="center">
  <button class="btn_menu_toolbar btn_subscription #subscribe" style="border: none;
   background-color: inherit;" data-blog-id="블로그 아이디
   " data-url="http://eggdesign.tistory.com" data-device="web_pc">
     <img src="이미지 주소" /> 
      <span class="img_common_tistory ico_check_type1"> </span>
  </button>
</div>

이 코드를 티스토리 서식 쓰기에 가서 에디터를 html모드로 바꾸고 그대로 복사해주시면 됩니다!

서식을 저장해두시면

이렇게 구독 버튼을 넣을 수가 있답니다~

혹시나 이미지 주소나 블로그 아이디 모르시는 분들!!

댓글 달아주시거나 채널톡 문의로 물어봐 주세요. 정말 하루 이내에는 꼭 답글 달아 드릴께요.

로그인이 필요 없답니다. 언제든지 댓글 달아 주세요 :)

이렇게 오늘은 html로 간단하게(?) 이미지에 링크 거는 법을 알려드렸습니다.

잘 활용해 보세요~ 유용하답니다 :)

잘 보셨다면 공감/댓글 한번씩 해주세요. 로그인이 필요 없어요 (●'◡'●)

저 밑에 하트가 콩닥콩닥 뛰고 있어요 *^-^*

'에그디자인' 카테고리의 다른 글

블로그에 내리는 눈꽃!! 눈꽃빙수 스킨 제작하기 #1 / 티스토리 스킨 (4)	2021.08.08
프로필 페이지 쉽게 만들기 프로필링크 / SNS 링크 / 포트폴리오 (0)	2021.08.08
6시간 만에 마플샵 셀러 승인 후기 및 팁 / 마플샵 / 디자인 / 상품 (0)	2021.08.06
디자인을 판매해? 디자인 상품으로 판매하기 / 마플샵 / 부업 / 디지털 굿즈 (1)	2021.08.05
다음 검색 누락 해결/ 다음 검색 등록 / 검색 최적화 / 티스토리 검색 누락 (13)	2021.08.04

html 이미지 링크 / 이미지에 링크 거는 쉬운 방법 / css / html

'에그디자인' 카테고리의 다른 글

티스토리툴바