홈페이지 제작 을 위해서는 홈페이지의 정보를 담고있는 DOCTYPE(독타입)과 홈페이지의 성격을 담고있는 META TAG(메타태그)를 선언해 주는것 으로 제작이 시작됩니다.
DOCTYPE
홈페이지를 제작하기전 선언하는 일종의 표식과 선언문에 해당합니다.
<!DOCTYPE html>▲ HTML5 독타입 선언 홈페이지를 제작할때 처음 시작하는 선언문과 비슷합니다.
<html lang="ko">▲ 홈페이지의 언어가 이루어져있는 언어코드를 삽입하는 코드로 '이 홈페이지는 이런 언어로 만들어졌어' 라는것을 선언하는일종의 선언문입니다.
각 국가별 언어코드를 기록해줍니다. 한국="ko" 일본="ja" 미국="en" 등으로 이루어져 있습니다.
<head>
..
..
</head>▲ 홈페이지를 장식하는 머리부분으로 각종 스크립트와 CSS 링크들을 연결시키는 역활을 합니다.
<title>블루씰 웹디자인 - BLUESEAL Webdesign</title>▲ 최상단 인터넷 탭에 표시될 홈페이지의 제목과 타이틀을 입력합니다. 타입을 선언해주는 독타입 작업을 마친후 정보를 입력해주는 메타태그로 넘어갑니다.
META TAG
메타태그는 사이 또는 BODY가 선언되기전에는 진행 되어야합니다.
HTML 4.01:
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
HTML 5:
<meta charset="UTF-8">
<meta name="robots" content="index,follow">▲ 검색로봇에게 인덱스를 알려주는 메타태그 입니다.
<meta name="keywords" content="키워드1,키워드2,키워드3" />▲ 검색에서 정해지는 키워드를 만들어주는 컨텐츠로, 콤마(,)로 영역을 지정합니다.
<meta name="description" content="홈페이지 짧은 소개글을 입력합니다." />
▲ 홈페이지에 뷰포트를 지정함으로서 미디어쿼리(반응형으로 홈페이지를 만듬)를 CSS상으로 지정해줄 수 있으며, 지정하지않으면 미디어 반응형으로 작업되지 않습니다.
<meta http-equiv="refresh" content="30">▲ 30초마다 갱신되는 페이지를 보여줍니다.
<!-- 트위터 -->
<meta name="twitter:card" content="website">
<meta name="twitter:title" content="블루씰 디자인">
<meta name="twitter:description" content="아트웍을 기반으로 웹디자인제작. 블루씰 웹디자인">
<meta name="twitter:image" content="http://blueseal.kr/images/slider2/logo.jpg">
<meta name="twitter:domain" content="http://blueseal.kr">▲ 카카오톡이나 메신저등으로 링크를 보낼시 나오는 이미지와 주소, 소개글등을 예쁘게 꾸며주는 메타태그입니다. og:type: 용도 / og:title: 제목 / og:description 설명 / og:image 보여지는 이미지 / og:url 주소
<!DOCTYPE html>
<html lang="ko">
<head>
<title>타이틀 입력</title>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<meta name="keywords" content="홈페이지 키워드">
<meta name="description" content="홈페이지 소개영역">
<meta name="author" content="작성자">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 링크복사 전달시 보여지는 영역 꾸미기 -->
<meta property="og:type" content="website">
<meta property="og:title" content="블루씰 디자인">
<meta property="og:description" content="아트웍을 기반으로 웹디자인제작. 블루씰 웹디자인">
<meta property="og:image" content="http://blueseal.kr/images/slider2/logo.jpg">
<meta property="og:url" content="http://blueseal.kr">
<!-- 트위터 -->
<meta name="twitter:card" content="website">
<meta name="twitter:title" content="블루씰 디자인">
<meta name="twitter:description" content="아트웍을 기반으로 웹디자인제작. 블루씰 웹디자인">
<meta name="twitter:image" content="http://blueseal.kr/images/slider2/logo.jpg">
<meta name="twitter:domain" content="http://blueseal.kr">
</head>▲ 이와같이 얻어진 독타입 선언과 메타태그 선언문입니다. 코딩연습도 할겸 기본적 독타입과 메타태그 선언문은 직접 써보는걸 추천드립니다.
'Design > 퍼블리싱 지식창고' 카테고리의 다른 글
| 홈페이지 엘리먼트 요소들 (Element) (0) | 2022.12.13 |
|---|---|
| 홈페이지 css연결하기 (LINK script,css연결) (0) | 2022.12.13 |
| 반응형 홈페이지 미디어 쿼리 기본 설명 (@media) (0) | 2022.12.09 |
| 홈페이지 레이아웃 제어와 영역 분배하기 (column) (0) | 2022.12.09 |
| 전환과 애니메이션 효과 (transition,animation) (0) | 2022.12.09 |
