[WEB] HTML 기본 구조

HTML 헤드(HEAD)

메타(meta) 태그 ( meta element)
- 도큐먼트(document)에 대한 구조적인 정보(메타 데이터(Meta data) ; 데이터의 데이터) 정의

<!DOCTYPE html>
<html lang="ko"> 
  <head>
    <!-- 
    * <meta> 태그    
    -->
  </head>
...

메타 태그 속성
속성	http-equiv	name	content
문법	http-equiv=""	name=""	content=""
설명	문서 초기 정보를 나타내는 속성	문서 초기 정보를 나타내는 속성	해당 정보에 대한 내용 설정

▶ 도큐먼트 문자 코드 타입 설정 (UTF-8)
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html" />

▶ 렌더링 모드 설정 ( 강제 렌더링 )
- IE=5 : IE5 렌더링
- IE=7 : IE7 표준 모드 렌더링
- IE=8 : IE8 표준 모드 렌더링
- IE=edge : IE8 이상 버전에서 항상 최신 표준 모드로 렌더링
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

▶ 캐쉬(Cache) 사용 설정
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
※ HTTP1.0(또는 IE 5) 일부 브라우저에서는 동작하지 않음

<meta http-equiv="Expires" content="Mon, 06 Jan 1990 00:00:01 GMT" />
<meta http-equiv="Expires" content="-1" />
※ 만료 시간 지정 및 조건부 캐쉬 만료

