SG의 개발 공부로그

HTML 은 무엇인가? (Hypertext Markup Language) 본문

HTML & CSS

HTML 은 무엇인가? (Hypertext Markup Language)

DebeloperSG 2023. 2. 19. 19:16
728x90

HTML 

 

Hypertext Markup Language는 웹 페이지 및 기타 온라인 콘첸트를 만드는데

사용되는 마크업 언어이다.

웹의 중추이며 웹 사이트의 기본 빌딩 블록 역활을 한다.

 

건물을 지을때도 처음에 땅을 파고 기초공사를 하고 구조를 잡는 것과 비슷하다.

HTML 은 웹에서 콘텐츠를 만들고 구조화할수 있는 간단하고 강력하며, 다재다능한 언어이다.

이 블로그 게시물에서는 기본 구조에서 양식 및 멀티미디어와 같은 고급 주제에 이르기까지

HTML에 대해서 자세하게 살펴보려고 한다.

 

HTML 문서는 태그와 속성의 조합을 사요하여서 생성된다.

태그는 다양한 유형의 콘텐츠를 정의하는데 사용되며, 

속성은 해당 태그에 대한 추가 정보를 제공한다.

 

 

꺽쇠 괄 <> 로 묶인 태그를 사용하여 작성된다.

HTML문서는 일반적으로 헤드와 본문의 두 부분으로 구성된다.

헤드 섹션은 제목, 사용하는 스크립트 또는 스타일시트와 같은 문서에 대한

메타데이터를 제공하는 반면 본문 섹션에는 페이지의 표시 콘텐츠가 포함된다.

 

 

예시입니다.

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Welcome to my page!</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

<!DOCTYPE html> 은 사용 중인 HTML의 버전을 지정합니다. (이 경우 HTML5)

<html> 태그는 전체 문서를 포함하며,

<head> 및 <body>라 는 두 개의 하위 태그를 포함한다.

<head> 태그는 <title> 태그를 사용하여 설정한 페이지 제목을 포함하여 문서에 대한 정보를 포함한다.

 

<body> 태그는 페이지의 보이는 콘텐츠를 포함한다.

이 예시에서는 제목 <h1>과 단락 <p>가 있다.

 

HTMl 태그에는 태그에 대한 추가 정보를 제공하는 속성도 있을 수 있다.

 

<img src="image.jpg" alt="A beautiful sunset" width="500">

예를 들어서 <img> 태그는 이미지를 표시하는데 사용되며, src , alt 및 width를 비롯한

여러 가지의 속성들이 있습니다.

 

위 예시에서는

src속성은 이미지 파일의 위치를 지정하고 alt  속성은 이미지에 대한 대체 텍스트를 제공하며,

(이미지를 로드할 수 없는 경우 표시됨)

width 속성은 이미지의 너비를 500px로 설정한다.

 

hHYML은 링크, 목록 양식 및 멀티미디어 콘텐츠를 만들기 위한 태그도 제공한다.

 

여기 몇 가지 예시가 있다.

 

<a href="https://www.google.com/">Go to Google</a>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <input type="submit" value="Submit">
</form>

<video src="video.mp4" width="640" height="360" controls></video>

이 예시에서는 <a> 태그는 Google에 대한 하이퍼링크를 만들고,

<ul> 태그는 3개의 항목이 있는 순서 없는 목록을 만들고,

<form> 태그는 2개의 입력 필드와 제출 버튼이 있는 양식을 만들고,

<video> 태그는 재생 컨트롤이 있는 비디오를 포함하고 있다.

 

이들은 HTML로 수행할 수 있는 작업의 몇 가지에 예시일 뿐이다.

광범위한 태그 및 속성을 통해서 HTML은 동적 및 대화형 웹 콘텐츠를 만들기 위한 강력한 도구를 제공한다.

 

 

728x90
저작자표시 변경금지 (새창열림)

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

CSS Animate 애니메이션 (사용법 및 장점과 모범 사례)  (1) 2023.02.27
CSS 는 무엇인가? (Cascading Style Sheets)  (1) 2023.02.19
'HTML & CSS' Related Articles more