요소에 설명된 요소
개시하다
HTML 파일의 헤드 부분은 거의 웹 브라우저에 표시되지 않는 부분이지만 컴퓨터가 웹 사이트를 읽는 규격에 있어서 매우 중요한 정보
1.meta(금속)의 역할
meta(원) 요소는'페이지 정보'를 정의하는 요소이다.
HTML의 메타데이터는 문서에 대한 다양한 정보를 나타냅니다.
간단하게 말하면 검색엔진, 브라우저, 소셜미디어 등 시스템을 대상으로 쓴 것이다.
그래서 홈페이지를 보러 온 사람들은 원 라벨을 거의 보지 않았다.
쓰고 싶은/ 알고 싶은 메타태그
문자 코드<meta charset="UTF-8">
문자를 지정하기 위해 쓰십시오.만약 일본어 사이트라면 반드시 라벨 아래에 써야 한다.
페이지 개요 표시<meta name="description" content="ページの概要をあらわす"
meta description은 결과 화면 조회수를 높이는 기본 역할입니다.이것은 검색엔진과 검색 사용자에게 페이지의 개요를 전달하는 데 사용되는 탭입니다.내용을 어떻게 기술하든 상관없지만'이 글에는 이런 내용이 쓰여 있다'는 간단한 메시지가 좋다.Google 검색 결과에 표시되는 글자 수와 중요도가 자주 변경됩니다.
스펀지 패드 디자인용(스마트폰 지원)<meta name="viewport" content="width=device-width, initial-scale=1">
스마트폰과 태블릿PC에도 가장 잘 어울리는 내용을 써야 한다.
이 지정을 기술함으로써 스마트폰을 위한 *CSS를 써서 스마트폰을 위한 웹 사이트를 만들 수 있다.
최적화 IE<meta http-equiv="X-UA-Compatible" content="IE=edge">
Internet Explorer(IE)에는 웹 사이트를 표시할 때 일반적으로 표시되는'표준 모드'와 과거 버전에 표시된'호환 모드'기능이 있다.열람자를 모르고 교환 모드로 열람하면 페이지의 디자인이 파괴될 수 있다.이 메타 태그를 설명하는 경우 항상 표준 모드로 표시할 수 있습니다.이는 IE 이전 버전을 사용하는 사용자를 고려한 설명입니다.
다른 언어로 번역하지 않음<meta name=“google” content=“notranslate”>
영어 사이트 등을 찾아보면'번역할까요?'대화 상자.
이 메타태그를 설명하면 번역 옵션을 표시할 수 없습니다.
SNS와의 협력 OGP<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="サムネイルとして表示する画像">
<meta property="og:type" content="ページの種類">
OGP는'Open Graph Protocol'의 약칭이다.
페이스북, 트위터 등 SNS에 웹 페이지를 공유할 때는 해당 페이지의 제목과 URL, 아이맵 등을 지정된 방식으로 표시한다.
2. 타이틀 요소 <title>ページのタイトル</title>
모든 홈페이지에는 제목이 있다.
이 제목은 바디 요소의 요소와 달리 웹 브라우저의 제목 표시줄과 탭 부분에 표시됩니다.
검색 결과에도 표시될 부분이니 알기 쉬운 맞춤법으로 지정하세요.
3. 링크 요소 <link rel="stylesheet" href="ファイルの場所・ファイル名">
링크 요소는 외부 파일에 준비된 CSS 파일을 참조하는 데 사용됩니다.
링크 탭을 지정할 때 href 속성과rel 속성이 필요합니다.
rel 속성 값에 링크 형식을 지정해서 문서와의 관계를 설정합니다.
href 속성의 값에 대한 URL을 지정합니다.
CSS 파일을 참조할 때rel 속성에 지정stylesheet하고 href 속성에 CSS의 파일 이름을 지정합니다.
스타일 요소를 사용하여 CSS 직접 지정
<html>
<head>
<meta name="Content-style-Type" content="text/css">
</head>
<body>
<p style="color: #000000; ">文字色の指定</p>
</body>
</html>
스타일 요소는 CSS에 대한 설명을 직접 지정할 수 있습니다.
링크 요소 중 외부 참조 CSS의 경우 다른 페이지도 사용할 수 있지만 스타일 요소가 지정한 경우'기술된 HTML 파일'에만 적용됩니다.
스타일 속성을 사용하여 스타일을 지정할 때 브라우저 등에서 문서에 사용된 스타일시트가 CSS라는 것을 알 수 있도록 head 요소에 meta 요소를 기술하고 스타일 언어의 값에text/css를 지정합니다.
브라우저가 자동으로 판단하지만 잘못된 동작을 피하기 위해 기술합니다.
끝말
꼭 필요하기 때문에 복제하는 것이 아니라 뜻을 충분히 이해한 후에 코드를 쓰면 확실하게 파악할 수 있다
Reference
이 문제에 관하여(요소에 설명된 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sayaka38/items/5d66d13ca1ed4763ae79
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
meta(원) 요소는'페이지 정보'를 정의하는 요소이다.
HTML의 메타데이터는 문서에 대한 다양한 정보를 나타냅니다.
간단하게 말하면 검색엔진, 브라우저, 소셜미디어 등 시스템을 대상으로 쓴 것이다.
그래서 홈페이지를 보러 온 사람들은 원 라벨을 거의 보지 않았다.
쓰고 싶은/ 알고 싶은 메타태그
문자 코드
<meta charset="UTF-8">
페이지 개요 표시
<meta name="description" content="ページの概要をあらわす"
스펀지 패드 디자인용(스마트폰 지원)
<meta name="viewport" content="width=device-width, initial-scale=1">
이 지정을 기술함으로써 스마트폰을 위한 *CSS를 써서 스마트폰을 위한 웹 사이트를 만들 수 있다.
최적화 IE
<meta http-equiv="X-UA-Compatible" content="IE=edge">
다른 언어로 번역하지 않음
<meta name=“google” content=“notranslate”>
이 메타태그를 설명하면 번역 옵션을 표시할 수 없습니다.
SNS와의 협력 OGP
<meta property="og:url" content="ページのURL">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="サムネイルとして表示する画像">
<meta property="og:type" content="ページの種類">
페이스북, 트위터 등 SNS에 웹 페이지를 공유할 때는 해당 페이지의 제목과 URL, 아이맵 등을 지정된 방식으로 표시한다.
2. 타이틀 요소 <title>ページのタイトル</title>
모든 홈페이지에는 제목이 있다.
이 제목은 바디 요소의 요소와 달리 웹 브라우저의 제목 표시줄과 탭 부분에 표시됩니다.
검색 결과에도 표시될 부분이니 알기 쉬운 맞춤법으로 지정하세요.
3. 링크 요소 <link rel="stylesheet" href="ファイルの場所・ファイル名">
링크 요소는 외부 파일에 준비된 CSS 파일을 참조하는 데 사용됩니다.
링크 탭을 지정할 때 href 속성과rel 속성이 필요합니다.
rel 속성 값에 링크 형식을 지정해서 문서와의 관계를 설정합니다.
href 속성의 값에 대한 URL을 지정합니다.
CSS 파일을 참조할 때rel 속성에 지정stylesheet하고 href 속성에 CSS의 파일 이름을 지정합니다.
스타일 요소를 사용하여 CSS 직접 지정
<html>
<head>
<meta name="Content-style-Type" content="text/css">
</head>
<body>
<p style="color: #000000; ">文字色の指定</p>
</body>
</html>
스타일 요소는 CSS에 대한 설명을 직접 지정할 수 있습니다.
링크 요소 중 외부 참조 CSS의 경우 다른 페이지도 사용할 수 있지만 스타일 요소가 지정한 경우'기술된 HTML 파일'에만 적용됩니다.
스타일 속성을 사용하여 스타일을 지정할 때 브라우저 등에서 문서에 사용된 스타일시트가 CSS라는 것을 알 수 있도록 head 요소에 meta 요소를 기술하고 스타일 언어의 값에text/css를 지정합니다.
브라우저가 자동으로 판단하지만 잘못된 동작을 피하기 위해 기술합니다.
끝말
꼭 필요하기 때문에 복제하는 것이 아니라 뜻을 충분히 이해한 후에 코드를 쓰면 확실하게 파악할 수 있다
Reference
이 문제에 관하여(요소에 설명된 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sayaka38/items/5d66d13ca1ed4763ae79
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<title>ページのタイトル</title>
<link rel="stylesheet" href="ファイルの場所・ファイル名">
링크 탭을 지정할 때 href 속성과rel 속성이 필요합니다.
rel 속성 값에 링크 형식을 지정해서 문서와의 관계를 설정합니다.
href 속성의 값에 대한 URL을 지정합니다.
CSS 파일을 참조할 때rel 속성에 지정
stylesheet하고 href 속성에 CSS의 파일 이름을 지정합니다.스타일 요소를 사용하여 CSS 직접 지정
<html>
<head>
<meta name="Content-style-Type" content="text/css">
</head>
<body>
<p style="color: #000000; ">文字色の指定</p>
</body>
</html>
링크 요소 중 외부 참조 CSS의 경우 다른 페이지도 사용할 수 있지만 스타일 요소가 지정한 경우'기술된 HTML 파일'에만 적용됩니다.
스타일 속성을 사용하여 스타일을 지정할 때 브라우저 등에서 문서에 사용된 스타일시트가 CSS라는 것을 알 수 있도록 head 요소에 meta 요소를 기술하고 스타일 언어의 값에text/css를 지정합니다.
브라우저가 자동으로 판단하지만 잘못된 동작을 피하기 위해 기술합니다.
끝말
꼭 필요하기 때문에 복제하는 것이 아니라 뜻을 충분히 이해한 후에 코드를 쓰면 확실하게 파악할 수 있다
Reference
이 문제에 관하여(요소에 설명된 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/Sayaka38/items/5d66d13ca1ed4763ae79
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(요소에 설명된 요소), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/Sayaka38/items/5d66d13ca1ed4763ae79텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
