들어가기 앞서..
요즘은 인터넷이 없으면 못살정도로 우리 삶과 연관되어 있다. 원하는 홈페이지에 들어가기 위해 검색을 하게 되는데 오늘은 web페이지와 연관된 문법들을 배워보자! https://poiemaweb.com/html5-semantic-web 를 참고하여 배우고 정리해보았습니다
오늘 배울 내용은?
시멘틱 요소, 웹페이지 html기본 태그
시멘틱 요소
인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.
시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현될 수 있다.
즉 내가 이해한 시멘틱 요소는 html로 홈페이지를 구축하게 되는데 시멘틱 요소를 통해 컴퓨터가 이해하기 쉽게 알려주고 우리가 검색을 하게 될때 이용되는 태그,단어들을 HTML요소를 이용하여 지정해주며 우리가 컴퓨터 용어를 이용하기 쉽게 만들어 주는 것 같다.
시맨틱 태그의 일부 예시이다.
html 웹페이지 기본 태그
html기본 태그는 기본이니 간략하게 넘어가도록 한다.
모든 요소는 html 요소의 자식 요소이며 html 요소 내부에 기술해야 한다.
기본요소는 아래와 같다. 기본 틀이며 이런 형식을 기초로 시작한다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>문서 제목</title>
</head>
<body>
화면에 표시할 모든 콘텐츠는 이곳에 기술한다.
</body>
</html>head 태그
head는 코딩한후 홈페이지 화면에 나타나지 않는다.
title tag
title 요소는 문서의 제목을 정의한다. 정의된 제목은 브라우저의 탭에 표시된다.
<head>
<title>문서 제목</title>
</head>style 태그
style 요소에는 각 요소의 크기 , 색 등등의 스타일을 정의한다.
<head>
<style>
body {
background-color: yellow;
color: blue;
}
</style>
</head>link 태그
link 요소에는 외부 리소스와의 연계 정보를 정의한다. 주로 HTML과 외부 CSS 파일을 연계에 사용된다. 또한 홈페이지에서 태그로 얻어올수 있는 폰트와 이미지 등에 연계로 사용된다.
<head>
<link rel="stylesheet" href="style.css">
</head>script 태그
script 요소에는 client-side JavaScript를 정의한다.
외부 자바스크립트의 연계는 물론 연계되는 자바스크립트의 이벤트 등에 사용된다 .
<script>
document.addEventListener('click', function () {
alert('Clicked!');
});
</script>아래는 자바스크립트 연계인데 자주 사용하니 기억할것!
<script src="main.js"></script>meta 태그
meta 요소는 description, keywords, author, 기타 메타데이터 정의에 사용된다. 메타데이터는 브라우저, 검색엔진(keywords) 등에 의해 사용된다.
아직 제대로는 사용해 보지 못하였다.
"name=" 과 "content="를 사용하면 검색엔진이 사용할 keywords을 정의할수 있다.
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"><meta name="description" content="Web tutorials on HTML and CSS"><meta name="author" content="John Doe">