HTML CSS 자바스크립트 무작정 따라하기

Presentation on theme: "HTML CSS 자바스크립트 무작정 따라하기"— Presentation transcript:

1 HTML CSS 자바스크립트 무작정 따라하기

2 Chapter 06. 하이퍼링크 만들고 꾸미기

3 HTML CSS 자바스크립트 무작정 따라하기
학습목표 하이퍼링크의 역할에 대해 알 수 있다. 이미지와 텍스트에 하이퍼링크를 만들 수 있다. 상대 경로와 절대 경로를 이해할 수 있다. 새 창에 링크 내용을 열 수 있다. 텍스트 링크의 밑줄을 없앨 수 있다. CSS를 통해 링크의 밑줄을 다양하게 활용할 수 있다. HTML CSS 자바스크립트 무작정 따라하기

4 HTML CSS 자바스크립트 무작정 따라하기
하이퍼링크의 종류 하이퍼링크(HyperLink) : 다른 문서, 혹은 다른 사이트로 바로 연결해 주는 기능 ‘링크(link)’라고 줄여서 부르기도 한다. 1) 텍스트 링크 텍스트에 링크를 추가하면 텍스트에 밑줄이 생기므로 스타일시트를 이용하여 링크가 추가된 텍스트의 밑줄을 없애야 한다. 텍스트 링크 위로 마우스 포인터를 가져갈 때 스타일이 바뀌게 함으로써 링크를 강조한다. 2) 이미지 링크 눈에 띄는 이미지를 사용해서 링크하는 방법 이미지 링크 위에 마우스 포인터를 가져가면 간단한 설명글(대체 텍스트)이 나타남 이미지에 링크를 추가할 경우 이미지 주변에 자동으로 테두리가 생기기 때문에 스타일 시트를 이용해서 이미지 링크의 테두리를 보이지 않게 처리해야 한다. 3) 메뉴 링크 메뉴를 강조하기 위해 마우스 포인터를 메뉴 위로 올려놓았을 때 쉽게 눈에 띄는 변화가 생기게 하는 경우가 많다. HTML CSS 자바스크립트 무작정 따라하기

5 HTML CSS 자바스크립트 무작정 따라하기
하이퍼링크 만들기 - <a> 1) 링크 만들기 <a> 태그 : 링크를 만드는 태그 텍스트 링크에서부터 메일 링크에 이르기까지 모두 <a> 태그를 사용하지만 어떤 요소에 링크를 추가하는지, 또는 링크하는 대상이 무엇인가에 따라 여러 종류의 링크가 만들어진다. ① 텍스트 링크 기본형식 <a href="연결할 문서나 사이트 경로">텍스트</a> ②이미지 링크 기본형식 <a href="연결할 파일 경로“><img src="이미지 파일 주소"></a> 2) 툴팁 링크 위로 마우스 포인터를 올려놓았을 때 나타나는 작은 설명 창 시각 장애인을 위한 페이지를 만들 때 스크린 리더 프로그램에서 title 속성에 있는 내용을 사이트 방문자에게 읽어준다. 기본형식 <a href="연결할 문서나 사이트 경로“ title="링크 내용에 대한 요약 설명”>텍스트</a> HTML CSS 자바스크립트 무작정 따라하기

6 HTML CSS 자바스크립트 무작정 따라하기
상대 경로와 절대 경로 css2.htm에서 script3.htm을 링크하려고 할 때 ① 상대 경로 : <a href="../script/script3.htm">script3.htm으로 연결하기</a>　 ② 절대 경로 : <a href =" 연결하기</a> HTML CSS 자바스크립트 무작정 따라하기

7 HTML CSS 자바스크립트 무작정 따라하기
앵커 이용하기 앵커(anchor) : 웹 문서가 길 경우 문서 안에 팻말을 달아놓고 그 위치로 한번에 이동할 수 있게 하는 기능 1) 이동할 위치마다 앵커 만들기 기본형식 <a name="앵커 이름">텍스트 또는 이미지</a> 2) 앵커로 연결하는 링크 만들기 기본형식 <a href="#앵커 이름">텍스트 또는 이미지</a> HTML CSS 자바스크립트 무작정 따라하기

8 HTML CSS 자바스크립트 무작정 따라하기
새 창에 링크 열기 다른 사이트로 링크하거나 현재 페이지를 유지한 상태에서 링크 페이지를 표시하려고 할 때는 <a> 태그의 traget 속성 사용 기본형식 <a href="연결할 페이지나 파일의 경로" target="속성값“>텍스트나 이미지</a> 속성값 설명 _blank 새 브라우저 창을 열고 거기에 링크 내용 표시 _self 현재 브라우저 창에 표시. target 속성을 따로 지정하지 않으면 target="_self"로 인식함. _parent 프레임에서 사용 _top HTML CSS 자바스크립트 무작정 따라하기

9 HTML CSS 자바스크립트 무작정 따라하기
링크 밑줄 다루기 1) 링크 밑줄 없애기 텍스트 링크라면 text-decoration 속성을 none으로 설정하고 이미지 링크라면 border를 0으로 설정한다. 예 a:link { text-decoration:none; color:black; font-size:12px; } 예 img{ border:0; } 2) 밑줄을 점선으로 표시하기 예 .mymenu a { text-decoration: none; border-bottom:1px dotted black; color:black; font-size:12px; } 이 부분을 조절하면 밑줄의 색상을 바꿀 수 있다. HTML CSS 자바스크립트 무작정 따라하기

10 링크와 관련된 스타일 1) a:hover 2) a:active 3) a:visited ※ 링크 스타일의 순서
마우스 포인터를 링크 위에 올려놓았을 때의 스타일 예 a:hover { color:red; text-weight:bold; } 예 .more a:hover { background: yellow; text-decoration:overline underline; } 2) a:active 마우스를 클릭하는 순간, 즉 활성화(active)되는 순간의 스타일 3) a:visited 한번 방문했던 링크의 스타일 예 a:active { color:red; } 예 a:visited { color:black; } ※ 링크 스타일의 순서 링크 스타일들을 두 개 이상 사용할 경우 다음과 같은 순서를 지키도록 한다. ① a:link ② a:visited ③ a:hover ④ a:active HTML CSS 자바스크립트 무작정 따라하기