[HTML5]HTML A 태그와 이미지 태그

웹 페이지를 구성할 때, 이미지는 시각적 요소를 통해 사용자에게 강한 인상을 남기고, 링크는 다양한 페이지를 연결하여 사용자 경험을 향상시킵니다. 이번 포스팅에서는 이러한 중요한 역할을 담당하는 HTML의 두 가지 기본 태그인 <a> 태그와 <img>태그에 대해 알아보겠습니다.

≣ 목차

• a 태그👆
• 이미지 태그📸
• 핵심 내용👀

 

a 태그👆

a 태그는 HTML 문서에서 링크를 생성하는 데 사용되며, 다른 웹 페이지, 동일한 페이지의 특정 위치, 파일 등으로 이동할 수 있는 하이퍼링크를 만들어줍니다. "A"는 "Anchor"의 약자로, 링크를 클릭하면 브라우저 내에서 바로 전환되며, 기본적으로는 글자색이나 밑줄, 손 모양의 커서와 같은 기본 스타일이 적용됩니다.

a 태그는 다음과 같이 구성됩니다:

<a href="링크 주소">링크 텍스트</a>

• href 속성: 링크의 목적지 주소를 지정합니다. 이 속성은 반드시 포함되어야 하며, 링크가 이동할 URL을 지정합니다.
• 링크 텍스트: 사용자가 클릭할 때 표시되는 텍스트를 지정합니다. 이 부분은 보통 웹 페이지 상에 하이퍼링크로 표시됩니다.

a태그를 사용하여 페이지 간의 연결을 구성하는 다양한 방법에 대해 알아보겠습니다.

href 속성

링크의 목적지 주소는 href 속성에 지정됩니다. 이는 다른 웹 페이지, 현재 페이지의 특정 위치, 파일 등이 될 수 있습니다. 예를 들어, 아래의 코드에서 "네이버"라는 텍스트를 클릭하면 네이버의 홈페이지로 이동하는 링크를 생성합니다.

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

 

임시 링크 #

개발 초기에는 연결해야 하는 대상의 주소가 명확하지 않을 수 있습니다. 이럴 때는 href 속성에 #을 사용하여 임시 링크를 생성합니다. 그러나 임시 링크는 주로 페이지 내의 특정 섹션으로 이동하기 위해 사용됩니다. 일반적으로 페이지 내의 다른 섹션으로 스크롤하여 이동할 때 활용됩니다. 이는 특정한 URL이나 페이지로 이동하는 것이 아니라 현재 페이지에서의 위치 이동을 의미합니다. 따라서 임시 링크는 주로 페이지 내의 내비게이션 또는 스크롤 이벤트와 함께 사용되어 페이지를 이동하거나 특정 섹션으로 스크롤하는 데 사용됩니다.

<a href="#section2">섹션 2로 이동</a>

이 예시에서는 "섹션 2로 이동"이라는 텍스트를 클릭하면 페이지 내의 특정 아이디가 "section2"인 위치로 스크롤하여 이동하는 링크를 생성합니다. 해당 섹션에는 이동하려는 부분에 <a> 태그에 의해 만들어진 <a id="section2"> 앵커가 있어야 합니다.

이메일 주소로의 링크

이메일 주소로의 링크는 사용자가 이메일 클라이언트를 열고 지정된 이메일 주소로 이메일을 보낼 수 있도록 만들어줍니다. HTML에서는 <a> 태그의 href 속성에 mailto: 를 사용하여 설정됩니다.

<a href="mailto:example@example.com">이메일 보내기</a>

여기서 "example@example.com"은 이메일 주소입니다. 사용자가 "이메일 보내기" 링크를 클릭하면 기본 이메일 클라이언트가 열리고, 해당 이메일 주소로 새 이메일이 작성됩니다. 사용자는 이메일 내용을 작성하여 전송할 수 있습니다.

전화번호로의 링크

전화번호로의 링크는 사용자가 휴대전화나 기타 전화 기기에서 바로 전화를 걸 수 있도록 만들어줍니다. HTML에서는 <a> 태그의 href 속성에 tel:를 사용하여 설정됩니다.

<a href="tel:+1234567890">전화 걸기</a>

여기서 "+1234567890"은 전화번호입니다. 사용자가 "전화 걸기" 링크를 클릭하면 해당 전화번호로 바로 전화를 걸 수 있습니다. 브라우저 또는 기기에 따라 전화가 자동으로 연결될 수도 있습니다.

문자로의 링크

문자로의 링크는 사용자가 휴대전화나 기기에서 바로 텍스트 메시지를 보낼 수 있도록 만들어줍니다. HTML에서는 <a> 태그의 href 속성에 sms: 를 사용하여 설정됩니다.

<a href="sms:+1234567890">문자 보내기</a>

여기서 "+1234567890"은 수신자의 전화번호입니다. 사용자가 "문자 보내기" 링크를 클릭하면 해당 전화번호로 텍스트 메시지를 보낼 수 있습니다. 브라우저 또는 기기에 따라 기본 문자 메시지 앱이 자동으로 열릴 수도 있습니다.

target 속성으로 새창으로 전환하기

새 창 전환은 링크된 문서를 클릭했을 때 새로운 창에서 문서가 열리도록 하는 기능입니다. 이를 HTML에서는 <a> 태그의 target;속성을 사용하여 이를 구현합니다.

▶ _self

링크된 문서가 현재의 브라우저 창에서 열리도록 지정합니다. 이는 기본값이며, 사용자가 링크를 클릭했을 때 현재의 브라우저 창이 새로운 문서로 대체됩니다.

▶_ blank

