[HTML] A태그(링크 연결) 사용법 및 CSS(밑줄, 점선, 색상)

사이트를 제작하게 되면, 링크를 연결을 많이 하게 되는데

이때, 많이들 사용하는 "<a>" 태그에 대해 설명을 해보도록 하겠습니다.

 

기본문법

<a href="URL" target="_blank" title="노출문구" rel="noopener" download> 이동 </a>

 

href

 : 링크의 목적지로, 연결하고자하는 URL를 연결하면 됩니다.

 

target

 : 링크를 클릭할 때 링크 된 사이트가 열리는 방법을 지정합니다

• _self : 현재 창에서 열기(기본값)
• _blank : 새창 또는 새탭에서 열기
• _parent : 부모 프레임에서 열기
• _top : 전체 창에서 열기

 

title

 : 링크에 마우스를 올렸을때 표시되는 텍스트 입니다.

 

rel

 : 링크된 문서와의 관계를 지정합니다.

•  noopener : 새창이 부모 페이지와 상호작용하지 않도록 합니다.
•  noreferrer : 리퍼러 정보를 전송하지 않습니다.

 

반응형

 

CSS

a 태그에 생기는 선의 위치와 관련된 css 태그

a {
  /* 선 없음 */
  text-decoration-line: none;

  /* 밑줄 */
  text-decoration-line: underline;

  /* 윗줄 */
  text-decoration-line: overline; 

  /* 취소선 */
  text-decoration-line: line-through;

  /* 밑줄 + 윗줄 + 취소선 */
  text-decoration-line: underline line-through overline;
}

 

 

a 태그에 생기는 선의 디자인과 관련된 css 태그

a {
  /* 선의 색상 */
  text-decoration-color : red;

  /* 선의 모양 */
  text-decoration-style : solid; 
  text-decoration-style : double; 
  text-decoration-style : dotted; 
  text-decoration-style : dashed; 
  text-decoration-style : wavy; 
  
  /* 선의 굵기 */
  text-decoration-thickness: 5px;

  /* 선의 디자인 다중 수정 */
  text-decoration: underline red dotted 5px ;
}