[ RESPONSIVE ] 04 문서셋팅

[ RESPONSIVE ] 04 문서셋팅

1. 메타 데이터

• <meta> 태그는 웹 문서에 대한 정보를 나타냄

 

1) 검색로봇 제어 - <meta name="robots" content="all">

• 모든 검색엔진에 유효하지는 않음.
• ALL : 기본값. 'index,follow'를 지정한 것과 같음.
• NONE : 'NOINDEX, NOFOLLOW'를 지정한 것과 같음.
• INDEX : 그 페이지를 수집대상으로 한다.
• FOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다.
• NOINDEX : 그 페이지를 수집대상에서 제외한다.
• NOFOLLOW : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않는다.

2) 설명문 입력 - <meta name="description" content="XHTML의 구조를 설명">

3) 키워드 입력 - <meta name="keywords" content="xhtml,XHTML,HTML,xhtml의 구조">

4) 작성자 입력 -  <meta name="author" content="LEE Dong ho">

5) 저작도구 입력 -  <meta name="generator" content="SublimeText2">

• 대체로 제작에 적용 된 프레임웍 등을 지칭 함.

 

6) 저작권 입력 - <meta name="copyright" content="(c)webazit.net">

7) 연락처 입력 - <meta name="reply-to" content="webazit@naver.com">

8) 날짜 입력 - <meta name="date" content="2017-04-20T11:53:00+09:00">

• +09:00은 그리니치표준시로부터의 시차. (한국은 +09:00, 미국동부는 -05:00)

 

9) 문서전체의 기본언어 지정 - <meta http-equiv="content-language" content="ko">

10) 우선적용할 스타일 지정 - <meta http-equiv="default-style" content="style">

<meta http-equiv="default-style" content="style">

<link rel="stylesheet" href="common.css" type="text/css" title="common">

<link rel="stylesheet" href="style.css" type="text/css" title="style">

 

 

11) 지정한 시간이후 페이지 이동 - <meta http-equiv="refresh" content="10; url=http://example.com/">

12) 이 페이지가 웹애플리케이션일 때 그 애플리케이션 이름 - <meta name="application-name" content="">

13) 익스플로러에서 최신 버전이 적용되도록 - <meta http-equiv="X-UA-Compatible" content="IE=edge">

14) 모바일 뷰를 위한 뷰포트 지정 - <meta name="viewport" content="width=device-width,initial-scale=1">

 

15) 오픈그래픽, 카카오톡이나 여러 소셜에서 링크를 보여줄 경우 그에 대한 상세 설정
       <meta property="og:title" content="페이지제목">
       <meta property="og:url" content="http://사이트주소/">
       <meta property="og:image" content="http://띄울이미지">
       <meta property="og:type" content="website"> 종류지정
       <meta property="og:description" content="사이트설명">

16) 트위터에 대응한 설정
       <meta name="twitter:card" content="summary"> 특성을 지정
       <meta name="twitter:title" content="사이트제목">
       <meta name="twitter:url" content="http://사이트주소/">
       <meta name="twitter:image" content="http://띄울이미지">
       <meta name="twitter:description" content="사이트설명">

 

---

~ 메타요소 참고 사이트 ~

META요소 Click
구글에서 인식하는 META요소 Click

 

 

---

 

2. 파비콘 (정리필요)

 

---

 

3. 구 IE에서 작동하지 않음을 알리는 조건문

    <!-- HTLM5shiv ie6~8 -->
    <!--[if lt IE 9]> 
        <script src="js/html5shiv.min.js"></script>
        <script type="text/javascript">
            alert("현재 당신이 보는 브라우저는 지원하지 않습니다. 최신 브라우저로 업데이트해주세요!");
        </script>
    <![endif]-->

 

---

 

4. 그외 css / js / font 등 연결하기

 

 

 

 

 

GitHub에서 보기 Click!

 

 

---

 

 

* 반응형 사이트 강의 보는곳(WEBSTORYBOY) click!