새로운 브라우저 창이나 탭에서 링크된 문서가 열리도록 지정합니다. 이는 새로운 도메인의 창을 열 때 유용하며, 사용자가 링크를 클릭했을 때 새로운 창이나 탭이 열리고, 현재 페이지는 유지됩니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

<a href="https://www.example.com" target="_blank">새 창으로 열기</a>

이 경우, "새 창으로 열기" 링크를 클릭하면 "https://www.example.com" 페이지가 새로운 창에서 열립니다.
이렇게 target 속성을 사용하여 새창 전환을 설정함으로써, 사용자 경험을 개선하고 웹사이트의 네비게이션을 향상할 수 있습니다.

서브페이지로 이동하기

서브페이지로 이동하는 것은 웹사이트에서 메인 페이지와 연결된 보조 페이지로 이동하는 것을 의미합니다. 일반적으로, 웹사이트의 서브페이지는 메인 페이지와 관련된 추가 정보를 제공하거나 특정 주제에 대해 자세히 다루는 데 사용됩니다.

HTML에서 <a> 태그를 사용하여 서브페이지로 이동할 수 있습니다. 이를 위해서는 <a> 태그의 href 속성에 이동할 페이지의 주소를 지정해야 합니다. 예를 들어, 다음과 같이 작성할 수 있습니다.

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

여기서 "img/sub.html" 은 현재 페이지에서 "img" 폴더 내에 있는 "sub.html" 파일로 이동하라는 것을 의미합니다. "메뉴1"이라는 텍스트는 사용자에게 클릭 가능한 링크를 제공합니다. 사용자가 이 링크를 클릭하면 지정된 주소로 이동하여 "sub.html" 페이지가 열립니다. 이러한 방식으로 사용자는 "메뉴1"을 클릭하여 "sub.html"이라는 서브페이지로 쉽게 이동할 수 있습니다.

이미지 태그📸

<img> 태그는 이미지를 문서에 삽입할 때 사용합니다. 이 태그는 단독 태그로, 텍스트와 같이 나열되는 성격(인라인 요소)을 가집니다. 이미지의 단락을 구분 지을 때는 <br> 태그를 사용할 수 있습니다.

기본 문법

<img src="이미지 경로" alt="대체 텍스트">

• src(source): 이미지를 불러올 경로를 지정합니다. 이는 필수 속성입니다.
• alt(alternative text): 이미지가 표시되지 않을 때 대신 표시될 텍스트를 지정합니다. 이는 접근성을 높이고, 검색 엔진 최적화(SEO)에도 도움이 됩니다.
  
  

이미지 확장자(대표적인 형식)

• jpg: 가장 대표적인 이미지 형식으로, 색상 표현이 뛰어나며 압축률이 높습니다.
• png: 투명한 배경을 지원하며, 무손실 압축을 사용하여 이미지 품질을 유지합니다.
• gif: 투명한 배경을 지원하지만, 256가지 색상만 표현 가능하여 화질이 떨어질 수 있습니다. 주로 움짤이나 움직이는 이미지를 나타낼 때 사용됩니다.
  
  

경로 설정

이미지 경로는 작성 중인 HTML 문서의 위치를 기준으로 설정합니다. HTML에서 이미지를 삽입할 때 src 속성을 통해 이미지의 경로를 지정합니다. 경로 설정에는 절대 경로와 상대 경로가 있으며, 각 방법의 차이와 사용법을 이해하는 것이 중요합니다.

절대 경로(Absolute Path):
이미지가 위치한 웹 서버의 전체 URL을 포함합니다. 이는 이미지가 어디에 위치하든 항상 동일한 위치를 가리킵니다.

• 예시: src 속성에웹 서버의 전체 URL을 사용하여 이미지를 지정합니다. 이 경로는 이미지가 웹사이트 내 어느 페이지에 삽입되든 항상 동일한 이미지를 가리킵니다.

<img src="https://www.example.com/images/photo.jpg" alt="Sample Photo">

상대 경로 (Relative Path):
상대 경로는 현재 HTML 파일의 위치를 기준으로 이미지의 경로를 지정합니다. 이는 웹사이트의 디렉터리 구조를 기반으로 합니다.

• 같은 디렉터리 내 이미지: 현재 HTML 파일과 동일한 디렉터리에 있는 이미지를 가리킵니다.

<img src="photo.jpg" alt="Sample Photo">

• 하위디렉터리 내 이미지: 현재 HTML 파일의 하위 디렉터리 images에 있는 이미지를 가리킵니다.

<img src="images/photo.jpg" alt="Sample Photo">

• 상위디렉터리 내 이미지: 현재 HTML 파일의 상위 디렉터리에 있는 이미지를 가리킵니다. -- 은 상위 디렉터리를 의미합니다.

<img src="../photo.jpg" alt="Sample Photo">

• 상위 디렉터리의 하위 디렉터리 내 이미지 : 현재 HTML 파일의 상위 디렉터리의 하위 디렉터리 images에 있는 이미지를 가리킵니다.

<img src="../images/photo.jpg" alt="Sample Photo">

 

figure 요소와 figcaoption

이미지를 캡션과 함께 삽입할 때는 'figure' 요소와 'figcaption'태그를 사용합니다.

<figure>
  <img src="img/camera03.png" alt="카메라 이미지">
  <figcaption>카메라를 올바르게 촬영하는 방법</figcaption>
</figure>

• 'figure 요소는 이미지, 사진, 삽화와 같은 콘텐츠를 그룹화하는 데 사용됩니다.
• 'figcaption' 요소는 'figure' 요소 내의 콘텐츠에 대한 설명을 제공합니다.

핵심 내용👀