HTML (Hypertext Markup Language)의 기초
1.태그
html의 기본 구조의 핵심은 태그이다. 태그는 웹브라우저에 어떤 역할을 하는지 알려준다.
만약 태그를 사용하지 않고 값을 넣어주면 웹브라우저에서는 그냥 아무런 기능없는 텍스트로 밖에 출력을 하지 않는다.
태그는 <태그명></태그명>이런 형식으로 여는태그가 있으면 '/' 를 붙힌 닫는 태그가 있다. (닫는태그 없는것도잇다.)
그리고 이런 태그 안에 있는것을 문단 으로 인식을 하게되고 태그의 기능에 맞는 형태로 보여지게 된다.
기본 태그의 종류
| <head> 문서의 시작과 끝을 표시 <head>태그는 HTML문서에 대한 정보를 표시하는데 사용 css,자바스크립트를 작성하는 부분 |
| <title> html문서의 제목을 표시하는 역할 |
| <body> head와 같이 태그중 큰 틀에 속한다. body태그는 본문 내용으로 쓰이는 부분이고 여러 특성을 추가해서 사용 할 수 있다. |
| 특성이름 | 설명 |
| background | 문서에 나타날 배경 이미지의 경로를 지정 |
| bgcolor | html문서의 기본 배경색 지정 |
| bgproperties | 배경이미지가 스크롤 안됨 |
| link | 링크가 있는 텍스트 클릭전 색상값을 입력 |
| vlink | 이미 방문한 적이 있는 링크의 색상값 입력 |
| alink | 링크를 클릭하는 순간의 색상값 입력 |
| text | 글의 색상값을 입력 |
<body>태그 예제
//배경에 사진및 색상 적용
<html>
<head>
<style>
body{
background-image:url('dog.jpg'); //사진이 html과 같은 폴더가 아닐경우 경로지정해줘야함
background-color:#FFFFFF;
}
</style>
</head>
<body>
<h3>1절</h3>
<p>동해물과 백두산이 마르고 닳도록<br>
하느님이 보우하사 우리 나라 만세</br></p>
</body>
</html>
| <META> html문서자체에 설명을 제공하기 위해 사용 일반적인 태그와 달리 닫는 태그가 없다. 검색엔진들이 html문서에 포함된 검색 키워드를 이용하여 검색하므로, 검색 엔진에 의해 잘 검색되도록 하기 위해 사용 "내 페이지가 검색엔진에 나타나지 않게 하기" <META name =“robots” content=“noindex,nofollow”> <META>태그를 이용해 자동으로 다른 페이지 이동하는것도 가능하다 |
<META>태그 예제
//html,head,title,meta 예시
<html>
<head>
<title>META 태그 활용법</title>
//키워드 입력
<META name="keywords" content="APPLE,ORANGE,BANANA">
<META name="description" content="이 페이지는 apple,orange,banana를 소개합니다.">
//meta 태그를 이용해서 5초후에 내가 지정해둔 페이지로 넘어가게 됨
<META http-equiv="refresh" content="5; url=http://www.google.com/">
</head>
<body>
메타 태그를 이용하면 내가 만든 페이지를 검색 엔진이 쉽고 빠르게 찾을 수 있다.
</body>
</html>
| <p> <p>태그는 여는괄호,닫는괄호가 쌍으로 사용되고 이 태그로 둘러쌓인 문장은 하나의 문단이 된다. <br> html문서는 엔터키 입력도 하나의 빈칸으로 표시. html 문서에서 줄바꿈을 하려면 <br>태그를 이용해야한다. <pre> <pre>태그를 안에 있는 내용은 <br>, 등의 사용 없이 사용자가 입력한 그대로의 내용을 출력해준다. <h> 본문 제목 표시 태그 <h1>~<h6>까지있고 h2를 보통 많이 사용한다. |
텍스트태그
<p>태그의 특성
| 특성 | 특성값 | 설명 |
| align | center | 가운데정렬 |
| left | 왼쪽정렬 | |
| right | 오른쪽정렬 |
| <MARQUEE> 웹페이지에서 움직이는 텍스트를 만든다. scroll - 화면에 글자가 한방향으로 계속 이동 alternate - 화면 끝까지 가면 튕겨짐 slide - 화면 끝까지 글자가 가면 멈춤 |
하이퍼 링크
<a>
| 특성 | 특성 값 | 설명 |
| name | URL 문자열 | 하이퍼링크를 클릭했을때 이동할 페이지의 URL지정 |
| target | 문자열 | 하이퍼링크를 클릭시 href특성에 지정된 url이 보여질 위치를 지정 |
| title | 문자열 | 하이퍼링크에 대한 설명표시 |
HyperLink예제
<html>
<head>
<title> 하이퍼링크로 메일보내기 </title>
</head>
<body vlink="blue">
<H3>메일보내</H3>
<a href="mailto:Hello@naver.com?subject=Hi">메일보내기</a>
</body>
</html>
목록태그
| <OL> 숫자를 이용해 목록을 만들때 사용 <UL> 순서가 없는 목록을 만들때 사용 <DL> 용어를 정리할때 사용 <MENU> 오른쪽으로 계속 들어쓰기 됨. (닫기전까지 들여쓰기 위치 고정) |
목록태그 예제들
//OL
<html>
<head>
<title> OL태그 </title>
</head>
<body>
<OL type="a">
<LI><HEAD>태그에서 사용하는 태그가 아닌것은?</LI>
<OL>
<LI>META</LI>
<LI>TITLE</LI>
<LI>DIV</LI>
<LI>SCRIPT</LI>
</OL><br>
<body>
</html>
//UL
<html>
<head>
<title> UL태그 </title>
</head>
<body>
<LI><HEAD>태그에서 사용하는 태그가 아닌것은?</LI>
<UL>
<LI>META</LI>
<LI>TITLE</LI>
<LI>DIV</LI>
<LI>SCRIPT</LI>
</UL><br>
<body>
</html>
'웹 > html' 카테고리의 다른 글
| [html]기초 마무리 문제(회원가입창 모양새만들기) (0) | 2020.08.23 |
|---|---|
| html 기초 마무리 (0) | 2020.08.23 |
| html 테이블만들기 (0) | 2020.08.23 |