Meta Tag
- HTML 문서에 대한 메타 데이터 정의
- 메타 데이터: 데이터에 대한 데이터(정보)
- 태그는 항상 <head> 요소 내부에 지정
- 메타 데이터는 페이지에 표시되지 않지만 시스템에서 구문을 분석
- 메타 데이터는 브라우저, 검색 엔진(키워드) 및 기타 웹 서비스에서 사용
메타 태그의 종류
- 검색 엔진에 대한 키워드 정의
- <meta name="keywords" content="HTML, CSS, Javascript">
- 웹 페이지에 대한 설명
- <meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
- 페이지 작성자 정의
- <meta name="author" content="kimcatchy">
- 30초마다 문서 새로고침
- <meta http-equiv="refresh" content="30">
- 웹사이트가 모든 기기에서 잘 보이도록 표시 영역(viewport) 설정
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
메타 태그 활용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폰트 어썸</title>
<script src="https://kit.fontawesome.com/9b085c5c0c.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->
</body>
</html>Font Awesome
- 무료로도 사용할 수 있는 벡터 형식 폰트 아이콘
폰트 어썸 사용법
- 폰트 어썸 사이트 접속
- 이메일 주소 입력 후 Start for Free 클릭
- 이메일 링크로 접속해서 회원가입
- Copy Kit Code! 클릭
- 원하는 아이콘을 찾아 HTML 코드 복사
- HTML 코드에 붙여넣고 스타일 정하기
예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폰트 어썸</title>
<script src="https://kit.fontawesome.com/9b085c5c0c.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-address-card" style="font-size:80px; color:dodgerblue;"></i>
<span class="fas fa-camera" style="font-size:4em; color:green;"></span>
</body>
</html>Google Fonts
- 무료 글꼴 라이브러리
- 폰트 선택 후 다운로드에서 로컬 사용 or 폰트 링크를 <head> 안에 붙여 넣어서 사용
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구글 아이콘</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<h2>구글 아이콘</h2>
<i class="material-icons" style="font-size:5em; color:gold;">3d_rotation</i>
<i class="material-icons" style="font-size:5em; color:blueviolet;">account_balance</i>
<i class="material-icons" style="font-size:5em; color:rgb(18, 14, 238);">pets</i>
<i class="material-icons" style="font-size:5em; color:saddlebrown;">thumb_up</i>
</body>
</html>Meta Tag
- HTML 문서에 대한 메타 데이터 정의
- 메타 데이터: 데이터에 대한 데이터(정보)
- 태그는 항상 <head> 요소 내부에 지정
- 메타 데이터는 페이지에 표시되지 않지만 시스템에서 구문을 분석
- 메타 데이터는 브라우저, 검색 엔진(키워드) 및 기타 웹 서비스에서 사용
메타 태그의 종류
- 검색 엔진에 대한 키워드 정의
- <meta name="keywords" content="HTML, CSS, Javascript">
- 웹 페이지에 대한 설명
- <meta name="description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
- 페이지 작성자 정의
- <meta name="author" content="kimcatchy">
- 30초마다 문서 새로고침
- <meta http-equiv="refresh" content="30">
- 웹사이트가 모든 기기에서 잘 보이도록 표시 영역(viewport) 설정
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
메타 태그 활용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폰트 어썸</title>
<script src="https://kit.fontawesome.com/9b085c5c0c.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-camera"></i> <!-- this icon's 1) style prefix == fas and 2) icon name == camera -->
<i class="fas fa-camera"></i> <!-- using an <i> element to reference the icon -->
<span class="fas fa-camera"></span> <!-- using a <span> element to reference the icon -->
</body>
</html>Font Awesome
- 무료로도 사용할 수 있는 벡터 형식 폰트 아이콘
폰트 어썸 사용법
- 폰트 어썸 사이트 접속
- 이메일 주소 입력 후 Start for Free 클릭
- 이메일 링크로 접속해서 회원가입
- Copy Kit Code! 클릭
- 원하는 아이콘을 찾아 HTML 코드 복사
- HTML 코드에 붙여넣고 스타일 정하기
예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폰트 어썸</title>
<script src="https://kit.fontawesome.com/9b085c5c0c.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-address-card" style="font-size:80px; color:dodgerblue;"></i>
<span class="fas fa-camera" style="font-size:4em; color:green;"></span>
</body>
</html>Google Fonts
- 무료 글꼴 라이브러리
- 폰트 선택 후 다운로드에서 로컬 사용 or 폰트 링크를 <head> 안에 붙여 넣어서 사용
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>구글 아이콘</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<h2>구글 아이콘</h2>
<i class="material-icons" style="font-size:5em; color:gold;">3d_rotation</i>
<i class="material-icons" style="font-size:5em; color:blueviolet;">account_balance</i>
<i class="material-icons" style="font-size:5em; color:rgb(18, 14, 238);">pets</i>
<i class="material-icons" style="font-size:5em; color:saddlebrown;">thumb_up</i>
</body>
</html>