HTML은 하이퍼 텍스트 마크업 언어(HyperTextMarkup Language)라는 의미를 가지고 있다.
HTMl 태그는 이러한 웹페이지를 구성 하기 위한 요소를 말한다.
사용하는 방법은 일반적으로 <태그></태그> 형식으로 작성되고 사용된다.
웹페이지(.html)를 만들려면 가장 기본적인 형식으로 다음과 같은 형식을 필수로 작성한다.
<html>
<head>
<meta charser="utf-8">
<title></title>
</head>
<body>
</body>
</html>위에 코드역시 이 코드가 HTML 형식으로 작성 되어 있다는 것을 알려주는 거라고 생각하면된다
html형식 안에서 확인 할 수 있는 태그는 크게 <html>,<head>,<meta>,<body> 로 구성 되어있다.
태그의 종류
기본태그 'html', 'head', 'body' 태그
HTML은 마크업언어라서 자료의 구조를 쉽게 파악하기 위해서 태그를 사용해주는 것이 좋다.
'HTML' 태그 :
<HTML>태그는 문서의 시작과 종료를 나타내는 태그로 문서의 처음과 끝을 결정하는 태그라고 할 수 있다. 웹을 구성하는데 큰 틀이라고 생각하면 된다.
'head' 태그 :
HTML 문서에 필요한 여러 정보를 표시하는 메타 컨테이너이다. 머리말에 해당하고 CSS(.css)나 javascript(.js) 를 연결 해주는 곳이다. 주로 포함 되는 태그는 <title>,<meta>,<link> 가 있다.
메타 태그의 속성에는 http-equiv, name,content 3가지 속성이 있다.
<meta>태그 :
요소는 반드시 <head>태그 안에 있어야 하고, 웹 서버와 웹 브라우저 간의 교환 되는 정보를 정의 할 때 사용된다.
<meta>의 속성
1) http-equiv="항목명"
http-equiv 속성은 HTTP 헤더에 정보 또는 값을 제공하는 content 속성이다.
속성 값으로
http-equiv="content-security-policy"
문서에 대한 콘텐츠 정책을 지정 해줌
http-equiv="content-type"
http-equiv="default-style"
http-equiv="refresh"
이는 웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용할 수 있다. HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖는다.
html4에서는 문자 설정 할때 사용 했지만 html5에서는 <meta charset = "uft-8"> 만 설정 해주면 된다.
2) content="정보값"
meta 정보의 내용을 지정한다.
3) name="정보 이름"
meta 정보의 내용을 지정한다.
4) charset="인코딩 언어"
페이지의 문자 인코딩을 선언한다. 값으로는 utf-8 이 들어간다.
uft-8 을 쓰면 모든 언어의 문자 인코딩이 가능하다 뿐만아니라 UTF-16, UTF-32 등 다양한 문자 코드가 존재 한다.
<meta charset="UTF - 8" /> 과 같은 형태로 문자의 코드의 종류를 설정 해줄 수 있다.
'title' 태그:
브라우저 상단의 타이틀 바에 입력 되는 제목을 지정해주는 태그이다.
'body'태그 :
HTML 본문에 해당하는 부분으로 실제로 화면에 보여지는 부분에 해당하는 요소들은 모두 <body></body>안에 들어간다고 생각 하면된다. <body>안에 들어가는 태그들은 블럭(Block), 인라인(Inline) 특성을 가지고 있기 때문에 사용 목적에 따라서 태그를 선택해 제작해야 한다.
블럭(Block) 태그 : 구성요소들이 라인 전체를 치지하고 있어서 한줄에 여러 요소가 위치 하지 못하는 태그
ex ) <div>,<ol>,<li>,<h1>~<h6> 태그
인라인(Inline)태그 : 구성요소들이 나란히 배치가 될 수 있는 태그
ex) <span>,<a>,<img> 태그
'PROGRAMING📚 > WEB📑' 카테고리의 다른 글
| [HTML]문단(br,p,pre) 태그 사용하기 (0) | 2023.05.22 |
|---|---|
| [WEB] Visual Code/ Brackets 설치/실시간 미리보기 활성화 하기 (0) | 2023.05.19 |
| [WEB]리액트(React) 설치하고 세팅하기 (0) | 2023.03.30 |
| [WEB]Web-app(application)이란 (0) | 2023.03.30 |
| [WEB] Bundle과 BundleTool 의 장점과 사용해보기 (0) | 2023.03.30 |
댓글