이미지 태그와 하이퍼링크

HTML문서에 이미지를 삽입할 때 <img> 태그를 사용(단독태그)

<img src="이미 파일의 경로 또는 url" alt = "대체문자">

alt = 이미지가 안보일 때를 대비한 대체문자(엑박 떳을 떄)

경로 >> 폴더안 >> /*작성하는 문서의 기점으로부터!(html 문서와 img 파일을 같은 곳에 저장)

<img src="img (<-폴더이름))/camera01.png" alt = "~~">

 

이미지의 확장자

1. jpg -> 가장 대표적인 이미지 표현 방식, 이미지의 색상을 가장 잘 표현

2. png -> 이미지의 색상을 유지하며 투명한 배경을 나타낼 수 있음 = 누끼따져있는 이미지

3. gif -> 투명한 배경이 가능하나, 색상을 256개만 표현 가능 -> 화질 저하 / 움짤,움직이는 이미지

 

<figure> = 이미지 사진, 삽화같은 컨텐츠를 넣을 때 사용

<img src="경로" alt="대체">

<figcaption>figure 요소에 캡션(설명=텍스트)를 넣을 때 사용하는 태그<figcaption>

     └figure 안에서 사용, 제일 처음이나 마지막에 배치

</figure>

하이퍼 링크

 

a 태그 = 웹페이지를 연결하거나 이동할 때 사용하는 태그 => 다른 페이지의 전환(메뉴표현) /

글자와 같이 나열되는 성격(링크), 링크 연결시 기본 스타일(글자색,밑줄,손모양의 커서,브라우저내에서 바로 전환)

<a href="이동할 페이지 또는 url" 속성></a>

 

여러가지 연결방법

1. 인터넷주소,url >> https://(필수!)

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

 

2. 임시링크 #

<a href="#">임시링크</a>

 

3. 메일( mailto), 전화(tell), 문자(sms)

<a href="mailto:rkfnahs12e@gmail.com">관리자 메일</a>

 

4. 새창 전환

target = 링크된 문서를 클릭했을 때 문서가 열릴 위치를 지정

_self = 기본값 / 현재의 브라우저에서 전환

_blank = 새창전환 /새로운 도메인창을 열 떄

<a href="https://www.naver.con/" target="_blank">네이버 </a>

                                                         └속성

5. 메뉴를 눌러 서브페이지로의 전환 >> 다른 페이지로 이동

<a href="sub.html>메뉴1</a>

<a href="img/sub.html></a>