a(Anchor)태그
html은 Hyper Text Markup Language라고 했다.
여기서 중요한건 Hyper Link를 만드는 태그가 바로 a태그다.
anchor에 약자인데, 이 뜻은 '닻을 내리다' 이다. 마치 배가 닻을 걸듯이 "웹 사이트에 링크를 건다, 걸다" 라는뜻으로 앵커태그인것이다. 이런거 알면 또 재미가 있죠 ???
a태그는 다른 웹사이트로 연결해주는 태그라고 생각하면 됩니다.
a태그의 속성
a태그는 링크를 걸때 옵션으로 href 속성을 가진다. href는 hypertext reference의 약자로
HTML의 이름에 걸맞게 이동할 페이지의 링크를 적어주면 a태그로 감싸진 요소를 눌렀을 때 그 페이지로 이동하게 됩니다.
<a href="https://www.naver.com/">네이버 바로가기</a>저번시간에 배운 속성 = "속성값" 기억날텐데요. href라는 속성을 적고 = 기호를 붙이고 어디로 이동할지 경로를 적어주어야합니다. 현재 우리는 naver로 했습니다.
이제 경로에 대해서 알아야하는데요, 경로에는 절대경로와 상대경로가 있습니다.
일반적으로 웹 사이트를 만들때에는 상대경로를 많이 사용합니다.
절대경로
최상위 디렉토리부터 해당 파일까지 경유한 모든 경로를 전부 기입하는 방식이다.
상대경로
현재 파일이 존재하는 디렉토리를 기준으로 해당목표 파일까지의 위치를 작성한 경로이다.
위와같이 https://www.naver.com/은 웹에서의 도메인 주소이기때문에 절대경로에 해당한다.
경로 찾아가기
경로를 찾아가기 위해서는 현재위치와 상위위치(현재위치에서 이전폴더) 다음폴더(다음위치)를 알아야한다.
현재위치(디렉토리)는 ./ 를 사용한다.
상위디렉토리는 ../를 사용한다.
현재위치에서 그 다음 디렉토리를 가려면 / 를 사용하면된다.
현재 사진에 보이는 index.html파일에서 about.html을 접근하려면
현재위치(지금은 index.html파일 기준)에서 src라는 디렉토리를 이동하고 그 안에있는 파일인 about.html을 적어주면된다.
<a href="현재위치에서 -> src폴더로 이동을하고 -> about.html을 넣어주면 된다.">소개</a>
<a href="./src/about.html">이렇게 작성하면 된다.</a>이런식으로 작성하게되면 파일을 연결할 수 있다.
반대로 about.html기준으로 index.html을 연결을하려면
<a href="현재위치에서 -> 상위폴더(practice 폴더)로 이동을하고 -> index.html을 넣어주면 된다.">소개</a>
<a href="./../index.html">이렇게 작성하면 된다.</a>현재위치를 나타내는 ./는 적어도되고 안적어도된다.
저같은 경우엔 상위폴더로 올라가야하는거라면 ./를 안적어줍니다.(가독성이 떨어짐)
그래서 다시 고쳐서 써보자면 이런식으로 작성하는게 더 보기좋다.
<a href="../index.html"></a>가장 중요한 경로에 대해 배웠기때문에 앞으로 배울 img, audio, vedio태그는 공짜라고 생각하면된다.
a태그의 속성
가장많이 사용하는것만 알려주겠다.
<a href="https://www.naver.com/" target="_blank">새창을 열어서 바로가기</a>target="_blank"는 현재 내 페이지에서 이동을하는게 아니라 새로운 창을 열어서 이동한다.
더 자세한것들은 https://www.w3schools.com/html/html_links.asp 여기서 보길바란다.
img태그
img태그는 image를 넣을때 사용하고 웹 접근성을 위해 의미가있는 이미지 (해당상품)에 대체택스트를 넣어주어야한다.
<img src="이미지경로" alt="대체텍스트" />img태그에 경로와 a태그의 경로는 똑같다. 단지 src냐 href냐 속성이름의 차이이다.
대체텍스트가 필요한 이유는 이미지가 없을때 글로 보여준다. 그리고 시각장애인들한테는 이미지를 볼 수 없기에 대체텍스트를 읽어준다.
audio, video태그
오디오파일과 비디오파일을 사용할때에 사용한다.
<audio src="오디오경로" controls></audio>
<video src="비디오경로" controls></video>오디오와 비디오파일은 controls라는 속성만 넣어주면 리모컨처럼 조작할 수 있는 버튼들이 생긴다.
또한 무한루프, 자동재생과 같은 속성들도 있으니 참고해보자.
참고로 속성을 넣었는데 안되는 경우도있지만 비디오와 오디오는 웹 보안적인 문제가 있어서 자동재생하려면 소리를 음소거해야하는 경우가 있다. 안될때에는 구글에다가 검색을 해보자
https://www.w3schools.com/html/html5_video.asp
https://www.w3schools.com/html/html5_audio.asp
참고자료
https://velog.io/@ryurbsgks5114/%EC%A0%88%EB%8C%80%EA%B2%BD%EB%A1%9C%EC%99%80-%EC%83%81%EB%8C%80%EA%B2%BD%EB%A1%9C
https://www.w3schools.com/html/html5_video.asp
https://www.w3schools.com/html/html5_audio.asp
