HTML 속성

PHPz원래의: 2024-09-04 16:17:23623검색

HTML 속성은 HTML 요소의 동작을 수정하는 특수 단어입니다. 요소의 여는 태그 내에서 사용되며 요소의 기본 기능을 수정하거나 필요한 기능을 제공할 수 있습니다. 구문적으로 속성은 HTML 시작 태그에 추가됩니다. 필수, 선택, 표준 또는 이벤트 속성으로 분류할 수 있으며 요소의 시작 태그 내에서 등호 '='로 구분된 이름-값 쌍으로 작성됩니다.

다양한 HTML 속성

아래에는 다양한 HTML 속성과 그 작동 방식이 자세히 나와 있습니다.

1. 핵심속성

주로 사용되는 네 가지 핵심 속성은 다음과 같습니다.

ID: 이 속성은 HTML 페이지 내에서 요소를 고유하게 식별합니다. 요소에 ID 속성이 있으면 요소와 해당 콘텐츠를 쉽게 식별할 수 있는 고유 식별자 역할을 합니다. 이는 웹페이지 내에 동일한 이름을 가진 요소가 여러 개 있을 때 특히 유용합니다.
제목 속성: 이 속성은 요소에 대한 제안된 제목을 제공합니다. 해당 동작은 사용되는 컨텍스트에 따라 달라지며 커서를 요소 위에 놓을 때 또는 요소가 로드될 때 도구 설명으로 표시될 수 있습니다. 또한 사용자가 요소 위로 마우스 포인터를 가져가면 해당 요소에 대한 추가 정보를 제공할 수도 있습니다.
클래스 속성: 이 속성은 요소의 클래스를 지정하여 요소를 스타일 시트와 연결합니다. 계단식 스타일 시트를 학습할 때 이 속성에 대해 더 자세히 알아볼 수 있습니다. 클래스 속성의 값은 공백으로 구분된 클래스 이름 목록일 수 있습니다. 예: class=”className1 className2 className3″
스타일 속성: 이 속성을 사용하면 사용자가 개별 요소에 대한 CSS 규칙을 지정할 수 있습니다. style 속성을 이용하면 HTML 요소에 글꼴 크기, 글꼴 모음, 색상 변경 등 다양한 CSS 효과를 적용할 수 있습니다.

2. 국제화 속성

Dir: dir 속성은 텍스트가 따라야 하는 방향을 브라우저에 나타내는 데 도움이 됩니다. 이 속성은 LTR과 RTL이라는 두 가지 값을 가질 수 있습니다. LTR은 왼쪽에서 오른쪽(기본값)을 의미하고, RTL은 오른쪽에서 왼쪽을 의미합니다. 태그에 따라 전체 문서에서 텍스트가 어떻게 표현되어야 하는지 결정됩니다. 태그 내용 내에서 텍스트 방향을 제어할 수도 있습니다.
Lang 속성: 이 속성은 문서에 사용된 기본 언어를 표시하는 데 도움이 됩니다. HTML에서 이를 사용하여 이전 버전의 HTML과의 호환성을 유지할 수 있습니다. 또한 새 XHTML 문서에서는 이를 XML: lang 속성으로 대체합니다. lang 속성의 값은 ISO-639 표준을 기반으로 하며 두 문자 언어 코드로 구성됩니다. 언어를 선언하는 것은 접근성과 검색 엔진이 콘텐츠를 적절하게 색인화하는 데 중요합니다.
XML-Lang 속성: 이 속성은 lang 속성을 대체하는 경향이 있습니다. XML-lang 속성의 값에는 ISO-639에 지정된 언어 및 국가 코드가 포함되어야 합니다.

3. 일반 속성

Align 속성: 이 속성은 웹페이지에서 특정 요소를 배치할 때 유용합니다. 페이지의 왼쪽, 오른쪽 또는 가운데 정렬을 변경할 수 있습니다. 모든 요소의 기본 정렬은 왼쪽으로 설정되어 있지만 정렬 속성을 사용하여 변경할 수 있습니다.
Src 속성: 웹페이지에 이미지를 삽입하려면 src 속성이 있는 태그입니다. 이미지의 주소를 큰따옴표 안에 속성 값으로 지정할 수 있습니다. 웹페이지에 이미지를 포함시키기 위해 다음과 같이 src 속성을 사용할 수 있습니다.

코드:

<html>
<head>
<title>src Attribute</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449">
</body>
</html>

Alt 속성: 이 속성은 기본 속성인 태그가 할당된 원본 이미지를 표시하지 못합니다. 코딩 마지막 단계에서 이미지를 사용하는 개발자에게 이미지를 설명할 수 있습니다. 기본 이미지가 실패하면 대체 이미지가 표시될 수 있습니다.
너비 및 높이 속성: 이러한 속성은 이미지의 높이와 너비를 조정할 수 있습니다.

예:

코드:

<html>
<head>
<title>Width and Height</title>
</head>
<body>
<img src=" https://www.google.com/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwi2lr-WjbvhAhXPXisKHb6JABgQjRx6BAgBEAU&url=https%3A%2F%2Fwww.google.com.mx%2F&psig=AOvVaw2jWnG-ltpLO7QE_Ge7TXeO&ust=1554627554684449" width="300px" height="100px">
</body>
</html>

