링크 a 태그 (feat. 하이퍼텍스트)

이번에는 HTML 태그를 배울 때 비교적 초반에 배우게 되는 태그이지만 가장 중요한 것 중에 하나인, 웹의 거의 모든 것이라고 해도 과언이 아닌 a 태그를 배워보겠습니다.

지난 포스트

제목 태그와 글씨를 굵게 해주는 태그

HTML의 기본 문법을 공부하면서 제목 태그인 h1~h6, 글씨를 강조하는 태그인 b와 strong을 배워보겠습니다.

하이퍼텍스트와 속성

a 태그 (링크 태그)

기본 a 태그

미스티의 블로그로 가실 분들은 <a href="https://dreamer-mystee.blogspot.com">여기</a>를 클릭해주세요.

위와 같이 <a href="링크할 사이트의 주소">를 입력하고 닫는 태그인 </a>까지 입력해주시면 됩니다.
클릭할 텍스트를 위의 여는 태그와 닫는 태그 사이에 넣으시면 됩니다.
위의 소스 코드로는 사이트가 새 탭에서 뜨지 않고, 사용하던 브라우저 창에서 그대로 링크된 사이트로 넘어가게 됩니다.
새 탭에서 뜨게 하고 싶다면 아래와 같은 속성을 넣으시면 됩니다.

링크를 새 탭으로 뜨게 하는 태그

a 태그, 새 탭으로

미스티의 블로그로 가실 분들은 <a href="https://dreamer-mystee.blogspot.com" target="_blank">여기</a>를 클릭해주세요.

위와 같이 <a> 태그에 target="_blank" 라는 속성을 추가해서 <a href="링크할 사이트의 주소" target="_blank">라고 입력하시면 됩니다. 띄어쓰기에는 항상 주의하셔야 합니다.
위의 코드를 오타 없이 제대로 입력하면

미스티의 블로그로 가실 분들은 여기를 클릭해주세요.

화면에 이렇게 출력이 됩니다.
'여기'라는 글자 위에 마우스 커서를 올려놓으면 커서 모양이 바뀌면서 링크가 되어있다는 것을 알리고, 클릭하면 링크된 사이트가 새 탭으로 뜨게 됩니다.

링크에 마우스 커서를 올려두면 문자가 뜨게 하는 태그

링크에 마우스 커서를 올려두면 메시지가..

미스티의 블로그로 가실 분들은 <a href="https://dreamer-mystee.blogspot.com" target="_blank" title="드리머 미스티">여기</a>를 클릭해주세요.

위와 같이 <a> 태그에 title="넣고 싶은 문자" 라고 속성을 추가해서 <a href="링크할 사이트의 주소" title="넣고 싶은 문자">라고 입력하시면 됩니다.
위의 코드를 오타 없이 입력하면

미스티의 블로그로 가실 분들은 여기를 클릭해주세요.

겉으로 보기에는 아까 전과 똑같지만, 링크가 연결된 '여기'라는 글자 위로 마우스 커서를 올려두면 title 속성에 입력해뒀던 문자가 뜨는 것을 확인하실 수 있습니다.

다음 포스트

리스트(목록) ol, ul, li 태그

오늘은 HTML 태그 중에서 리스트(목록) 태그를 배워보도록 하겠습니다. 리스트 태그인 ol, ul, li 태그를 사용하면 관련된 항목들을 그룹화할 수 있습니다.