HTML_CSS/HTML & CSS

Codeit_링크

AngeRay 2021. 5. 23. 16:54

<a> tag


<a> tag

 

 

다른 페이지로 가는 하이퍼링크(Anchor)를 만들기 위해서는 <a> 태그를 사용하면 된다.

HTML 태그에는 속성(attr)을 추가적으로 써 줄 수 있다.

 

<a> 태그의 속성(attr)

  • <a href="가고 싶은 주소" target="_blank" title="새창으로 가기">content 작성</a>
  • href 라는 속성을 갖는다.
  • 가고 싶은 주소(url 입력 시)에는 'https:://' 를 반드시 작성한다.
  • target="_blank" : 외부 페이지를 가는 링크를 새페이지에서 열라는 속성
  • target="_blank"는 반드시 title="새창"과 같이 사용한다. title은 해당 페이지의 설명문구를 작성한다.

가고 싶은 주소에 내부페이지 주소를 작성하면 내부페이지 이동이 가능하다. 

  • 내부페이지로 이동하기 위해서는 상위폴더와 하위폴더 개념을 알아야 한다.
  • 상위폴더로 이동 시 ../ 를 작성한다. (이동한다는 의미는 해당 폴더를 나간다는 의미와 같다.)
  • 하위폴더는 폴더 안의 폴더로 /를 작성한다. ( ex) seulki/ray.html )

<a> 태그로 content 작성 시 생기는 변화

  • 밑줄이 생긴다.
  • text의 color가 파랑색이 되어있다는 의미는 링크가 걸려있다는 의미이다.
  • 클릭 하고 있음 active의 의미로 text의 color가 빨간색으로 변한다.
  • 클릭 했을 시(클릭 한 후) text의 color는 보라색으로 변한다.
  • 검색은 내가 클릭을 해봤지는 안해봤는지를 알아야 되는게 중요하다.(검색엔진)
  • 기본적으로 <a> 태그 작성 시 생기는 text의 color의 변화는 CSS로 변경해줘야 한다.

<a href="#">content</a>

  • href 속성은 기본적으로 비워두면 안된다. <a> 태그를 만들었는데 해당 링크가 없다면 반드시 #를 작성한다.
  • #으로 설정 시 현재페이지의 맨앞으로 이동 된다.

<a> 태그로는 이미지도 링크 가능한데, 이미지는 새창으로 열린다.

ppt 파일은 다운받아지며 미리보기는 제공되지 않는다. 그러나 pdf 파일은 가능하다.

즉 img, pdf 는 브라우저에서 미리보기가 제공되며, 그 외 파일들은 대부분 다운로드가 실행된다.