본문 바로가기
데이터엔지니어링/데이터수집

html 정의 및 기본 문법 정리

by goemgoem-i 2024. 10. 13.
반응형

 

 

html이란?

 

HTML은 마크업 언어입니다. 마크업 언어는 일반 텍스트에 태그를 사용하여 구조와 의미를 부여하는 언어

예를 들어, <h1>, <p> 같은 태그를 사용해 제목과 본문을 구분하고, 그 의미를 웹 브라우저가 이해할 수 있도록 함 

 

 

 

html 구조

 

<html>    
|- <head>  
| |- <title>
|_ <body>  

 

<!DOCTYPE html>
<html>
  <head>
    <title>웹 페이지 제목</title>
  </head>
  <body>
    <h1>안녕하세요!</h1>
    <p>이것은 첫 번째 문단입니다.</p>
  </body>
</html>

 

 

 

 

 

 

html주석 : 주석 안에 주석은 불가능 
<!-- 
-->

 

 

 

 

 

태그 

 

HTML은 여러 태그로 구성되며, 각 태그는 특정한 기능을 가집니다. 태그는 <와 >로 감싸여 있으며, 시작 태그와 종료 태그로 구성

 

 

 

1. <html >

HTML 문서의 시작과 끝을 나타내는 태그

<html>
  <!-- 이 안에 문서 구조가 들어갑니다 -->
</html>

 

 

 

2. <head>

메타데이터, 제목, 스타일 시트, 외부 파일 등을 정의하는 부분 / 사이트 명칭 

<head>
  <meta charset="UTF-8">
  <title>My Webpage</title>
</head>

 

 

 

3. <body>

메타데이터, 제목, 스타일 시트, 외부 파일 등을 정의하는 부분 / 실제로 보여지는 부분 

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph of text.</p>
</body>

 

 

 

4. <h1> ~ <h6>

제목을 나타냅니다. <h1>이 가장 크고 <h6>이 가장 작음

<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Heading</h3>

 

 

 

5. <p>

단락을 정의하는 태그

<p>This is a paragraph of text.</p>

 

 

 

6. <a>

하이퍼링크를 생성하는 태그입니다. href 속성을 사용하여 링크할 URL을 지정

<a href="https://www.example.com">Visit Example</a>

 

 

 

 

7. <img>

이미지 파일을 삽입하는 태그입니다. src 속성을 사용하여 이미지 경로를 지정하고, alt 속성은 대체 텍스트를 제공

<img src="image.jpg" alt="A descriptive text about the image">

 

 

 

8. <ul>, <ol>, <li>

목록을 생성하는 태그입니다. <ul>은 순서 없는 목록을, <ol>은 순서 있는 목록을 만들며, <li>는 각 항목을 나타냄

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

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

 

 

 

 

9. 블럭 요소 1 <div>

블록 레벨 요소를 그룹화하는 태그입니다. 주로 스타일링이나 레이아웃에 사용

<div>
  <p>This is a block element.</p>
</div>

 

 

10. 블럭 요소 2 <section>

문서의 주제별 섹션을 나타내며, 독립적인 의미를 가진 콘텐츠 블록입니다. 제목(<h1>, <h2>, 등)과 함께 사용되어 해당 주제를 명확히 구분

<section>
    <h2>주제별 섹션</h2>
    <p>이것은 특정 주제를 다루는 섹션입니다.</p>
    <p>섹션은 제목과 관련된 내용을 포함합니다.</p>
  </section>

 

 

 

11. 블럭요소 3 <article>

독립적인 콘텐츠 블록으로, 기사나 블로그 포스트와 같이 재사용 가능한 내용을 제공

<article>
    <h2>독립적인 기사</h2>
    <p>이 블록은 독립적인 내용을 나타내는 <code>&lt;article&gt;</code> 태그로 작성되었습니다.</p>
    <p>이 콘텐츠는 다른 문서나 사이트에서도 재사용될 수 있습니다.</p>
  </article>

 

 

 

 

10. <span>

인라인 요소를 그룹화하는 태그입니다. <div>와 유사하지만 인라인 콘텐츠에 사용

<p>This is a <span style="color: red;">red</span> word.</p>

 

 

 

11. <table>, <tr>, <td>, <th>

테이블을 정의하는 태그입니다. <table>은 테이블을, <tr>은 행을, <td>는 셀을, <th>는 머리글 셀

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>30</td>
  </tr>
</table>

 

 

 

 

 

12. <form>, <input>, <button>

폼을 만들고 사용자 입력을 받기 위한 태그입니다. <input>은 입력 필드를, <button>은 버튼

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Submit</button>
</form>

 

 

 

13. <link>

외부 리소스를 연결하는 태그입니다. 주로 CSS 파일을 연결할 때 사용

<link rel="stylesheet" href="styles.css">

 

 

 

14. <style>

HTML 문서 내에서 **CSS(스타일)**를 정의할 때 사용

 <style>
    body {
      background-color: lightgray;
    }
    h1 {
      color: blue;
      text-align: center;
    }
    p {
      font-size: 20px;
      color: green;
    }
  </style>

 

 

 

 

 

15. <meta>

페이지의 메타데이터를 정의합니다. SEO나 브라우저 정보 등을 설정할 때 사용

<meta charset="UTF-8">
<meta name="description" content="A brief description of the page">

 

반응형
저작자표시 비영리 변경금지

'데이터엔지니어링 > 데이터수집' 카테고리의 다른 글

youtube api 분석 및 프로젝트생성과 사용자 인증정보 생성  (0) 2024.12.19
페이지네이션의 오류로 인해서 알아보는 network 사용법  (2) 2024.11.04
웹크롤링과 웹스크래핑 차이점 및 특정데이터 추출하기  (2) 2024.11.01
동적웹사이트와 정적웹사이트 차이점 및 time.sleep()의 활용  (2) 2024.10.13
브라우저 자동화하는 셀리니움selenium 설치 및 with-as를 활용한 예문보기  (1) 2024.10.13

관련글

티스토리툴바