0020 HyperText 링크를 제공하는 앵커(anchor)의 <a>요소 02 title 추가하기


3. <a> 요소의 title 속성


title 속성은 요소(element)에 대한 추가적인 정보를 보여주기 위하여 사용하는 속성이다.

    

요소(element)에 title 속성을 부여하면 해당 요소 위에 마우스 포인터를 위치시킬 때 작은 툴팁(tooltip)으로 title 속성에 부여한 문구가 나타난다. 

    

툴팁(tooltip)은 말풍선이라고도 불리는 그래픽 사용자 인터페이스 중 하나이다. 마우스 포인터라 불리는 커서로 특정 항목을 클릭하지 않고 가리키기만 하면 조그마한 상자가 나타나 보충 설명을 보여준다. 

   

다음과 같이 <a> 요소에 title 속성을 부여해 보자. 

    

<a href="https://deliciouslearning.tistory.com/" title="Ankilog를 제공">책 씹어먹는 즐거움</a>


그러면 아래와 같이 마우스 포인터를 링크에 올렸을 때, 우리가 작성한 title 속성의 문구가 툴팁으로 나오는 것을 확인할 수 있다.

    


위 예제는 0020.html 파일이다.

     

title 속성은 <a> 요소에만 부여되는 속성이 아니라 다른 모든 요소들에도 부여될 수 있는 속성이다. 이러한 속성을 전역 속성(global attribute)이라고 한다. 

    

앞에서 배운 id 속성 lang 속성도 전역 속성(global attribute)이다.

    

title 속성은 위의 <a> 요소에서 사용된 것처럼 아래의 형식(syntax)으로 사용된다. 

    

<요소명(element) title="text">


title 속성은 툴팁으로 간단한 문구를 보여주기 때문에 속성값으로 텍스트 형식을 갖는다.

     

title 속성은 <head> 요소의 <title> 요소가 아니다.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0020 a요소 02 title 추가하기.apkg






저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0022 HTML로 글자의 형식 정하기  (0) 2018.11.23
0021 HyperText 링크를 제공하는 앵커(anchor)의 a요소 03 target 속성  (0) 2018.11.22
0019 HyperText 링크를 제공하는 앵커(anchor)의 a요소 01 사용법 및 href 속성  (0) 2018.11.20
0018 이미지를 보여주는 img 요소 03 이미지 다루기  (0) 2018.11.18
0017 이미지를 보여주는 img 요소 02 대체할 문구 및 크기 결정  (0) 2018.11.17

HTML 문서의 큰 틀에서 <html> 요소와 <head> 요소 다음에는 <body> 요소가 등장한다. 그리고 이 <body>요소에 중첩되어 들어있는 요소들이 우리가 보는 웹페이지에 실제 나타나는 요소들이다. 하나씩 알아보자.


0012 제목(heading)의 <h> 요소


신문기사에서 볼 수 있는 헤드라인(Headline)이나 글에 붙이는 간단한 소제목 같은 것을 제목(heading) 요소로 묶어서 구조화한다. 사람이 글을 읽을 때도 이러한 제목(heading)들이 도움 되지만 그것보다 검색엔진이 이러한 제목(heading) 요소를 이용하여 웹페이지의 구조와 그 내용을 분류하고 색인화하기 때문에 적절한 제목을 뽑아서 제목(heading) 요소로 묶어주면 검색 엔진이 웹 페이지에서 전하고자 하는 정보를 검색 결과로 적절하게 제시할 수 있게 된다. 

     

제목 요소는 <h1>에서 <h6>까지 6종류가 있다. 


작성 방식은 다음과 같다. (h1만 대표적으로 작성했지만 나머지도 동일하다.)

<h1>내용(content)</h1>


즉, 시작태그와 종료태그 사이에 제목으로 사용할 텍스트를 내용(content)으로 집어넣으면 된다.

    

<h1>이 가장 중요한 메인이고 <h6>로 갈수록 덜 중요하고 지엽적이다.

실무에서는 보통 <h3> 요소까지 사용한다고 한다.

    

우선, 간단하게 아래와 같이 heading_test.html 파일을 만들어 실행해보자.

    

<!DOCTYPE html>


<html>

 <head>

   <title>HTML Ankilog</title>

 </head>

 <body>

   <h1>가장 중요한 h1입니다.</h1>

   <h2>2번째인 h2입니다.</h2>

   <h3>3번째인 h3입니다.</h3>

   <h4>4번째인 h4입니다.</h4>

   <h5>5번째인 h5입니다.</h5>

   <h6>가장 덜 중요한 h6입니다.</h6>

 </body>

</html>


똑같은 파일을 구글의 크롬(Chrome)과 마이크로소프트의 엣지(Edge)로 열어본 것이 아래의 그림이다. 



