본문 바로가기
HTML

[HTML] HTML 태그 속성

by byeongoo 2019. 5. 2.

1. HTML 태그 속성

HTML의 태그만으로는 기능이 부족하기 때문에 속성이라는 문법을 추가합니다. 하이퍼텍스트(문서와 문서가 링크로 연결돼있다.) 특성을 HTML 프로그래밍을 통해서 어떻게 표현할 수 있을 까요? 링크를 어떻게 표현할 수 있는지 살펴보겠습니다. 

 

링크는 2가지 정보가 필요합니다. 이 도널드 커누스라는 부분이 링크라는 정보를 알려주는 <a>태그가 있어야 하고, 어떤 페이지에 연결되있는지 알려주어야 합니다. 그래서 고안된 문법이 속성입니다. 여기에 href 속성의 이름에 url값을 넣어 주게 되면, 이 정보를 바탕으로 브라우저는 링크를 걸도록 약속이 되있습니다.

 

<h1>오늘의 명언</h1> 
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 익힌다.
(<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4">도널드 커누스</a>)

도널드 커누스를 클릭하게 되면 나무위키의 도널드 커누스 설명 페이지로 넘어가는 것을 확인할 수 있습니다.

 

2. 새로운 탭에 페이지 띄우기 예제

위의 예제에서는 도널드 커누스를 클릭하면 나무위키 페이지로 이동합니다. 그렇다면 새로운 페이지에 나무위키 페이지가 뜨게하려면 어떻게 할까요? 바로 target 속성에 "_blank" 값을 추가하면 됩니다. 또한 속성값을 줄 때는 순서는 상관없습니다.

 

<h1>오늘의 명언</h1> 
우리 모두는 <strong>자신의 힘</strong>으로 발견한 내용을 가장 쉽게 인힌다.
(<a href="https://ko.wikipedia.org/wiki/%EB%8F%84%EB%84%90%EB%93%9C_%EC%BB%A4%EB%88%84%EC%8A%A4" target="_blank">도널드 커누스</a>)

 

'HTML' 카테고리의 다른 글

[HTML] html table  (0) 2019.05.08
[HTML] html 태그(p, br, img)  (0) 2019.05.02
[HTML] html 문서의 구조  (0) 2019.05.02
[HTML] 태그의 중첩과 목록(리스트)  (0) 2019.05.02
[HTML] HTML 시작  (0) 2019.05.02