HTML-속성

우리는 HTML 태그와 제목 태그와 같은 사용법을 거의 보았습니다. <h1>, <h2>, 단락 태그 <p>및 기타 태그. 지금까지 가장 단순한 형태로 사용했지만 대부분의 HTML 태그는 추가 정보 인 속성을 가질 수도 있습니다.

속성은 HTML 요소의 특성을 정의하는 데 사용되며 요소의 여는 태그 안에 배치됩니다. 모든 속성은 두 부분으로 구성됩니다.name 그리고 value

  • 그만큼 name설정하려는 속성입니다. 예를 들어, 단락<p> 예제의 요소는 이름이 align, 페이지에서 단락의 정렬을 나타내는 데 사용할 수 있습니다.

  • 그만큼 value속성 값을 설정하고 항상 따옴표 안에 넣으려는 것입니다. 아래 예는 align 속성의 세 가지 가능한 값을 보여줍니다. left, centerright.

속성 이름과 속성 값은 대소 문자를 구분하지 않습니다. 그러나 W3C (World Wide Web Consortium)는 HTML 4 권장 사항에서 소문자 속성 / 속성 값을 권장합니다.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

이것은 다음 결과를 표시합니다-

핵심 속성

(모두는 아니지만) 대부분의 HTML 요소에서 사용할 수있는 네 가지 핵심 속성은 다음과 같습니다.

  • Id
  • Title
  • Class
  • Style

Id 속성

그만큼 idHTML 태그의 속성을 사용하여 HTML 페이지 내의 모든 요소를 ​​고유하게 식별 할 수 있습니다. 요소에 id 속성을 사용하려는 두 가지 주요 이유가 있습니다.

  • 요소가 고유 식별자로 id 속성을 전달하는 경우 해당 요소와 해당 콘텐츠 만 식별 할 수 있습니다.

  • 웹 페이지 (또는 스타일 시트)에 이름이 같은 두 요소가있는 경우 id 속성을 사용하여 이름이 같은 요소를 구별 할 수 있습니다.

별도의 튜토리얼에서 스타일 시트에 대해 설명합니다. 지금은 아래와 같이 두 단락 요소를 구별하기 위해 id 속성을 사용하겠습니다.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

제목 속성

그만큼 title속성은 요소에 대해 제안 된 제목을 제공합니다. 그들은 구문title 속성은 설명과 유사합니다. id 속성-

이 속성의 동작은 해당 속성을 전달하는 요소에 따라 달라 지지만 커서가 요소 위에 올 때나 요소가로드되는 동안 도구 설명으로 표시되는 경우가 많습니다.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

이것은 다음 결과를 생성합니다-

이제 "Titled Heading Tag Example"위로 커서를 가져 가면 코드에서 사용한 제목이 커서의 도구 설명으로 나오는 것을 볼 수 있습니다.

클래스 속성

그만큼 class속성은 요소를 스타일 시트와 연관시키는 데 사용되며 요소의 클래스를 지정합니다. CSS (Cascading Style Sheet)를 배울 때 class 속성 사용에 대해 자세히 알아 봅니다. 그래서 지금은 그것을 피할 수 있습니다.

속성 값은 공백으로 구분 된 클래스 이름 목록 일 수도 있습니다. 예를 들면-

class = "className1 className2 className3"

스타일 속성

스타일 속성을 사용하면 요소 내에서 CSS (Cascading Style Sheet) 규칙을 지정할 수 있습니다.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

이것은 다음 결과를 생성합니다-

이 시점에서 우리는 CSS를 배우는 것이 아니므로 CSS에 대해 많이 신경 쓰지 않고 계속 진행하겠습니다. 여기에서 HTML 속성이 무엇이며 콘텐츠 형식을 지정하는 동안 어떻게 사용할 수 있는지 이해해야합니다.

국제화 속성

대부분의 (전부는 아니지만) XHTML 요소에 사용할 수있는 세 가지 국제화 속성이 있습니다.

  • dir
  • lang
  • xml:lang

dir 속성

그만큼 dir속성을 사용하면 텍스트가 흐르는 방향을 브라우저에 나타낼 수 있습니다. dir 속성은 다음 표에서 볼 수 있듯이 두 값 중 하나를 취할 수 있습니다.

의미
ltr 왼쪽에서 오른쪽으로 (기본값)
rtl 오른쪽에서 왼쪽으로 (오른쪽에서 왼쪽으로 읽는 히브리어 또는 아랍어와 같은 언어)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

이것은 다음 결과를 생성합니다-

경우 DIR 속성은 <HTML> 태그 내에서 사용되며, 이는 텍스트는 전체 문서 내에서 표시되는 방법을 결정한다. 다른 태그 내에서 사용하면 해당 태그의 콘텐츠에 대한 텍스트 방향 만 제어합니다.

lang 속성

그만큼 lang속성을 사용하면 문서에 사용 된 기본 언어를 나타낼 수 있지만이 속성은 이전 버전의 HTML과의 하위 호환성을 위해서만 HTML에 유지되었습니다. 이 속성은xml:lang 새 XHTML 문서의 속성.

lang 속성 의 값 은 ISO-639 표준 2 자 언어 코드입니다. 검사HTML Language Codes: ISO 639 언어 코드의 전체 목록은

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

이것은 다음 결과를 생성합니다-

xml : lang 속성

XML : LANG의 속성은 대한 XHTML의 대체 속성. xml : lang 속성 의 값은 이전 섹션에서 언급 한 ISO-639 국가 코드 여야합니다.

일반 속성

다음은 많은 HTML 태그에서 쉽게 사용할 수있는 몇 가지 다른 속성의 표입니다.

속성 옵션 함수
정렬 오른쪽, 왼쪽, 가운데 태그를 가로로 정렬
valign 상단, 중간, 하단 HTML 요소 내에서 태그를 세로로 정렬합니다.
bgcolor 숫자, 16 진수, RGB 값 요소 뒤에 배경색 배치
배경 URL 요소 뒤에 배경 이미지 배치
신분증 사용자 정의 캐스 케이 딩 스타일 시트와 함께 사용할 요소의 이름을 지정합니다.
수업 사용자 정의 캐스 케이 딩 스타일 시트와 함께 사용할 요소를 분류합니다.
숫자 값 표, 이미지 또는 표 셀의 너비를 지정합니다.
신장 숫자 값 표, 이미지 또는 표 셀의 높이를 지정합니다.
표제 사용자 정의 요소의 "팝업"제목입니다.

다른 HTML 태그를 연구하면서 관련 예제를 살펴 보겠습니다. HTML 태그와 관련 속성의 전체 목록은 체크 참조하시기 바랍니다 HTML 태그 목록 .