[코딩]페이지를 연결 시킬 수 있어요! ② - html 이미지에 하이퍼링크 걸기

오늘 배울 내용을 먼저 정리해 봅니다.
#하이퍼링크       #이미지에 링크 걸기      #<a>링크      #title 속성

 

지난 포스팅에 이어

<a> 태그를 사용해 봅니다. 

이전에는 텍스트에 하이퍼링크를 걸었으니,

오늘은 이미지에 하이퍼링크를 걸어볼게요.

(실제로는 이게 더 많이 쓰인데요!)

 

• 기본형식
  <a href="이동하려는 주소">
     <img src="이미지경로" alt="사진설명"></a>
• 속성
  target="이동하는 창 지정" ;
  "_self"  현재 창에서 이동(디폴트) 
  "_blank
  title="어디로 이동하는지 정보주기"

필요한 작업을 먼저 확인합니다

 

• 하단 로고 이미지에 <a>태그 쓰기
• 외부 링크 주소 확인 : https://smartstore.naver.com/sunnish1022
• 서브 페이지들에 상단 메뉴 링크 추가

3) 하단 이미지에 하이퍼링크를 걸어 주어요!

 

4) <a> 태그 속성으로 title을 지정해 주어 어디로 이동하는지 알려 줄 수 있어요!

 

 

5) 각 서브페이지에 상단 메뉴를 붙여 정리해요

• 시작페이지의 상단 사진 및 메뉴 영역 코딩 동일하게 붙이기
• 불필요한 하이퍼 링크를 삭제
• 서브페이지에서의 이동은 새창이 아닌 현재페이지에서 이동하도록!

 

 

와우! 

코딩의 코도 몰랐던 왕초보가!

아직 서툴르지만 간단한 개인 홈페이지를 만들었어요!

(아직, 인터넷 서버에는 올리지 못해서 구현된 웹페이지를 pc에서 녹화해 보았습니다!)

 

너무너무너무 뿌듯해요!!!!

그냥 다 감사합니다^^

좋은 하루 보내세요!