티스토리 뷰

Web Guides/HTML

01. HTML 소개_HTML 시작하기01

SBDB_뉴유 2022. 1. 22. 12:05

01. HTML 소개_HTML 시작하기01

moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다.

출처moz://a

HTML이란 무엇입니까?

먼저 HTML(Hypertext Markup Language)은 프로그래밍 언어가 아니고 방문하는 웹 페이지를 구성하는 방법을 웹 브라우저에 알려주는 마크업 언어 입니다.

HTML은 웹 개발자가 원하는 만큼 복잡하거나 간단해질 수 있습니다.

HTML은 콘텐츠의 다른 부분을 열거나 닫거나 마크업하여 특정 방식으로 나타나거나 작동하도록 하는 데 사용 하는 일련의 요소로 구성됩니다.

예를들어 콘텐츠를 하이퍼링크로 만들어 다른 페이지에 연결하고 단어를 기울임꼴로 표시하는 등의 작업을 수행할 수 있습니다.

HTML 요소의 구조

요소는 여는 태그, 내용, 닫는 태그로 구성됩니다.

  • 여는태그: "<"와 ">"로 묶인 요소 이름으로 구성됩니다. 여는태그는 요소가 시작되거나 적용되기 시작하는 위치를 표시합니다.
  • 내용: 이것은 요소의 내용입니다.
  • 닫는태그: 요소 이름 앞에 "/"가 포함된다는 점을 제외하고 여는태그와 동일합니다. 닫는태그는 요소가 끝나는 위치를 표시합니다.

예시

<em>안녕하세요!</em>

속성

요소도 속성을 가질 수 있습니다. 속성에는 콘텐츠에 표시되지 않는 요소에 대한 추가 정보가 포함됩니다.

예시

<em style="display: none;">

코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 시작하기</title>
</head>
<body>
    <img src="../img/html/HTML 시작하기.png" alt="">
    <h3>01. HTML 소개_HTML 시작하기01</h3>
    <p>moz://a에서 운영하는 학습사이트로 우리는 여기서 배워 보도록 하겠습니다.</p>
    <p>출처<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started" target="_blank">moz://a</a></p>

    <h3>HTML이란 무엇입니까?</h3>
    <p>먼저 HTML(Hypertext Markup Language)은 프로그래밍 언어가 아니고 방문하는 웹 페이지를 구성하는 방법을 웹 브라우저에 알려주는 마크업 언어 입니다. </p>
    <p>HTML은 웹 개발자가 원하는 만큼 복잡하거나 간단해질 수 있습니다.</p>
    <p>HTML은 콘텐츠의 다른 부분을 열거나 닫거나 마크업하여 특정 방식으로 나타나거나 작동하도록 하는 데 사용 하는 일련의 요소로 구성됩니다.</p>
    <p>예를들어 콘텐츠를 하이퍼링크로 만들어 다른 페이지에 연결하고 단어를 기울임꼴로 표시하는 등의 작업을 수행할 수 있습니다.</p>

    <h3>HTML 요소의 구조</h3>
    <p>요소는 여는 태그, 내용, 닫는 태그로 구성됩니다.</p>
    <ul>
        <li>여는태그: "&lt;"와 "&gt;"로 묶인 요소 이름으로 구성됩니다. 여는태그는 요소가 시작되거나 적용되기 시작하는 위치를 표시합니다.</li>
        <li>내용: 이것은 요소의 내용입니다.</li>
        <li>닫는태그: 요소 이름 앞에 "/"가 포함된다는 점을 제외하고 여는태그와 동일합니다. 닫는태그는 요소가 끝나는 위치를 표시합니다.</li>
    </ul>
    <img src="../img/html/HTML 요소의 구조.png" alt="">
    <h4>예시</h4>
<pre class="line-numbers"><code class="language-js">&lt;em&gt;안녕하세요!&lt;/em&gt;
</code></pre>

    <h3>속성</h3>
    <p>요소도 속성을 가질 수 있습니다. 속성에는 콘텐츠에 표시되지 않는 요소에 대한 추가 정보가 포함됩니다.</p>
    <img src="../img/html/HTML 속성.png" alt="">
    <h4>예시</h4>
<pre class="line-numbers"><code class="language-js">&lt;em style="display: none;"&gt;
</code></pre>
</body>
</html>
 

'Web Guides > HTML' 카테고리의 다른 글

01. HTML 소개_HTML 텍스트 기초01  (0) 2022.01.23
01. HTML 소개_HEAD에 뭐가 들었어?02  (0) 2022.01.23
01. HTML 소개_HEAD에 뭐가 들었어?01  (0) 2022.01.23
01. HTML 소개_HTML 시작하기02  (0) 2022.01.22
01. HTML 소개  (0) 2022.01.22

UP NEXT : Web Guides/HTML

댓글
© 2018 webstoryboy