A태그 값 넣기 - ataegeu gabs neohgi

[HTML독학] a태그에 title속성 추가하기_a태그 더 알아보기

안녕하세요!

​

a태그에 대해서는

아래 포스팅에서 다룬적이 있습니다.

​

​

​

그렇지만 복습할겸 a태그 사용법에 대해 먼저 알아보겠습니다.

​

​

​

<a href="https://blog.naver.com/alyssa111">하양의 블로그</a>

​

​

​

이렇게 작성하면 화면엔 하양의 블로그 라는 글자에

클릭할 수 있는 링크가 걸린 형태로 보이게 됩니다.

(브라우저에서 클릭할 수 있는 것은 밑줄이 그어진 형태와 마우스를 갖다댔을때 커서가 손가락 표시로 변하게 됩니다. )

물론 클릭하면 큰따옴표("") 사이에 있는 사이트주소로 연결됩니다.

​

​

a태그 예시 전체 내용

a태그 예시

그럼 a태그에 추가할 수 있는 title 속성은 무엇일까요?

​

​

title 속성은 링크되어있는 페이지에 대한 설명을 추가할 수 있는 속성입니다.

​

​

이 속성이 왜 필요한가 하면

1. 링크에 표시되는 라벨에는 긴 설명을 넣기 힘들기 때문

2. 스크린리더기로 읽게되는 시각장애인을 위해

3. 추가적인 설명을 추가함으로써 사용자에게 더 많은 정보를 제공할 수 있기 때문

결국은 링크에 대한 긴 설명을 넣기 위해서라고 할 수 있겠습니다~

​

​

a태그에 title속성을 넣는 방법을 알아보겠습니다~

​

​

<a href="https://blog.naver.com/alyssa111" title="뷰티/여행/맛집/일상 글올리는 하양입니다^^">하양의 블로그</a>

​

​

위에서 작성했던 a태그에 title속성을 추가해보았습니다.

현재 위에 작성된 내용을 분석하자면

a요소에 href속성과 title속성을 지정한 것입니다.

href속성 작성 후에 띄어쓰기 하고서 title속성을 작성하면 됩니다.

​

​

a태그에 title속성 추가 예시 전체내용

a태그에 title 속성 추가 예시

​

​

이렇게 작성된 title속성은 링크된 라벨 위에 마우스 커서를 갖다대면 저렇게 위와 같이 보이게 됩니다.

이렇게 설명문구를 추가하면 사용자에게 해당 링크에 대한 추가적인 정보를 제공할 수 있게 됩니다.

이렇게 설명이 추가되어 보여지는 것을 헤드퍼스트 책에서는 툴팁(tool tip)을 보여준다고 하는군요.

​

​

다음 a태그 더 알아보기 에서는

a태그를 이용하여 페이지의 특정지점으로 이동시키는 방법에 대해 포스팅하겠습니다^^

(여기서 특정지점은 1번 문단이 되거나 페이지의 제일 처음 또는 끝 등 어디가 될 수도 있습니다. )

​

​

​

#html기초 #html독학 #html공부 #a태그 #a요소 #a태그더알아보기 #title속성 #title #링크 #하이퍼링크 #페이지설명추가 #href속성 #툴팁 #tooltip #