| 태그 설명을 위한 일반 규칙
HTML 태그들은 필요에 따라 여러 가지 효과를 적용할 수 있는데 이것을 속성(attribute)이라고 한다. 속성은 시작하는 태그 안에 한 칸을 비우고 사용한다. 또한 태그의 각 속성들은 속성에 변화를 주기 위한 값이 필요한데 = 기호로 속성값을 부여한다. 속성값이 빈칸으로 구분된 두 단어라면 " "로 감싸서 값을 부여한다. 하나의 단어라도 " "로 감싸서 사용할 수 있다.
예시:
<meta http-equiv="Content-Type" content="text/html">
<태그 속성=속성값 속성=속성값...>
| 헤드(<head>) 부분에 작성해야 할 태그들
HEAD 태그는 웹 문서의 본문에 나오는 내용이 아니라 웹 문서에 대한 설명 부분이다. TITLE, META 등의 태그를 포함할 수 있다.
(1) TITLE 태그
브라우저의 제목표시줄에 나타나는 웹 문서의 제목이 들어간다. 정보검색 엔진에서 사용자의 검색어가 title 태그 내에 있으면 정확한 웹 문서로 인정하여 결과 목록 중에서 앞쪽에 위치하게 된다. 따라서 정보검색 엔진에 홈페이지를 등록할 떄 적절한 제목을 사용하는 것이 좋다.
<head>
<title>This is a title.</title>
</head>
(2) META 태그
문서의 작성자, 날짜, 주요 단어 등 웹 브라우저의 내용에는 나타나지 않는 웹 문서의 일반 정보를 나타날 때 사용한다.
▼ 속성 및 속성값
<meta name=author|keywords|content> |
작성자, 핵심어, 요약 |
<meta content="문자열"> |
각 name의 값 |
<meta http-equiv=refresh> |
해당문서를 새롭게 고침 |
<meta name="Author" content="맛난 양갱">
<meta name="Keywords" content="HTML 마크업 언어">
<meta name="Content" content="HTML 기본 기초에 대한 지식을 다룹니다.">| 바디(<body>) 부분에 작성해야 할 태그들
웹 문서의 실제 내용을 표현한다. HEAD에 포함되는 태그를 제외한 모든 태그들을 포함한다. 이하에서 설명할 모든 태그들은 BODY 태그 안에 놓인다.
▼ 속성 및 속성값
<body background="URL"> |
브라우저의 배경화면에 나타날 이미지 파일의 URL 지정 |
<body bgproperties=lixed> |
배경화면 이미지는 고정시키고 내용들만 스크롤 |
<body bgcolor="색상값"> |
브라우저의 배경화면 나타날 색상 지정 |
<body text="색상값"> |
문자의 색상 지정(영어 색상이름이나 RGB 값) |
<body link="색상값"> |
링크의 색상 지정(영어 색상이름이나 RGB 값) |
<body vlink="색상값"> |
방문한 링크의 색상 지정(영어 색상이름이나 RGB 값) |
<body alink="색상값"> |
선택한 링크의 색상 지정(영어 색상이름이나 RGB 값) |
<body bgcolor=yellow text=black link=blue vlink=red alink=green>► 홈페이지의 배경화면은 노란색, 문자는 검은색, 링크는 파란색, 방문한 링크는 붉은색, 선택한 링크는 녹색으로 지정된다.
<body background="image.png" bgproperties="fixed">► 홈페이지의 배경화면은 지정한 이미지 파일로 설정하고 내용이 많아 스크롤 할 때, 이미지는 고정된 상태에서 내용들만 움직이게 한다.
※ bgcolor와 background 속성을 동시에 쓰게 되면 나타난 순서에 관계없이 background 속성을 우선 적용한다.
※ BODY 태그의 TEXT 속성값은 본문 내에서 색상 변경이 없으면 본문 글자 전체에 영향을 미친다.
'컴퓨터 프로그래밍' 카테고리의 다른 글
| 라즈베리파이 사양 (0) | 2014.03.01 |
|---|---|
| [MCU 실습] 블럭 피하기 게임 구현 동영상 (HBE-MCU-All in One) (1) | 2014.02.28 |
| HTML 한글 깨짐을 방지하기 위한 방법 (0) | 2014.02.26 |
| C 프로그래밍의 보안 이슈와 포인터 남용 (0) | 2014.02.23 |
| 다차원 배열 할당시 '인접한 메모리 할당하기' (0) | 2014.02.20 |