본문 바로가기
Today I Learned/HTML5&CSS

html5-CSS 태그<title><meta>

by nyanguk 2020. 3. 4.
<title>HTML5 study</title>

태그 (head부분의 태그 )

head 부분에 들어가는 태그에 대해 알아봅시다 

이전 포스팅에서는 전체적인 html body 구성에 대한 태그를 배웠지만 오늘은 head부분에 쓰이는 태그들을 알아보겠습니다.

 

HTML 요소 참고서 https://developer.mozilla.org/ko/docs/Web/HTML/Element 참고 

위의 설명에 따르면 우리가 구글이나 네이버같은 검색엔진을 통해 검색을 할때 head 부분에 있는 정보들을 가지고 분류하는 것 같습니다. 

책으로 비유하자면 책제목 출판년도 지은이 지은이의 이메일... 등등에 해당하는것 같습니다!

 

여기서 주로 쓰이는 것이 <title> ,<meta> 입니다.

 

<title>

문서의 제목을 지정해주는 태그입니다.


<html>

    <head>
        <title> 제목 </title>
        
    </head>

    <body>

    </body>

</html>

제목안에 여러분들이 원하는 제목을 적으시면 됩니다.

 

#EX1

<title> 호엥 </title>

 

#EX2

<title>반갑습니다 쿠팡입니다. </title>

 

#EX3

<title>HTML5 study</title>


창이름이 tilte을 통해서 바뀌는 것을 확인 할수 있습니다.

 

 

 

<meta/>

meta 태그는 닫는 태그가 없습니다. meta 태그의 속성은 크게 3가지가있습니다.

 

가장 먼저 속성 = "속성값"

주 키워드에 대한 값이 라고 생각하면 될 것 같습니다.

내이름 = "nyanguk" , 내가좋아하는 과일 = "복숭아" 와 같은 예를 들 수있습니다.

 

http-equiv

웹 브라우저가 서버에 명령을 내릴 수있는 속성입니다.

다음은 http-equiv의 주요 특성입니다.

  • content-security-policy
  • refresh

name

name 과 content가 짝이 되어 name 특성에 대한 content특성을 지정해 줍니다.

다음은 name의 주요 특성입니다.

  • author
  • description
  • generator
  • keywards
  • referrer

 

content

meta 정보의 내용을 지정합니다.

content의 특성은 각 name과 http-equiv에 따라 달라지므로 사용특성에 알맞는 content특성을 사용하시기 바랍니다.

 

 

  • 검색엔진 설정 
<meta name = "keywards" content = "mata,html5,사용법"/>
<!-- keyward 는 검색엔진에서의 카워드이며 content의 내용을 바탕으로 키워드가 할당됩니다. -->
<!-- 즉 어떤내용을 검색했을때 해당페이지를 추천하면 되는지를 content에 적으면 됩니다.-->
  • 문서의 저자 설정  
<meta http-equiv="author" content="nyanguk"/>
<!-- 이 문서의 저자는 nyanguk이다. -->
  • 문서의 출판사 설정 
<meta http-equiv="publisher" content="nyanguk"/>
<!-- 이문서를 게시한 사람도 nyanguk 이다. -->
  • 웹페이지를 새로고침 
<meta http-equiv="refresh" content="3"/>
<!-- 3초에 한번씩 새로고침해라 -->
  • 다른 웹페이지로 자동 이동
<meta http-equiv="refresh" content="3;url = https://www.youtube.com"/>
<!-- 10초후에 url = "주소" 주소로 이동해라-->

기타 더 자세한내용은 https://webclub.tistory.com/354 를 참고하시면 됩니다. 엄청 잘 정리 되어있어


<!DOCTYPE HTML> 

<html>

    <head>
        <title> meta 실습 </title>
        
        <meta name = "keywards" content = "mata,html5,사용법"/>
        <!-- keyward 는 검색엔진에서의 카워드이며 content의 내용을 바탕으로 키워드가 할당됩니다. -->
        <!-- 즉 어떤내용을 검색했을때 해당페이지를 추천하면 되는지를 content에 적으면 됩니다.-->
        <meta name = "description" content="meta ,html5,사용법"/>
        
        <meta http-equiv="publisher" content="nyanguk"/>
        <!-- 이문서를 게시한 사람도 nyanguk 이다. -->
        <meta http-equiv="author" content="nyanguk"/>
        <!-- 이 문서의 저작권은 nyanguk이다. -->
        <meta http-equiv="refresh" content="3"/>
        <!-- 3초에 한번씩 새로고침해라 -->
        <meta http-equiv="refresh" content="3;url = https://www.youtube.com"/>
        <!-- 10초후에 url = "주소" 주소로 이동해 -->
    </head>

    <body>

        <header> 
            <h2> mata 실습 중입니다. 새로고침이 되고있나요? </h2> 
            <h3> 10초후에 유튜브로 이동합니다. </h3>
        </header>
    </body>

</html>

왼쪽이 주소 이동전 오른쪽이 10초, 주소 이동 후


 

 

웹페이지 만들기 독학 중입니다! 전문가분의 무차별적인 피드백을 기다립니다.. 홀홀홀