반응형
DOCTYPE
모든 HTML 문서는 문서 유형 선언으로 시작해야합니다 <!DOCTYPE html>.
<!DOCTYPE html>html 5 권장
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">HTML
문서 제목
각 페이지마다 서로 다른 규칙으로 사용중인 문서 제목 (<title> 태그) 규칙을 일원화함으로써, 서비스 통일성을 높이고 사내 검색 엔진에 대한 최적화를 꾀한다. 또한 문서 제목에 컨텐츠 제목을 포함시킴으로써, 외부 검색서비스에서 해당 컨텐츠의 노출이 더 잘될 수 있도록 한다.
기본 규칙
컨텐츠 제목 (공백) – (공백) 하위섹션명 (공백) | (공백) 서비스명
<title>경제 | Daum 미디어다음</title>
<title>IT/과학 | Daum 미디어다음</title>
<title>스타존 | Daum 영화</title>- 하위섹션명은 서비스명 앞에 표기한다.
- 하위섹션명의 구분자는 ' | ' (vertical bar / pipe 기호) 를 사용한다.
- 섹션명은 웹접근성 요소로 필수로 작성한다.
Meta 요소
- 검색 엔진 최적화를 위하여 meta 요소를 이용하여 문서 제목을 추가 명시한다.
- 컨텐츠 상세 페이지에서는 컨텐츠 제목 만을 표기한다.
- 서비스홈에서는 서비스명 만을 표기, 서브 섹션홈에서는 하위섹션명 | 서비스명 을 표기한다.
- 컨텐츠 제목이 HTML validation 을 깨지 않도록 반드시 HTML escape 되어야 한다
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-title" content="NAVER">
<meta name="robots" content="index,nofollow">
<meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<!-- 카카오톡, 블로그 등 메시지 정보 -->
<meta property="og:title" content="네이버">
<meta property="og:url" content="https://www.naver.com/">
<meta property="og:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="">
<meta name="twitter:url" content="https://www.naver.com/">
<meta name="twitter:image" content="https://s.pstatic.net/static/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta name="twitter:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">HTML 문자셋 속성 HTML Encoding (Character Sets)
HTML 페이지를 올바르게 표시하려면 웹 브라우저가 페이지에 사용 된 문자 세트를 알아야합니다.
<meta>태그에 지정되어 있습니다 :
HTML5의 기본 문자 집합은 UTF-8입니다.
<meta charset="UTF-8">@charset CSS 규칙
CSS @charset규칙을 사용하여 스타일 시트에 사용되는 문자 인코딩을 지정할 수 있습니다
@charset "UTF-8";
외부 CSS/JS
외부(External) 방식 CSS/JS를 사용하면 해당 파일만 변경하여 전체 웹 사이트의 모양을 변경할 수 있습니다!
헤드 섹션 내부의 <link> 요소와 <script>요소가 포함되어야합니다.
<link rel="stylesheet" href="./dist/css/comm.css">
<script src="./dist/js/comm.js"></script>
내부 CSS/JS
하나의 단일 HTML 페이지에 고유 한 스타일이있는 경우 내부(Internal) 방식을 사용할 수 있습니다.
인터널 방식은 헤드 섹션 내부의 <style> <script> 요소 내에 정의됩니다.
<!-- CSS -->
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
<!-- JS -->
<script>
$(".counter").countimator();
</script>반응형
'Publishing > HTML' 카테고리의 다른 글
| HTML5의 새로운 태그 (0) | 2020.02.13 |
|---|---|
| HTML 기본 layout (0) | 2020.02.12 |
| 웹접근성 준수 된 회원가입 폼 (0) | 2020.02.12 |
| HTML input 속성 (0) | 2020.02.12 |
| HTML Form 요소 (0) | 2020.02.12 |