[하이퍼링크 생성하기]
우리가 웹페이지에서 어떤 버튼을 누르면 다른 페이지가 이동할 수 있습니다. 이것을 흔히 하이퍼링크라고 하는데요.
웹페이지를 만들 때 이 하이퍼링크 기능을 생성하기 위해서는 아래와 같이 <a>태그의 "href" 속성이 필요합니다.
웹페이지 화면에서 마우스 우클릭하시면 이렇게 소스코드를 확인하실 수 있습니다. (간혹 막힌 곳도 있음..)
저는 네이버 로그인 화면의 소스코드를 확인하였는데요. 우측 회색으로 표시된 곳을 보시면
<a href = "https://www.naver.com" ~~~~~ > ....</a>
라고 되어있는 것을 확인할 수 있습니다.
이건 해당 문구를 하이퍼링크 형태로 변환하여 클릭하면 해당 페이지로 이동할 수 있게끔 하는 기능입니다.
이동하고 싶은 페이지 링크를 href= " ~~~~~ " 형식으로 지정해주시면 됩니다.
[ target 속성 정하기]
이제 하이퍼링크를 생성했으니 다음에 정해야할 것은 target 속성 값입니다.
사실 target 속성 값은 따로 표기하지 않아도 , default 값이 있기 때문에 상관은 없지만....
링크를 클릭하면 새창에서 열릴지 기존 창에서 열릴지를 정하고 싶다면 target 속성값을 미리 설정해주어야 합니다.
target 속성 값에는 ( _blank ) ( _self ) ( _parent ) ( _top ) ( _frame )
이렇게 5 가지가 있습니다.
<_blank>
위 속성은 흔히 우리가 해당 링크를 누르면 새 탭이나 새 창으로 열리는 경우에 쓰입니다.
<_self>
위 속성은 "디폴트 값"인데요. 따로 target 값을 정해주지 않으면 자동으로 설정이 됩니다.
네이버 로그인 창도 따로 설정이 되어있지 않으니 이 값으로 볼 수 있겠습니다.
위 속성의 경우 새 창이 열리지 않고 해당 페이지화면에서 바로 다음 페이지 화면으로 넘어가는 경우입니다.
여러 창이 생기지 않아서 편리하지만, 작업시 앞의 창이 동시에 필요할 경우 추가로 다시 들어가야 하는 번거로움이 있겠군요...
<_parent>
target 값이 _parent 값이면 한단계 위 조상페이지에서 링크페이지가 열립니다. 물론 이 경우에도 새창이나 새탭이 생성되는게 아니라 부모페이지->링크페이지로 바로 변환됩니다.
<_top>
이 속성도 _parent 속성과 비슷한데요. 단지 다른 점은 부모의부모의부모의...부모 이냐 바로 직속위 부모이냐가 다른 점입니다. 맨 꼭대기 최고조상님 페이지를 찾아서 그 페이지를 링크페이지로 바꿔줍니다.
[link 상태 정하기]
이제 마지막으로 하이퍼링크의 상태를 정해야 합니다.
하이퍼링크의 상태를 정한다는건 뭐... 아무것도 하지 않을 때,,, 마우스 위로 지나갈 때,,,, 클릭할 때 등의 상황에서 링크의 모양이 어떻게 변하냐를 의미하는데요.
( link ) ( visited ) ( hover ) ( active ) 이렇게 4가지가 있습니다.
< link > 사용시
link상태의 경우는 그냥 해당 텍스트가 순수한? 링크임을 표시하는 기능입니다. 저는 grey 색상으로 지정해주었습니다.
< visited > 사용시
visited상태는 해당 페이지를 이미 방문했다는걸 표시해주는 기능입니다. 링크를 한번 눌러본 상태에서 다시 들어가보았더니 이렇게 보라색으로 표시되는군요. 물론 색상을 style에서 마음대로 지정할 수 있습니다.
< hover > 사용시
원래는 링크에다가 마우스 화살표를 대고 있는 화면을 캡쳐한건데 화면상에는 화살표표시는 안되는 군요...ㅎㅎ
아무튼 저 위에다가 hover (허공에 지나가다) 를 하게 되면 style 태그에 지정한대로 색상이 pink로 변경됩니다.
마우스를 떼면 다시 원래 색으로 돌아가구요.
<active 사용>
마지막으로 active는 링크를 클릭했을 때 순간적으로 변하는 색상을 지정할 수 있는 기능입니다. "방금 클릭을 했음." 정도로 기억하면 될 것 같습니다.
'Programming Language > html css' 카테고리의 다른 글
| [html] 2. 이미지 (0) | 2023.01.01 |
|---|