HTML 새 창에서 링크 만들기와 이미지를 삽입하는 방법 a 태그와 img 태그 응용법

a 태그로 링크 달기

a 태그를 사용하면 다른 페이지 혹은 같은 페이지의 특정 위치로 이동이 가능하며, URL 주소를 입력하면 다른 사이트로 이동이 가능해집니다.

사용법은 a 태그의 href 속성에 이동을 원하는 주소를 넣어주면 됩니다.

같은 페이지 내의 특정 위치로 옮기고자 한다면, 이동을 원하는 태그의 ID 선택자를 href 속성에 넣어주면 됩니다.

a 태그의 링크를 클릭했을 때, 창이 열리는 위치를 지정할 수 있는데 이는 target 속성을 이용해 주면 됩니다.

a 태그 target 속성 리스트
target 속성값	작동 방식
_self	브라우저의 현재 활성화되어 있는 탭에 표시합니다.
_blank	새로운 창에서 표시합니다.
_parent	현재 활성화되어 있는 브라우저의 부모에 표시하고, 부모가 없을시 _self와 동일합니다.
_top	현재 활성화되어 있는 브라우저의 최상단에 표시하며, 없을시 _self와 동일합니다.

아래는 같은 페이지의 newsPage라는 ID 선택자의 위치로 스크롤이 이동하게 되는 태그입니다.

<a href="#newPage">뉴스페이지 이동</a>

작성 중인 페이지에 이미지를 삽입할 때는 img 태그를 사용하면 됩니다.

삽입할 수 있는 이미지는 로컬에 있는 이미지 외에도 서버 및 인터넷상의 이미지 파일의 URL을 넣어서도 삽입할 수 있습니다.

img 태그의 주요 속성으로는 이미지의 경로를 나타내는 src 속성이 있으며, img 태그에서 필수로 선언해야 하는 속성입니다.

또 하나로 alt 속성이 있는데, alt 속성에는 이미지를 설명할 수 있는 텍스트를 넣어주게 됩니다.

이유는 시각장애인 등 화면을 볼 수 없는 특수 환경에서 웹을 이용할 때 스크린 리더가 alt 속성 안의 텍스트를 읽어 사용자에게 이미지를 설명하므로 접근성 차원에서도 좋고, 특히 웹사이트 SEO 평가에 매우 긍정적인 요소가 됩니다.

a 태그와 함께 img 태그를 사용하면 이미지를 클릭하여 다른 페이지나 위치로 이동하게끔 구현할 수 있습니다.