[HTML] 하이퍼링크, 이미지

하이퍼링크와 이미지

 
 
링크는 문서와 문서 간 연결을 의미하며, 기본으로 a 태그를 사용한다. 사진과 같은 이미지 객체를 사용할 때는 img 태그로 작성한다. 웹 서핑을 할 때 글자나 이미지를 클릭하면 다른 웹 페이지로 이동하는데 해당 웹 페이지를 연결하는 걸 '링크'라고 한다.
 
 

📌 글자에 링크 걸기

<a href='링크'>이동하기</a>

📌이미지에 링크 걸기

<a href='링크'><img src='이미지 정보'></a>

 

MDN : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

---

1. 하이퍼링크 

 

하이퍼링크란 다른 페이지나 사이트로 연결하는 링크 (문자 또는 이미지)

 

 

a 태그

 

[형식]

<a href="대상 경로" target="링크 연결 방식" title="링크 설명">하이퍼링크 태그</a>

 

• anchor의 약어로 닻을 의미
• 웹 문서를 이동할 수 있게끔 해주는 태그로 내부나 외부 링크 생성
• a 태그는 대상 경로를 의미하는 href 속성 필수로 사용 그외 targer, title 속성 선택해서 사용
• 브라우저는 <a> 태그의 요소를 밑줄 처리해서 표시하고, 요소 위에 마우스를 가져가면 마우스 아이콘으로 변경된다.
• <a> 안의 콘텐츠는 링크 목적지의 설명을 나타내야 한다.

 
 

---

a 태그 속성

 

1) href 속성

 

- href 속성은 a 태그로 생성하는 링크의 대상 경로를 입력할 때 사용한다.
- 속성값은 대상 경로의 주소(URL)이거나 내부 문서의 id 속성값일 수도 있다.
 

 

📌 대상 경로가 명확하지 않을 때 = 빈 프래그먼트 사용


a 태그를 사용할 때 개발 초기 단계에서는 연결해야 하는 대상의 주소가 불분명한 경우가 많다.
이럴 때는 href 속성값에 "#" 넣으면 된다.


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


이렇게 작성하면 a태그를 클릭해도 다른 페이지로 연결되지 않는다. 하지만 a태그는 외부의 다른 페이지나 내부의 다른 영역으로 이동하기 위해 사용하는 것이므로 나중에라도 href 속성값을 올바른 대상 경로로 변경해야 한다.

 

📌 href에 들어 갈 수 있는 값

1. Website 주소
2. malito: 이메일 주소
3. tel: 휴대폰 
4. 특정한 링크를 가리키는 아이디
5. 빈 프래그먼트 #

 

 

2) target 속성

 

- target 속성은 a 태그로 링크를 생성할 때 대상이 연결되는 방식을 지정한다.
- 새 창으로 열리는 방식인 _blank를 제외하고 거의 사용하지 않는다.
- target 속성은 생략할 수 있다.
 

📌 속성값

_self : 현재 탭에서 열기(기본값), 기본값으로 사용하려면 target 속성은 생략해도 된다.
_blank : 새창에서 열기 ✅
_top : 최상위 페이지에서 이동
_bottom : 최하위 페이지에서 이동
_parent : 부모 페이지에서 이동

* target="_blank"를 rel="noreferrer"와 rel="noopener" 없이 사용하면 웹사이트가 API 악용 공격에 취약해진다.

 
 

3) title 속성

 

• 링크에 대한 설명
•  마우스를 댈 경우 텍스트 표시 (툴팁)
  
  
   

---

링크의 상태

 

• 글자에 링크를 걸면 글자의 색상이 바뀌고 밑줄이 생긴다.
• text-decoration:none으로 <a> 태그의 기본 효과를 없애준다.

 

📌
link - 아직 한 번도 방문한 적이 없는 상태 (기본값)
visited - 한 번이라도 방문한 적이 있는 상태
hover - 링크 위에 마우스를 올려놓은 상태
active - 링크를 마우스로 누르고 있는 상태


기본적으로 링크가 걸린 텍스트는 밑줄에, 텍스트 색상이 파란색으로 변경
visited 상태의 링크는 밑줄에, 텍스트 색상이 보라색으로 변경
active 상태의 링크는 밑줄에, 텍스트 색상이 빨간색으로 변경

 

 

---

한 문서 안에서 점프하는 앵커  (책갈피)

 

 
태그의 아이디 속성을 이용한 페이지 내에서 특정 위치로 이동
 
 

☑️ 한 문서 안에서 점프하기 (클릭하면 내용이 있는 위치로 바로 이동)

[기본형]

