IT 과정 HTML 기초 010_요소, 속성 - zhaoJian의 기술 노트

요소

시작 태그	요소 내용	종료 태그
`<h1>`	이것은 제목입니다	`</h1>`
`<p>`	이것은 단락입니다	`</p>`
`<a href="https://www.zhaojian.net/" title="링크">`	이것은 링크입니다	`</a>`
`<img src="/images/logo.png" alt="이것은 이미지입니다">`	이것은 이미지입니다
`<br>`	줄 바꿈

1
<!DOCTYPE html>
2
<html lang="en">
3

4
    <head>
5
        <meta charset="UTF-8" />
6
        <title>hello HTML</title>
7
    </head>
8

9
    <body>
10
        <h1>이것은 제목입니다</h1>
11
        <p>
12
            이것은 단락입니다<br>
13
            <a href="https://www.zhaojian.net/" title="링크">이것은 링크입니다</a>
14
        </p>
15
        <img src="/images/logo.png" alt="이것은 이미지입니다" />
16
        <br />
17
    </body>
18

19
</html>

[!요약]

HTML 요소는 시작 태그로 시작하고, 종료 태그로 끝납니다

HTML 요소의 내용은 시작 태그와 종료 태그 사이의 내용입니다

일부 HTML 요소는 **빈 내용(empty content)**을 가지며, 이러한 내용이 없고 닫는 태그도 없는 요소를 빈 태그 또는 빈 요소라고 합니다. 특정 기능을 구현하고 간결성과 유연성을 유지하기 위한 것으로, 예: <br>, <hr>, <img>, <meta>, <input> 등이 있습니다.

대부분의 HTML 요소는 속성을 가질 수 있습니다

HTML 요소는 일반적으로 HTML 태그(HTML tag)라고 불립니다

HTML 요소는 일반적으로 쌍으로 나타납니다, 예를 들어 <p>와 </p>

HTML 요소 내부에 다른 HTML 태그를 중첩할 수 있습니다

HTML 요소는 대소문자를 구분하지 않지만, 소문자 사용을 권장합니다

속성

HTML 요소는 속성(Attribute)을 가질 수 있으며, 이는 요소에 대한 추가 정보를 제공하거나 요소의 특정 동작을 정의합니다. 속성은 항상 시작 태그에서 정의되며, 일반적으로 “속성명=속성값” 형식으로 나타납니다. 예를 들어, 링크(a) 요소는 href 속성을 사용하여 링크의 대상 주소를 지정할 수 있습니다:

예제:

1
<a href="https://www.zhaojian.net">zhaoJian.Net</a>

결과:

예제 결과

위 코드에서 a 요소의 href 속성 값은 "https://www.zhaojian.net"이며, 이는 링크를 클릭하면 브라우저가 해당 URL로 이동함을 의미합니다.

자주 사용되는 속성:

id: 요소에 고유 식별자를 제공합니다.
class: 요소에 하나 이상의 클래스 이름을 제공하며, 서로 다른 요소에 동일한 클래스 이름을 추가할 수 있습니다.
style: 요소에 인라인 스타일을 제공합니다.
title: 링크 요소에 제목 내용을 추가합니다.
alt: 이미지 요소에 설명 내용을 추가합니다.

[!요약]

속성은 항상 이름=값 쌍 형식으로 나타나며, 예: name="value".

속성과 요소 이름(또는 두 개 이상의 속성이 있는 경우 이전 속성) 사이에 공백으로 구분합니다.

속성 값은 항상 따옴표로 묶어야 하며, 큰따옴표가 가장 일반적으로 사용되지만 작은따옴표를 사용해도 문제없습니다.

속성과 속성 값은 대소문자를 구분하지 않지만, 소문자 사용을 권장합니다.

요소

속성

댓글