우선, 두 브라우저 모두 공통적으로 <h1> 요소를 가장 크게 하고 <h6> 요소를 가장 작게 표현하고 있지만 글자 폰트와 글자 크기 등이 다름을 알 수 있다.

    

이는 HTML은 표준화되어도 HTML 문서에서 사용된 요소들을 웹 브라우저가 표시하는 기준은 표준화되어 있지 않아 웹 브라우저들마다 자체적인 기준을 적용하고 있기 때문이다.

    

따라서 동일한 HTML 문서라도 어떤 웹 브라우저로 표시하느냐에 따라서 그 모양이 달라질 수 있다. 이런 차이가 발생하지 않게 하려면 CSS로 글자의 폰트와 크기를 지정해주어야 한다.

    

슬쩍 보기에는 <h> 요소로 내용(content)을 감싸면 글자의 크기가 커지고 굵어지는 효과가 있으므로 그러한 효과를 보기 위하여 <h> 요소를 사용할 수 있다. 하지만 그렇게 하지 않아야할 두 가지 이유가 있다.

     

첫 번째는 그러한 스타일링은 CSS의 영역이고 HTML로 처리하는 것은 적합하지 않다.

두 번째는 요소(element)는 웹 페이지의 구조를 형성하여 정보를 구조화하는 용도이므로 적절하게 사용되어야만 적절하게 검색되어 올바른 정보 이용자와 연결되기 쉽기 때문이다.


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0012 제목(heading)의 h요소.apkg






저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0014 빈요소(empty element) br과 hr  (0) 2018.11.14
0013 단락(paragraph)을 정의하는 p요소  (0) 2018.11.13
0011 head 요소와 그 내부에 중첩된 title 요소  (0) 2018.11.10
0010 속성(attribute)과 속성 작성방법  (0) 2018.11.10
0009 html 요소와 속성  (0) 2018.11.09

0011 <head> 요소와 그 내부에 중첩된 <title> 요소


HTML 문서의 큰 틀에서 <html> 요소 다음에는 <head></head> 요소가 등장한다.

     

<!DOCTYPE html>


<html lang="ko">

 <head>웹페이지 관련 정보들</head>

 <body>본문(웹페이지의 내용)</body>

</html>


<head>요소는 HTML 문서에 대한 메타데이터(metadata)를 담고 있는 가장 상위의 요소로써 <head>와 </head> 사이에는 다른 요소들이 중첩(nesting) 되어 웹페이지 관련된 다양한 정보(metadata)들을 웹 브라우저에 제시한다.

     

<head> 요소에 중첩되어 들어올 수 있는 요소는 다음의 6개 요소 뿐이다. 

     

<meta>, <title>, <script>, <link>, <style>, <base>


이 외의 요소들이 <head> 요소 내부에 중첩될 경우 웹 브라우저가 해당 요소를 자동으로 <body> 요소로 옮긴다.



   <head> 요소 내부에 중첩된 <title> 요소


<head>에 중첩되는 요소는 다른 요소들과 같이 설명해야 하므로 차차 제시하고 이번에는 <title> 요소만 사용해보자.

     

<title> 요소는 문서의 제목을 정의하는 요소인데 실제로 어떻게 나타나는지 메모장에서 아래와 같이 작성하고 title요소.html

로 저장한 후 실행시켜보자.

     

<!DOCTYPE html>

    

<html lang="ko">

 <head>

  <title>HTML Ankilog</title>

 </head>

 <body></body>

</html>


어떤 일이 벌어지는가?


① 브라우저 상단의 탭 제목이 <title> 요소의 내용인 HTML Ankilog로 표시된다.



② 즐겨찾기에 등록될 페이지 제목이 <title> 요소의 내용인 HTML Ankilog로 표시된다.


③ 마지막으로 검색엔진이 검색결과로 제시하는 페이지 제목을 <title> 요소의 내용인 HTML Ankilog로 표시한다.


즉, <head> 요소 내부의 <title> 요소의 내용은 다음과 같이 반영된다.

     

① 브라우저 상단의 탭 제목

② 즐겨찾기에 등록되는 페이지 제목

③ 검색엔진이 검색결과로 제시하는 페이지 제목


Anki 파일


아래는 본 포스팅의 내용을 갈무리하기 위한 Anki 파일입니다. 참고하시기 바랍니다. 


Ankilog 파일:  0011 head 요소와 그 내부에 중첩된 title 요소.apkg








저작자표시 비영리 변경금지

'Anki로 공부하기 > HTML공부' 카테고리의 다른 글

0013 단락(paragraph)을 정의하는 p요소  (0) 2018.11.13
0012 제목(heading)의 h요소  (0) 2018.11.12
0010 속성(attribute)과 속성 작성방법  (0) 2018.11.10
0009 html 요소와 속성  (0) 2018.11.09
0008 HTML 문서유형선언  (0) 2018.11.08

+ Recent posts

티스토리툴바