▶ 뷰 포트(Viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
- width=device-width : 장치 화면 너비에 페이지를 맞춤
- initial-scale : 초기 스케일
- maximum-scale / minimum-scale : 최대 / 최소 스케일
- user-scalable : (yes / no) 사용자 스케일 조정 사용 유무

▶ 포맷 감지 (Format detection)
<meta name="format-detection" content="telephone=no" />
- (yes / no) 전화 번호 형식 링크(<a href="TEL:"> ...) 클릭 시 전화 연결

▶ 모바일 - 스크롤 다운(Down) / 업(Up) 할 경우 URL 입력창 토글
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />

▶ 도큐먼트에서 사용되는 스크립트 / 스타일 시트 언어 타입 설정
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />

▶ 도큐먼트 설명(Description)
<meta name="title" content="타이틀" />
<meta name="subject" content="주제" />
<meta name="description" content="설명" />
<meta name="Date" content="제작일" />
<meta name="Last-Modified" content="마지막 수정일" />
<meta name="Author" content="제작자" />
<meta name="Publisher" content="제작사" />
<meta name="Generator" content="제작도구" />
<meta name="Email" content="이메일" />
<meta name="Location" content="위치" />

▶ 도큐먼트 설명(Description) - 소셜 미디어

<!DOCTYPE html>
 <html lang="ko">
 ...
 <head>
 ...
 <meta property="og:site_name" content="SITE TITLE" />
 <meta property="og:locale" content="" />
 <meta property="og:type" content="website" />
 <meta property="og:url" content="SITE URL" />
 <meta property="og:title" content="SITE TITLE" />
 <meta property="og:description" content="SITE DESCRIPTION" />
 <meta property="og:image" content="THUMNAIL IMAGE URL" />
 <meta property="og:image:width" content="THUMNAIL WIDTH" />
 <meta property="og:image:height" content="THUMNAIL HEIGHT" />

 <meta property="twitter:card" content="summary" />
 <meta property="twitter:title" content="SITE TITLE"" />
 <meta property="twitter:description" content="SITE DESCRIPTION"" />
 <meta property="twitter:image" content="THUMNAIL IMAGE URL" />
 ...
 </head>

+ og:locale - 리소스 언어 / 기본 값 en_US
+ og:type - 컨텐츠 타입 / 기본 값 website

※ 참고 페이지

http://ogp.me

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

ogp.me

+ og:url - 페이지 표준 URL
+ og:title - 미리보기 에서 사용되는 제목
+ og:description - 미리보기 에서 사용되는 설명 ( 보통 2 ~ 4 문장, 일정 길이 초과 시 자동 자름 )
+ og:image - 미리보기 에서 사용되는 이미지
- (고화질) 최대 크기 및 화질 : (w) 1200px / (h) 315px (권장, 너비(width) 1080px 이상 이미지 사용)
- 최대 너비 : (w) 600 px / (h) 315px (권장)
- 최소 너비 : (w) 600 px (권장)
※ 미리보기 수직 배열(이미지 최대 크기)을 사용할 경우, 이미지 크기는 1.91:1 비율 권장

※ 참고 페이지

https://ogp.me/#types

+ og:image:width / og:image:height - 미리보기 에서 사용되는 이미지의 크기를 명시 (가독성 및 정확성 향상)

※주의사항
- og:image 대상 이미지 크기 너비(Width) 가 600 px 보다 작은 경우, 이미지 / 타이틀 + 설명 수평 배치
※ PC, 갤럭시 적용 확인 / 아이폰 및 PC 크롬 모바일 브라우저에서는 이미지 / 타이틀 / 설명 수직 배치
※ 대상 이미지가 .png 확장자 인 경우 아이폰 및 PC 크롬 모바일 브라우저에서 이미지 / 타이틀 + 설명 수평 배치
- og:image 대상 이미지 크기가 너비(Width) 보다 높이(Height) 큰 경우(세로 직사각형), 이미지 / 타이틀 + 설명 수평 배치
- og:title 길이가 63(영문자 기준) 이상 인 경우, 이미지 / 타이틀 / 설명 수직 배치 에서는 설명 부분이 보이지 않음
※ 이미지 / 타이틀 + 설명 수평 배치에서는 og:title 길이가 63 자 보다 제한이 길어짐

▶ 도큐먼트 자동 이동
<meta http-equiv="refresh" content="" />
- 1;url=http://www.naver.com : 1초 후 네이버(naver.com) 이동

▶ 도큐먼트 내 이미지 관련 툴바 생성 방지
<meta http-equiv="imagetoolbar" content="no" />
- yes / no

▷ SEO(검색엔진최적화) 설정
<meta name="keywords" content="" />
- 검색 키워드 설정

▷ 로봇(Robots) 설정
<meta name="robots" content="noindex,nofollow" />
- 로봇에 의한 수집을 방지하기 위한 대표적인 방법
- index / noindex : 도큐먼트 인덱싱 유무
- follow / nofollow : 도큐먼트에 링크된 도큐먼트를 인덱싱 유무

▶ <link rel="canonical" href="" />
- 반응형 웹 페이지
- 접속 환경에 따른 자동 리딕션 처리를 위한 설정
※ 모바일(PC 웹 주소) / PC (모바일 웹 주소)

▷ 모바일 앱(APP) 연결
- http://applinks.org

스타일 시트 (StyleSheet)

1. 외부 스타일 시트 (연결; Link)
- 외부 CSS 파일 연결
※ @charset "UTF-8"; : 코드 상단 문자 타입 지정

<!DOCTYPE html>
...
  <link rel="stylesheet" type="text/css" href="" ></link>
...

2. 내부 스타일 시트
- HTML 코드 내부에 CSS 코드 삽입

<!DOCTYPE html>
...
  <style type="text/css">
    /*
    * CSS 코드
    */ 
  </style>
...

3. 인라인 스타일 시트
- HTML 테그에 직접 삽입

<!DOCTYPE html>
...
  <div style="font-size:12; font-weight:bold;">Inline Style Sheet</div>
...

자바스크립트(Javascript)

1. 외부 자바스크립트(연결; Link)
- 외부 JS 파일 연결

<!DOCTYPE html>
...
  <script type="text/javascript" src="" ></script>
...

2. 내부 자바스크립트
- 외부 JS 파일 연결

<!DOCTYPE html>
...
  <script type="text/javascript">
    /*
    * 자바스크립트(Javascript) 코드
    */
  </script>
...

'WEB' 카테고리의 다른 글

[WEB] SMTP / POP3 / IMAP (0)	2021.10.13
[WEB] NODE.JS (0)	2021.10.10
[WEB] HTML 유용한 사이트 (0)	2021.10.09

Woder

[WEB] HTML 기본 구조

'WEB' 카테고리의 다른 글

댓글

티스토리툴바

[WEB] HTML 기본 구조

'WEB' 카테고리의 다른 글

관련글

댓글

티스토리툴바