Href Attribute: This attribute is used when the user wants to direct a specific link to any address and is used along with the tag. When the link is placed in the href attribute, it is associated with the text displayed within the tag. Clicking on this text will redirect the user to the URL specified in the href attribute. By default, clicking on the link will open the linked page in the same tab or window. If one wants to open the linked page in a new tab or window, one can use the target attribute and set its value to “_blank”. This behavior may vary based on the user’s browser settings.

4. Data Attribute

HTML provides custom data attributes that allow adding additional information related to the content in HTML tags. These attributes are not specific to HTML5 and can be used on all HTML elements. The data-* attribute enables the creation of custom data attributes that can store private data for the page or application.

In order to customize, one divides the data into two parts:

Attribute Name: It should have at least one character long and should not have any capital letters. This name can also be prefixed by using “data-“.
Attribute Value: Any string value can be associated with the attribute.

The syntax for a data attribute is as follows:

<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>

5. DOM Attribute Property

To retrieve the NamedNodeMap objects, one can use the attribute properties in the HTML DOM. This will return a group of node attributes. The NamedNodeMap represents a collection of attribute objects, which can be accessed by their index number, starting at 0. To use this, the user can access the node’s attributes using the syntax node.attributes.

The value returned is a NamedNodeMap object that contains all the attributes in the collection of nodes. However, if someone is using Internet Explorer 8 or an earlier version, the attributes property may return all possible attributes for any element, resulting in more values than expected.

Example:

Code:

<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM attributes Property
</title>
</head>
<body>
<h2>
HTML DOM attributes Property
</h2>
<button id = "CBA" onclick = "myeduCBA()">
Click Here!
</button>
<br><br>
<span>
Button element attributes:
</span>
<span id="sudo"></span>
<script>
function myeduCBA() {
// It returns the number of nodes
var cba = document.getElementById("CBA").attributes.length;
// Display the number of nodes
document.getElementById("sudo").innerHTML = cba;
}
</script>
</body>
</html>
The output for above program will be
Button element attributes: 2

6. Global Attributes

HTML also provides global attributes that can work with any HTML element:

Accesskey: Specifies a shortcut key to activate or focus on any element.
Translate: Specifies whether the content of the element is to be translated or not.
Class: One or more class names for an element are specified.
Title: Specifies extra information about an element.
Contenteditable: This attribute can be used to specify whether the content is editable or not.
Tabindex: Specifies the tabbing order of an element.
Dir: Specifies the text direction for any content of an element.
Spellcheck: Users can explicitly specify if they want to have the spelling and grammar checked or not.
Draggable: Specifies if an element should be draggable or not.
Dropzone: Specifies whether the dragged data is copied, moved, or linked when dropped.

7. Event Attributes

HTML has the ability to trigger actions when some events take place.

Onload: Fires after the page has finished loading.
Onmessage: A script that runs when the message is triggered.
Onstorage: A script that runs when a web storage area is updated.
Onerror: The script runs when an error occurs.
Onpagehide: The script can be used when the user navigates away from a page.

8. Form Event Attributes

Actions inside an HTML form trigger these events.

Onblur: 요소가 포커스를 잃자마자 트리거됩니다.
Onchange: 요소의 값이 변경되자마자 트리거됩니다.
Oncontextmenu: 컨텍스트 메뉴가 실행될 때 실행됩니다.
Onfocus: 요소가 포커스를 받는 즉시 트리거됩니다.
Oninput: 요소가 입력을 받으면 스크립트가 실행되어야 합니다.
온서치(Onsearch): 사용자가 검색창에 무언가를 입력하면 실행됩니다.
Oninvalid: 입력된 요소가 유효하지 않을 때 발생합니다.

9. 주요 이벤트 속성

Onkeydown: 키를 누를 때 트리거됩니다.
Onkeypress: 키를 누를 때 트리거됩니다.
Onkeyup: 사용자가 키를 놓았을 때 트리거됩니다.

10. 마우스 이벤트 속성

Onclick: 마우스가 요소를 클릭할 때 트리거됩니다.
Onmousemove: 마우스 포인터가 요소 위에 있는 동안 움직일 때 실행됩니다.
Onmouseip: 요소 위에서 마우스 버튼을 놓으면 트리거됩니다.
온휠: 요소 위에서 마우스 휠을 위아래로 굴릴 때 트리거됨

11. 드래그 이벤트 속성

Ondrag: 요소를 드래그할 때 실행됩니다.
Ondragleave: 요소가 유효한 놓기 대상을 벗어날 때 스크립트가 실행됩니다.
Ondrop: 드래그된 요소가 드롭될 때 트리거됩니다
Onscroll: 요소의 스크롤 막대가 스크롤될 때 스크립트가 실행됩니다.

결론

HTML은 시간이 지남에 따라 발전하여 핵심, 국제화, 데이터, 전역 및 이벤트와 같은 광범위한 속성을 제공하여 웹 애플리케이션과 페이지를 보다 대화형으로 만들었습니다. CSS와 결합된 HTML을 사용하면 웹 요소를 쉽게 사용자 정의하여 시각적으로 매력적인 웹 애플리케이션을 만들 수 있습니다.

위 내용은 HTML 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：치트 시트 HTML다음 기사：치트 시트 HTML