저번 글에 이어서 계속해서
HTML에 대해 알려 드리도록 할게요.
저번 글에서는 list tag 인
ol과 ul에 대해 알려드렸는데요
만약 잘 모르시거나 까먹으셨다면
이쪽에서 확인해주시고요.
기초코딩- HTML의 기초 (list tag ol과 ul)
저번 글에 이어서 계속해서 HTML에 대해 알려 드리도록 할게요. 저번에 처음 사용한 h1 태그 기억나시나요? 이렇게 생겼던 거 말이죠. 저번 시간에 깜박하고 말씀 못 드린 게 있는데. h1 태크는 h6까
tm-csc.tistory.com
이번 글은 태그 a에 대해
알려드리도록 할게요.
가장 먼저 a라는 태그는
anchor 즉 닻을 뜻하는데요.
이유는 저도 정확히는
알 수 없지만 쉽게 생각해
link를 연결하는 태그라고
생각하시면 편할 거예요.
뭐 배가 자신이 있는 위치를
고정시키기 위해 닻을 내리듯
원하는 링크를 고정시킨다는
점에서 anchor를 사용한 것
같기도 하지만 뭐 중요한 건
아니니까요.
그럼 바로 VSC부터
실행해볼까요.
보이시는 것처럼 먼저
<a></a>로 해당 태그를
열고 닫아주세요.
(혹시 VSC를 실행하셨을 때
저번 글의 내용이 아직 남아있다면
지우셔도 되고 복습을 위해서
따로 HTML 파일을 만들어
진행하셔도 괜찮습니다.)
그리고 <a></a> 탱크 안에
내용을 입력하면 그게
바로 링크가 되는 거죠.
그럼 적어볼까요?
<a> naver.com </a>
저장하고 크롬으로 실행
그럼 우리가 친 그대로
naver.com은 나오는데
클릭도 안되고 이동도 안되죠.
왜냐하면 클릭을 하려면
태크 a에 다른 정보를
더 추가해줘야 하기 때문인데요.
저번 시간에 배운 ul이나 ol은
탱크 사이에 콘텐츠만 넣어준다면
자동으로 나열해주었는데
왜 태그 a는 안되냐고 물어보실 수도
있다고 생각해요.
이유은 리스트 태그와 타이틀 태그는
어떠한 부가적인 정보가 필요 없는
정말 명확한 정보이기 때문이고
태크 a는 정확히 어디로 이동해야
하는지 부가 정인 정보, 즉 속성을
입력해줘야 하기 때문이에요.
그 속성(attributes) 중 href라는
속성은 HTTP_reference 또는
Hyperlink_reference라는 뜻으로
이동할 곳을 알려주는 속성으로
이렇게 적고 저장하고
크롬으로 실행하면
<a href="http://naver.com"> naver.com </a>
이렇게 밑줄이 그어지고
클릭하면 네이버로 이동하는
사이트가 완성이 되는 거죠.
그럼 이렇게 물어보실 수도
있다고 생각해요.
리스트 태그나 타이틀 태그에도
href 속성을 달아주면
이동할 수 있냐고요.
정답은 NO입니다.
href속성은 태크 a만 작동하는
속성이기 때문에 꼭 링크를
추가하고 싶다면 태그 a를
사용해야 하는 거죠.
오늘도 쉬웠을 거라 생각하고
만일 어려웠다면 익숙하지
않아서 그런 거니 조금은
아무거나 쳐보면서 익숙해
지셨으면 좋겠네요.
여기까지 궁금하신 점 있으시면
댓글에 남겨주시고요.
공감과 구독도 부탁드립니다.
