HTML_HTML과 HTML의 구조 및 구성

HTML(HyperText Markup Language)

웹용 문서를 작성할 때 사용되는 언어
HyperText : 문서의 링크를 클릭하면 연결된 문서로 즉시 이동할 수 있는 기능
Markup : 문서에서 어느 부분이 제목인지, 본문인지, 링크인지, 그림인지 등을 표시할 때 마크업(태그)을 사용한다
마크업(태그)을 사용해서 작성된 문서이며, 링크를 클릭하면 연결된 다른 문서로 즉시 이동할 수 있는 문서를 작성할 때 사용되는 언어

HTML의 구성요소

태그

< 와 >를 이용해서 만든다
- 예) <a>, <p>, <table>, <ul> <body> 등
태그명은 소문자로 적는다
태그는 여는 태그, 닫는 태그가 있다
- 여는 태그 예) <a>, <p>, <table>, <body>
- 닫는 태그 예) </a>, </p>, </table>, </body>
태그를 작성할 때는 여는 태그와 닫는태그를 짝을 맞춰서 정확히 입력해야 한다

올바른 예

  <h1>html 수업</h1>
  <p>이번 시간에는 html의 주요 태그를 살펴봅시다.</p>

올바르지 않은 예

  <h1>html 수업
  <p>이번 시간에는 html의 주요 태그를 살펴봅시다.</p>

속성

태그마다 고유한 속성을 가지고 있다
속성은 원래 사용목적에 맞게 사용해야 한다
어떤 속성은 속성값이 미리 정해진 것들도 있다

  <input type="속성값">
  <!--
    속성값은 text, password, radio, checkbox, date, number, hidden, file, button, submit, reset ...
  -->
  
<!-- data-*로 시작하는 속성은 임의로 추가할 수 있다.-->    
    <img src="images/logo.png" data-title="회사로고" data-creator="홍길동" data-pubdate="2019-10-31">

태그는 속성과 함께 사용할 수 있다
- 속성은 태그와 관련된 부가적인 정보, 추가기능을 정의
- 형식 : <태그명 속성명 = "속성값" 속성명 = "속성값">
- 동일한 속성명을 여러 번은 적을 수 없다

  <img src="images/logo.png" width="160" height="70">

HTML 문서의 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>html 문서의 구조</h1>
</body>
</html>

<!DOCTYPE html>

모든 html문서는 반드시 <!DOCTYPE html>로 시작한다
<!DOCTYPE html>은 현재 html문서의 문서형식(document type)을 HTML5로 지정한다

<html lang="ko"></html>

실질적인 html문서의 시작과 끝을 나타낸다
모든 html 태그의 부모태그다.
모든 태그는 html의 자식태그이며, html 태그 내부에 html 태그는 웹페이지에서 단 하나만 존재한다
lang="ko"는 태그의 속성(Attribute)이다.
lang="ko"는 이 웹페이지에서 사용되는 언어는 한국어임을 나타낸다

<head></head>

이 웹페이지에 대한 메타데이터를 포함하고 있는 데이터다
메타데이터는 html 문서의 title, style, link, script에 대한 데이터다
이 태그에 포함된 내용은 화면에 표시되지 않는다
<head></head>태그에는 메타데이터 이외에 화면에 표시되는 태그는 포함할 수 없다

<body></body>

웹 브라우저에 출력되는 모든 태그는 <body></body>태그 사이에 위치한다

<meta>

<meta> 태그는 description, keywords, author, charset, 기타 메타데이터 정의에 사용된다
<meta> 태그에서 정의한 메타데이터는 브라우저, 검색엔진에서 사용된다
charset="UTF-8" 속성은 브라우저가 사용할 문자셋을 utf-8로 지정하는 것이다.
name="viewport" content="...." 속성은 모바일웹이나 반응형웹에서 각각의 기기장치를 인식할 때 사용되는 태그다.

<title></title>

<title> 태그는 이 웹페이지의 제목을 정의한다
정의된 제목은 브라우저의 탭에 표시된다

<style></style>

<head>
	<style>
		p {
        	background-color : yellow;	/*  배경색을 지정한다 */
            	color : blue;	 		/*  글자색을 지정한다 */
        }
	</style>
</head>
<body>
	<h1>style 태그 연습</h1>
    <p> style 태그는 html문서를 위한 스타일 정보를 정의하는 태그다 </p>
</body>

<style> 태그는 <head></head> 태그안에 넣어서 사용한다
<style> 태그는 html문서를 위한 스타일 정보를 정의하는 태그다

<link>

HTML 문서에서 외부 리소스와의 연결을 설정하는데 사용한다
주로 HTML파일과 외부 CSS파일의 연계에 사용
rel(RelationShip) : 현재 문서와 연결된 리소스와의 관계를 지정 / 아래 코드 같은 경우엔 스타일시트를 연결하는 것
href(Hypertext Reference) : 연결된 리소스의 위치(파일경로 또는 URL)을 지정 / 아래 코드 같은 경우엔 같은 폴더내에 있는 03-style.css를 받아오는 것

<head>
    <title>Document</title>
    <link rel="stylesheet" href="03-style.css">
</head>
<body>
    <h1>링크 태그 연습</h1>
    <p>link태그는 이 페이지와 외부 리소스와의 연계정보를 정의한다
        주로 html파일과 외부 css파일의 연계에 사용한다.
    </p>
</body>

<!-- 03-style.css 파일 내용 -->
p {
    background-color: lightgreen;
    color: red;
    font-size: 30px;
}

<script></script>

script태그는 javascript 소스코드를 포함하는 태그
script 태그에 정의된 javascript 소스코드는 브라우저에 내장된 자바스크립트 실행엔진으로 실행된다
style 태그와 같이 head태그안에 사용한다

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Document</title>
    <script type="text/javascript">
        let x = 10;
        let y = 20;
        let z = x*y;

        // 브라우저 화면에 경고창을 표시하는 자바스크립트 함수 실행
        alert('자바스크립트 실행됨, 실행결과 : ' + z);
    </script>
</head>
<body>
    <h1>script 태그 연습</h1>

    <p>script태그는 javascript 소스코드를 포함하는 태그다.
        script 태그에 정의된 javascript 소스코드는 브라우저에 내장된
        자바스크립트 실행엔진으로 실행된다.
    </p>
</body>
</html>

위 코드에서 사용한 alert 코드는 왼쪽 사진처럼 알림창이 뜨게한다. 확인버튼을 누르면 오른쪽 사진처럼 <body> 안에 있는 내용이 출력된다

'HTML,CSS' 카테고리의 다른 글

CSS_색상, 박스모델, 포지션과 레이아웃 (0)	2023.12.28
CSS_CSS, 선택자와 선택자 종류 (1)	2023.12.27
HTML_inline과 block, id와 class (0)	2023.12.26
HTML_태그의 종류(table,img) (0)	2023.12.22
HTML_태그의 종류 (h1~h6, p, a, ul~li~ol) (1)	2023.12.21

유서담 백엔드 성장일기

HTML_HTML과 HTML의 구조 및 구성

HTML(HyperText Markup Language)

HTML의 구성요소

HTML 문서의 구조

'HTML,CSS' 카테고리의 다른 글

티스토리툴바

HTML_HTML과 HTML의 구조 및 구성

HTML(HyperText Markup Language)

HTML의 구성요소

HTML 문서의 구조

'HTML,CSS' 카테고리의 다른 글

관련글

티스토리툴바