HTML이란?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>문서</h1>
<p>단락.</p>
</body>
</html>- HTML은 Hyper Text Markup Language의 약자입니다.
- HTML은 웹 페이지를 만드는 표준 마크업 언어입니다.
- HTML은 웹 페이지의 구조를 설명합니다
- HTML은 일련의 요소(Element)로 구성됩니다.
- HTML 요소(Element) 는 브라우저에 콘텐츠를 표시하는 방법을 알려줍니다.
- HTML 요소(Element) 는 "이것은 제목입니다", "이것은 문단입니다", "이것은 링크입니다" 등과 같이 콘텐츠에 라벨을 지정합니다.
HTML의 태그들
<!DOCTYPE html>
브라우저에 HTML 문서임을 알리는 지시어로 반드시 첫 줄에 나와야 하며 소문자로 사용해도 됩니다.
<!-- 주석문 -->
프로그래밍 언어에서 주석처리를 할 때 // 또는 /* */ 로 하는지만 HTML에서는 <!-- -->로 주석 처리하여 브루어주에 출력되지 않습니다.
<html>
<html> 태그는 HTML 문서의 루트 요소를 정의합니다. 이 태그는 문서의 시작과 끝을 나타내며, HTML 문서의 모든 콘텐츠는 이 태그 내에 포함됩니다.
<head>
문서의 제목, 본문을 설명하는 메타 태그, 자바스크립트코드와 CSS 스타일 시트 등이 포함 됩니다.
<body>
문서으 본문으로 이곳에는 자바스크립트 코드<script>를 작성할 수 있습니다.
<title>
사진처럼 브라우저 타이틀 제목을 출력하기 위한 태그로 <head> 태그 내에 작성되어야 합니다.
<h1 title="태그">예시</h1>title을 속성으로 사용할 수 있습니다. 이 경우에는 브라우저에 html을 실행했을 때 태그 부분에 마우스를 올리면 툴팁을 출력하게 됩니다.
<h1> ~ <h6>
일반적으로 문서를 알아보기 쉽게 제목 크기를 달리하는데 이 때 사용되는 태그입니다. <h1>이 가장 크기가 크고 점차 크기가 작아집니다.
<p>
문단은 여러 단락으로 나눌 수 있는데 이 때 하나의 단락을 <p>로 표현합니다.
<hr>
수평선을 그어 시각적 효과를 만들 수 있습니다.
<br>
HTML에서는 엔터키를 아무리 눌러도 다음 줄로 넘어가지 않습니다. 이를 위해 다음 줄로 넘어가기 위한 태그인 <br>을 사용합니다.
<pre>
<br> 태그가 있듯이 HTML은 원하는데로 출력하기 어렵습니다. 이 때 <pre> 태그는 작성한 코드 그대로 출력하는 기능을 합니다. 예를 들면 아무리 엔터키를 눌러도 다음줄로 넘어가지 않지만 <pre> 태그를 사용하면 엔터키를 사용한 만큼 다음 줄로 넘어갈 수 있습니다.
블록 태그와 인라인 태그
- 블록 태그 : <p>, <h1~6>, <div>, <ul>
- 인라인 태그 : <strong>, <a>, <img>, <span>
<img>
html에 이미지를 삽입하기 위한 태그로 src는 이미지 파일의 url이고 alt는 이미지를 출력하지 못했을 경우 출력되는 문자열입니다.
<table>
표를 작성하기 위한 태그로
- <caption> : 표 제목
- <thead> : 헤드 부분
- <tfoot> : 바닥 부분
- <tbody> : 데이터 부분
- <tr> : 행
- <th> : 제목
- <td> : 데이터 셀
시작 태그와 종료 태그
태그는 대부분 시작 태그 <>와 종료 태그 </>로 구성됩니다. VSCODE와 같은 IDE를 사용하면 자동으로 시작 태그와 종료 태그를 작성해주지만 붙이지 않을 경우 오류로 처리되어 화면에 출력되지 않습니다.
그리고 <br> 같은 종료 태그가 없는경우도 있는데 이 경우 <br /> 을 붙이는 것이 좋으나 그냥 사용해도 상관없습니다.
HTML 속성
- 모든 HTML 요소는 속성을 가질 수 있습니다.
- 속성은 요소에 대한 추가 정보를 제공합니다
- 속성은 항상 시작 태그 에 지정됩니다.
- 속성은 일반적으로 이름/값 쌍(예: name="value") 으로 제공됩니다.
속성의 종류로는
- href : href속성은 링크가 이동하는 페이지의 URL을 지정합니다.
- src : src속성은 표시할 이미지 경로를 지정합니다.
- 너비 및 높이 : 이미지의 너비와 높이(픽셀 단위)를 지정하는 width height가 있습니다.
- alt : 어떤 이유로 이미지를 표시할 수 없는 경우 이미지의 대체 텍스트를 지정합니다.
- style : 색상, 글꼴, 크기 등의 스타일을 요소에 추가하는 데 사용됩니다.
- lang : 웹 페이지의 언어를 선언하려면 태그 lang내부에 속성을 항상 포함해야 합니다 .
- title : 요소에 마우스를 올리면 툴팁으로 표시됩니다.
출처
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'Programming > HTML' 카테고리의 다른 글
| HTML 클래스 속성과 ID 속성 (0) | 2024.08.03 |
|---|
