HTML (Hyper Text Markup Language)
쉽게말해, 웹에서 정보를 표현할 목적으로 만든 마크업 언어입니다. 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석기호인 태그들로 이루어져 있습니다.
태그 구성요소
html은 거의 대부분 시작태그로 시작해서 종료 태그로 끝나는 식으로 구성이 되어있습니다.
<p align = 'center'> HTML/CSS </P> = 전체 : Element
시작태그 속성 = 속성값 내부문자 종료태그
<시작태그> 출력을 원하는 글 또는 태그 </종료태그>시작태그와 종료태그 사이에는 주로 문자를 많이 넣고, 다른 종류의 태그들도 넣습니다.
<!doctype html> : html5 문서라는 뜻
<html lang="ko"> : html 태그 시작
머리 : 헤드타입에는 이 페이지가 의미하고 있는 정의
( 내부적으로 통신할 때 필요한 정보 )
( 화면에 출력되지 않음 )
<head>
</head>
몸체 : 화면에 출력해서 보여주는 모든 정보와 내용
<body>
</body>
</html> : html 태그 끝 (html문서 끝)
아래는 html파일을 생성했을때 우리가 주로 볼 수 있는 태그들에 대해 간략히 설명해놓은 코드입니다.
<!DOCTYPE html> <!-- 페이지의 타입 선언 -> html5로 선언했다 -->
<html>
<!-- head태그와 body태그로 구성되어있다 -->
<head>
<!--
head태그는 페이지에 대한 주요정보를 설정한다.
외부에서 불러올 파일, 내부 script, css에 대한 설정,
페이지 작성 환경, 저작자, title 등을 작성
-->
<!--
meta태그 이용하기
meta태그 : 페이지에 대한 기본정보를 설정한다
-->
<!-- 페이지의 기본 언어 설정 -->
<meta http-equiv = "content-language" content = "ko"/>
<!-- 페이지의 문자 형식, 페이지 형식을 지정 -->
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<!-- 문자열 인코딩 -->
<meta charset = "utf-8"/>
<!-- 페이지를 자동으로 이동하는 옵션 -->
<!--
<meta http-equiv = "refresh" content = "3;http://www.iei.or.kr"/>
-->
<!-- meta태그의 name 속성 : 페이지에 대한 기본 정보 -->
<meta name = "application-name" content = "html struct"/>
<meta name = "author" content = "yjkim"/>
<meta name = "description" content = "html 기본구조"/>
<meta name = "generator" content = "vscode"/>
<meta name = "keywords" content = "web, html, html5, html구조"/> <!-- 검색어로 사용 -->
<!-- 반응형 적용 속성 -->
<meta name = "viewport" content = "width = device-width, initial-scale-1.0"/>
<!--
페이지의 제목 설정하기 ( 브라우저의 탭에 뜨는 이름 )
title 태그
-->
<title>나의 첫 html 패이지 </title>
<!--
외부에서 파일(css)을 불러와서 적용하기
link 태그
파비콘( 페이지 이름 옆에 뜨는 작은 그림 ) 생성 가능
-->
<link rel = "stylesheet" type = "text/css" href = "test.css"/>
<!-- 파비콘 설정하기 -->
<link rel = "icon" type = "image/x-icon" href = "https://www.iei.or.kr/khfavicon.ico"/>
<!-- 스크립트를 작성하는 태그 -->
<script>
// 자바스크립트 구문을 작성하는 부분
// 꼭 head태그 안에 있어야 하는것은 아니다
// alert('안녕 내가 스크립트야');
</script>
<!-- 외부에 저장되어 있는 스크립트 파일을 불러오는 것 -->
<script src = "testscript.js"></script>
<!-- 스타일을 작성하는 태그 -->
<style>
/*
css구문이 들어가는 곳
*/
p {
color : coral;
background-color :gray;
}
</style>
<!--
base 태그
root경로를 변경할 수 있다
-->
<base href = "http://www.naver.com"/>
</head>
<body>
<!--
body 태그에는
페이지에서 출력할 내용을 작성한다.
브라우저 화면에 출력될 내용
text, 동영상, 음악, 이미지 등을 작성
-->
<h1>3초 후에 변경된 페이지로 이동합니다.</h1>
<p>html 잘 배워보자</p>
<a href = test.do>base 연결</a>
</body>'코딩 > HTML' 카테고리의 다른 글
| [html] 폼(Form) 관련 태그 (0) | 2021.12.15 |
|---|---|
| [html] HTML _ 목록 관련 태그 (0) | 2021.12.13 |
| [html] 웹통신 기초 (인터넷, WEB, 웹 특징) (0) | 2021.12.08 |