<a href="#앵커이름"> 텍스트 또는 이미지 </a>
<태그 id="앵커이름"> 텍스트 또는 이미지 </태그>

<a href="#section1">이터널 선샤인 대사</a>
<div id="section1">
<p>클레멘타인은 조엘이 지금은 자신의 단점이 보이지 않지만 언젠가는 찾아낼 것이라고, 
    그러면 자신(클레멘타인)은 조엘이 지겨워지고 헤어질 것이라고. 
    그래서 시작하면 안 된다고 한다. 하지만 조엘은 "Okay."(알겠어. 그래도 상관없어.)라고 한다.
</p>
</div>

 

- 같은 페이지 내 다른 요소로 이동하기 위해서는 고유식별자인 id 속성을 사용한다.
- 태그의 href 값에 id 선택자와 id 값을 적고, 이동하고자 하는 목적지 요소에 id 값을 준다.
- 하이퍼링크를 클릭하면 해당하는 id를 찾아서 이동한다.
 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

<a>: The Anchor element - HTML: HyperText Markup Language | MDN

 

---

2. 이미지

 

img 태그

 

• HTML 문서에 이미지 파일을 첨부할 때 사용하는 태그
• src 속성과 alt 속성으로 구성
• 빈 요소
• 절대경로와 상대경로를 이용해서 이미지 주소 설정

 

---

img 태그 속성

 

웹 페이지에 이미지를 삽입할 때에는 <img> 태그를 사용한다. src 속성은 이미지 파일의 이름과 경로를 알려준다. 웹에서 사용할 수 있는 이미지 파일 포맷은 JPG, GIF, PNG, SVG 네 가지이다.

 

📌
<img src="이미지 경로" alt="이미지 설명" >

src : 이미지 경로를 지정해 이미지 파일을 첨부(필수)
alt : 이미지의 대체 텍스트를 제공

 

1) src 속성 (필수)

 
src는 삽입하려는 이미지의 경로를 입력하는 필수 속성이다.
(이미지의 경로는 URL을 직접 지정할 수도 있고, 내 컴퓨터에 저장되어 있는 파일의 상대경로를 지정할 수도 있다.)
 

 

[절대주소와 상대주소]

• 절대주소: http 형태로 해당 웹 사이트 주소로 이동
• 상대주소:  HTML 파일 이름으로 명시된 웹 페이지로 이동
• 이미지 경로에 사용하는 기호
  • 현재 폴더: ./파일명 (현재 폴더를 의미하는 ./ 기호는 생략 가능)
  • 상위 폴더: ../파일명

 

2) alt 속성 ✅

 

• 이미지 대체 텍스트로서 이미지에 관한 설명을 나타낸다.
• alt는  사용자 경험 개선(UX)을 위해 사용된다.
• 불안정한 네트워크 환경이나 콘텐츠 차단, 지원 형식 불일치 등 이미지를 표시할 수 없는 경우가 발생할 수 있다. 이런 경우 이미지 대신 alt 속성 값으로 이미지에 대한 설명을 텍스트로 제공할 수 있다.
• 비시각적 브라우저(시각 장애인용)를 사용하는 사용자를 위한 스크린리더를 고려했을 때도 alt 속성이 중요함을 알 수 있다. 간단하고 명료하게 작성해야 한다.
• 검색엔진은 어떤 이미지인지를 alt로 찾아낸다.
   

 

3) loading 속성

 

loading : 브라우저가 이미지를 불러올 때 사용할 방식을 지정한다.

 

📌
<img src="이미지파일경로" alt="대체텍스트" loading="eager|lazy">

 

• eager: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러온다. (기본값)
• lazy: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러온다.
  • 페이지 내에서 바로 필요하지 않은 이미지들의 로딩 시점을 뒤로 미루는 것이다. 페이지 로드 시점에 유저에게 보여지지 않는 이미지는 스크롤 등으로 실제로 이미지가 보여지는 시점이 올 때 로딩된다. 그리고 만약 사용자가 스크롤 하는 행위가 없으면, 사용자에게 보여지지 않은 이미지는 절대 로딩되지 않는다. 사용하는 이유는 크게 1) 성능향상 2) 비용감소
    
     

---

 

3. 이미지 링크

 

• <a> 안에 <img>태그를 넣는다.
• 고려할 점은 해당 링크가 가리키는 곳을 설명하는 대체 텍스트를 포함해야 한다는 것 

 

📌
<a href="대상 경로" target="_blank"> <img src="이미지 경로" alt="대체 텍스트"> </a>

 

 
*HTML5부터는 <img>태그 안에 width, height, border 속성을 쓰지 않는다. 이미지 속성은 CSS로 주어야 한다.