html 링크 걸기 및 새창 밑줄 속성
html 링크 걸기
■ HTML5 에서 하이퍼링크 걸기와 몇 가지 속성에 대해서 알아보겠습니다. 여기서는 <a> 태그를 이용해서 '텍스트'와 '이미지'에 링크를 걸어보고 클릭했을 때 새 창이 열리면서 웹 페이지로 이동하는 과정과 텍스트 링크의 글자색과 밑줄을 제거하는 등의 속성을 알아보겠습니다.
먼저 하이퍼링크의 형식은 다음과 같습니다.
<a href ="이동할 웹 페이지 주소"> "이미지" 또는 "텍스트" </a>
html에서 하이퍼링크의 기본 속성은 클릭했을 때 새로운 창이 뜨지 않고 기존의 창에서 웹 페이지로 이동하게 되구요. 글자색은 파란색이며 기본적으로 밑줄이 그려져 있습니다. 형식과 속성을 생각하면서 예제를 하나 만들어보겠습니다.
■ <a> 태그를 이용해서 이미지와 텍스트에 링크를 걸었구요. 각각 네이버와 Daum으로 이동하도록 했습니다. HTML 문서로 저장하고 웹 브라우저에서 열어보겠습니다.
■ 이렇게 각각 링크가 걸려서 이미지와 텍스트가 출력되는데요. 각각 클릭하면 이 창에서 지정해준 웹 페이지로 이동하게 됩니다.
그럼 먼저 링크를 클릭했을 때 새로운 창이 열리도록 속성을 설정하겠습니다.
■ 예제처럼 <a>태그 안에 [target="_blank"]를 입력해주면 됩니다. 설정을 변경하고 브라우저에서 열어보겠습니다.
■ 이렇게 기존 웹 페이지는 그대로 있고 새로운 창이 나타나면서 링크를 걸어둔 페이지가 열리게 됩니다.
다음은 텍스트 링크에 설정되어 있는 밑줄을 없애고, 글자색을 변경하기 위해서 <style>을 설정하겠습니다.
■ <head> 태그 안에 <style> 태그를 입력하고 <a>태그의 스타일을 지정해주겠습니다. 먼저 링크의 밑줄을 없애는 속성인데요. [text-decoration : none;] 입니다. 그대로 입력하고 브라우저에서 확인해볼게요.
■ 링크에 밑줄이 없어진 걸 확인할 수 있습니다. 다음은 글자색을 바꿔볼게요.
■ <style> 태그 안쪽에 [color : 색;] 값을 넣어주면 되는데요. 그림처럼 단어로 입력해도 되고 RGB 값을 입력해도 됩니다. 웹 브라우저에서 글자색이 바뀌었는지 확인해보고 마무리할게요.
■ 이렇게 지정한 색으로 바뀌게 됩니다. 간단한 내용이니까 메모장 열고 직접 입력해서 확인해보세요. ^^ 수고하셨습니다.