HTML - <a> 다른문서로 이동하는 태그





    이전글 :


    HTML이란? - http://server-talk.tistory.com/1


    HTML - 기본 구조의 HTML 문서 만들기 - http://server-talk.tistory.com/101


    HTML - 문법과 주의사항 - http://server-talk.tistory.com/102


    HTML - 목록을 만드는 태그 - http://server-talk.tistory.com/103


    HTML - <br>태그, <p>태그 - - http://server-talk.tistory.com/104


    HTML - <div>, <span> 태그 - - http://server-talk.tistory.com/105


    HTML 기본구조 - 시멘틱 태그 - http://server-talk.tistory.com/106





     <a> 태그 다른문서로 이동하는 태그


    <a> 태그는 anchor '정박지' 또는 '닻'의 약자이며 <a>태그는 혼자만 사용하지 않고 속성을 함께 사용하여야 합니다.



    herf 속성

    hypertext reference 약자로 연결할 주소를 지정하는 속성입니다.

    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>다른문서로 이동하는 태그</title>
    	</head>
    
    	<body>
    		
    		<a href="https://www.google.co.kr/">구글</a>
    
    	</body>
    
    </html>	


    주의 : href에서 따옴표(" ")를 빠트리면 링크가 정상적으로 나오지 않습니다.



    target 속성


    target : 링크된 페이지가 나타날 창을 정하며, 기본적으로 지정해 주지 않으면 현재페이지를 다른곳으로 넘어갑니다.


    target의 종류 및 기능


    1) target="_top" : 링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 Open 된 브라우저 화면을 열도록 합니다.


    2) target="_blank" : 링크시킨 html 문서를 기존 프레임 구조의 브라우저는 그대로 놔두고 새로운 브라우저(새창)에서 열게 합니다.


    3) target="parent" : 기본의 프레임 구조(frameset)를 완전히 벗어나서, 현재의 프레임구조로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크합니다.


    4) target_self : 하이퍼링크 시킨 문서를 같은 프레임에서 열게 합니다. 기본으로 설정 되어 있는 속성입니다.



    이미지로 링크걸기


    그림에 마우스를 클릭하면 그림에 걸려있는 링크로 이동시킵니다.


    <!doctype html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>이미지로 링크 걸기</title>
    	</head>
    
    	<body>
    		<a href="https://google.com"><img src="img/google.png" border="0"></a>
    	</body>
    </html>


    * 이미지의 링크에서 위의 border="0" 속성은 반드시 필요합니다. 링크시킬 때 그림에 태두리를 0으로 속성이기 때문입니다.



    Posted by Server-talk 서버이야기