[1일 1코딩] 코딩독학 HTML 링크 feat. tcpschool
오늘은 HTML 링크!
실습해본거 옮겨적기...
tcpschool 사이트에서 보면서
창 두개 띄워 놓고
바로 바로 베끼면서 코딩실습하는중
링크 : <a> 태그
<a href = "링크주소"> HTML 링크 </a>
target 속성 :
링크로 연결된 문서를 어디에서 열지 명시함.
_blank : 링크로 연결된 문서를 새 창이나 새 탭에서 염.
_self : 현재 프레임에서 염 (기본)
_parent : 부모 프레임에서
_top : 현재 창의 가장 상위 프레임에서
프레임 이름 : 지정된 프레임에서
링크의 상태 :
link : 방문한 적이 없는 상태 (기본)
visited : 한 번이라도 방문한 적이 있는 상태
hover : 링크 위에 마우스를 올려놓은 상태
active : 링크를 마우스로 누르고 있는 상태
페이지 책갈피 :
<a> 태그의 name속성 이용
가고 싶은 위치에 <a>태그를 만들고 name 속성을 작성
그 다음 작성한 name 값을 이용하여 <a>태그에서 링크를 걸기
<a href = "#bookmark"> <p>다음으로 이동</p></a>
<a name = "bookmark"</a> <p>여기로</p>
앞에서 했던 내용이랑 오늘 공부한 거랑
응용해서 한 실습 공유합니다 ㅋㅋㅋ
재미있꾼
<head>
<meta charset="UTF-8">
<title>HTML Links</title>
<style>
a:link { color: blue; }
a:visited { color: red; text-decoration: none }
a:hover { color: yellow; text-decoration: none }
a:active { color: gray; text-decoration: none }
</style>
</head>
<body>
<h1 style="color:silver">페이지 책갈피</h1>
<a href="#book"><p>북마크를 해보자</p></a>
<a href="#book2"><p>한번 더 해보자</p></a>
<a href="http://www.tistory.com" target="_blank"><h1>티스토리로 이동</h1></a>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h1 style="color:pink"><a name="book"></a>여기로</h1>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h1 style="color:red"><a name="book2"></a>여기로</h1>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
<h4>여기가 아니고</h4>
</body>
>>결과 한번 확인해보세욤 >> 클릭
제가 쓴 코드 복붙해보시면 됩니당
출처 : TCP스쿨
'[1일1코딩]' 카테고리의 다른 글
| 코딩독학 HTML 리스트 feat. tcpschool (6) | 2018.05.02 |
|---|---|
| 코딩독학 HTML 이미지 feat. tcpschool (2) | 2018.05.01 |
| 코딩독학 HTML 색 feat. tcpschool (2) | 2018.04.27 |
| 코딩독학 HTML 스타일 feat. tcpschool (4) | 2018.04.26 |
| 코딩독학 HTML 주석과 엔티티 feat. tcpschool (4) | 2018.04.23 |