프로그래밍 공부 일기

2020년 7월 3일 Progate Lv.148
포트폴리오 작성 중
HTML 링크 정보

이미지에 연결하는 방법과 새 탭에서 링크를 여는 방법

이미지 링크 만들기

이미지 링크는 <img> 태그를 <a> 태그로 둘러싸는 것으로 작성할 수 있다.

<a href="リンク先"><img src="画像パス"></a>

링크 대상을 새 탭으로 설정하는 방법

<a> 태그에 target="_blank" 속성을 붙이는 것으로 할 수 있다.

<a href="ここにURL" target="_blank"></a>

CSS로 링크 디자인 변경

링크의 밑줄을 지우기

CSS로 아무것도 지정하지 않는 경우, 아래 사진과 같이 링크의 텍스트에는 밑줄이 표시된다. 이것을 지우고 싶은 경우, text-decoration: none (을)를 지정한다.

a {
  text-decoration: none;
}

링크 색상 변경

링크의 색을 변경하는 경우는, 문자의 색을 변경할 때와 같이, color 프로퍼티을 지정한다.

a {
  color: skyblue; /* 水色にする */
}

커서를 맞출 때 디자인 변경

셀렉터를 a:hover 라고 쓰는 것으로, 마우스 커서를 링크 위에 올렸을 때의 디자인을 지정할 수 있다.

/* カーソルをのせたとき */
a:hover {
  color: skyblue;
  font-size: 2em;/*文字サイズ2倍*/
  font-weight: bold;
}

방문한 링크 디자인 변경

커서를 맞추었을 때의 디자인의 변경과 같이, 셀렉터를 a:visited 라고 쓴다.

/* 訪問済みのリンク */
a:visited {
  color: skyblue;
  font-size: 2em;/*文字サイズ2倍*/
  font-weight: bold;
}