'링크태그 코딩'에 해당되는 글 1건

  1. 2018.03.14 HTML <a> 링크태그 코딩 (<a href="">)
카테고리 없음2018. 3. 14. 20:20

HTML 작성시 가장 많이 사용하는 태그중 하나로 텍스트나 이미지에 링크를 걸어주는 태그로 현재 이용중인 사이트내의 다른 웹페이지나 다른 사이트의 웹페이지를 연결하는 경우 사용되는 태그입니다.

 

01) HTM의 body 태그안에 작성합니다.

 

 

02) 텍스트에 걸어줄 링크코드와 이미지에 걸어줄 태그를 작성합니다. 이때 사용되는 글자의 크기는 가장 큰 글자인 <h1>오로 지정합니다

 

 

03) 텍스트 링크태그 걸기는 <a-------> 태그의 빨강색으로 된 점선부분에 링크를 걸고 싶은 내용을 텍스트로 입력하여 태그내용을 괄호로  감싸주면 됩니다.  <a>태그와 </a> 사이에 텍스트로 써주게 되면 텍스트를 클릭하게 되면 지정된 네이버 주소로 링크되어 연결됩니다. <a>태그의 속성으로는 href=""와 target=""가 있습니다. 여기서는 href 속성값으로는 네이버주소로 지정하고, target 속성은 _blank로 지정하여 새창에서 열리도록 지정하였습니다.

 

     
 - href=""는 이동할 링크를 지정합니다  

 - target=""는 링크를 어떤 프레임으로 열 것인가를 속성을 지정합니다

 o target="_blank"는 새창에 열립니다
 o target="_parent"는 부모창에 열립니다
 o target="_self"는 자신의 창에 열립니다
 o target="_top"은 화면이 여러 프레임으로 이루어진 경우 모든 프레임을 지우고 전체화면에 열립니다 

 

04) 이미지 링크태그 걸기도 텍스트 링크걸기와 동일한 방식으로 지정하게 됩니다. 다만 여기서는 텍스트가 아닌 이미지가 들어가기 때문에 이미지가 있는 주소와 이미지의 너비, 높이를 입력하게 되면 이미지를 클릭하게 되면 지정된 주소인 네이버로 연결이 됩니다.

 

 

05) HTML 링크태그코딩이 완료되었으면, 단축키인 Ctrl+S를 누른 후 저장하면 됩니다.

 

2. 웹브라우저에서 보이는 HTML <a> 링크태그

 

HTML에서 작성한 대로 웹상에 보이게 하기 위하여 Ctrl+ F1키를 눌러 해당 HTML을 불러옵니다. 여기서는 구글의 크롬 브라우저을 연결하였습니다. 텍스트링크걸기의 네이버로 바로가기를 클릭하거나 이미지 링크걸기의 이미지를 클릭하게 되면 지정된 네이버 화면으로 이동이 됩니다

 

Posted by csgstar