YOne Labs
추가적으로 몇 가지 중요한 마크업(태그 등을 이용하여 문서나 데이터의 구조를 명기)에 대해 알아보자. 기본적으로 HTML5를 사용하기 위해서는 코드의 가장 위에 <!DOCTYPE html>을 선언한다 이는 HTML5를 사용하기 위해 필수적인 것은 아니나 다른 버전과 구별하기 위해 사용된다.
앞에서도 잠깐 언급되었지만 id속성을 사용하여 특정 요소의 스타일이나 동작을 제어할 수 있다. id값은 하나만 사용할 수 있으며 절대 겹치면 안된다. 반면에 class속성은 같은 class를 동시에 제어할 수 있다는 점에서 id와 다르다.
앞에서 사용된 텍스트와 요소들을 하나의 블록으로 그룹화하기 위해서 <div>를 사용한다. 그룹화하여 요소들을 그룹단위로 제어하면 편리하다. 블록단위는 항상 새로운 줄에서 시작한다면 나란히 묶어주는 인라인으로 그룹화하기 위해서는 <span>을 사용한다. 이는 같은 줄에서 그룹화가 되기 때문에 같은 줄에 여러 요소를 넣는데 사용된다.
구글 지도 등을 넣기 위해서는 <iframe>이라는 요소를 사용하면 된다.
<iframe width="450" height="350" frameborder="1" scrolling="no"
src="http://maps.google.co.kr/maps?q=서울+시청&output=embed"></iframe>
scrolling속성은 “yes”와 “no”로 스크롤바 사용을 제어하고 frameborder속성이 “1”이면 테두리를 표시 “0”이면 테두리를 표시하지 않는다.
마지막으로 페이지에 대한 정보를 나타내는 <meta>요소에 대해 알아보자.
<!DOCTYPE html>
<html>
<head>
<title>YOne Labs</title>
<meta name="description" content="퀀트투자연구소">
<meta name="keywords" content="주식, 데이터사이언스, 프로그래밍">
<meta name="robots" content="nofollow">
<meta http-equiv="author" content="YOne Labs">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="expires" content="Fri, 08 Nov 2019 23:69:69 GMT">
</head>
</html>
description은 검색엔진이 페이지에 대한 정보를 파악하는데 사용되는 설명이다. Keywords는 사용자가 페이지를 찾기 위해 검색할 수 있는 단어 목록이지만 검색엔진이 사이트를 색인화하는 데에는 큰 영향을 미치지 못한다 author는 제작자를 나타내고 pragma는 브라우저의 페이지 캐시를 막아 항상 서버에서 새로운 페이지를 가져오게 만든다. Expires는 페이지 만료일을 지정하여 더 이상 캐시하지 않도록 하는데 사용된다.
'Programming > Web' 카테고리의 다른 글
| [02. CSS] 002. 색상 (0) | 2019.11.08 |
|---|---|
| [02. CSS] 001. CSS란 (0) | 2019.11.08 |
| [01. HTML] 008. 폼 (0) | 2019.11.02 |
| [01. HTML] 007. 테이블 (0) | 2019.10.30 |
| [01. HTML] 006. 이미지 (0) | 2019.10.29 |
