Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML 속성을 사용하는 방법

가장 일반적으로 사용되는 속성 이름과 값을 살펴보고 HTML 속성을 사용하는 방법을 알아보세요.

HTML 속성이란 무엇입니까?

HTML에서 속성은 HTML 요소에 추가 정보를 추가하거나 기본 동작을 변경하는 데 사용되는 수정자 도구입니다.

추가된 속성이 없는 HTML 요소는 다음과 같습니다.

<tag>Content</tag>

속성이 있는 HTML 요소 다음과 같이 정의됩니다:

<tag attribute="value">Content</tag>

이 모델을 염두에 두고 몇 가지 실용적인 속성 예를 살펴보겠습니다.

href 속성

href 속성은 HTML에서 가장 중요한 속성 중 하나입니다.

href 다음 URL을 지정하는 데 사용됩니다.

  • 하이퍼링크(간단히 "링크"라고도 함).
  • 또는 스타일 및 스크립트와 같은 외부 리소스를 가져오기 위해

href의 가장 일반적인 사용 사례 앵커 요소 <a>에 링크 URL을 추가하는 것입니다. :

<a href="url-path">Link text</a>

이 링크를 통해 사용자는 내부적으로 페이지 사이를 클릭할 수 있습니다. (동일한 웹사이트/도메인에서) 또는 외부적으로 (다른 웹사이트 도메인으로).

내부 링크는 상대 경로를 사용합니다.

<a href="/">Home</a>

표준으로 "/" 모든 웹사이트의 첫 페이지인 index.html로 연결됩니다. 페이지.

정보라는 페이지가 있는 경우 및 about.html이라는 해당 HTML 문서 , 다음과 같이 내부적으로 연결할 수 있습니다.

<a href="/about">About</a>

이 링크는 TechStacker의 정보 페이지로 연결됩니다.

외부 링크에는 절대 경로가 필요합니다.

<a href="https://www.youtube.com">Go to YouTube.com</a>

대상 속성

앵커 요소로 작업하는 동안 또 다른 중요한 앵커 요소 속성인 target 속성.

target 속성은 위치를 지정합니다. 사용자가 링크를 클릭할 때 링크를 엽니다.

예를 들어 아래 외부 링크를 클릭하면 동일한 YouTube.com으로 이동합니다. 현재 있는 브라우저 탭 창:

<a href="https://www.youtube.com/">Go to YouTube.com</a>

YouTube.com으로 이동

이것은 기본적으로 <a>이기 때문에 발생합니다. 요소에는 target이 있습니다. 값이 _self인 속성 — href를 엽니다. 사용자가 있는 동일한 창의 링크 값입니다.

따라서 이 링크 요소:

<a href="https://www.youtube.com/"></a>

다음과 같이 컴퓨터/브라우저에서 읽습니다.

<a href="https://www.youtube.com/" target="_self"></a>

하지만 새 브라우저 탭에서 링크를 열려면 어떻게 해야 할까요?

문제 없습니다. 기본 _self를 재정의할 수 있습니다. _blank가 있는 값 값:

<a href="https://www.youtube.com" target="_blank" rel="noopener"
  >Go to YouTube.com (opens in a new tab)</a
>

이제 YouTube 링크가 새 브라우저 탭에서 열립니다.

YouTube.com으로 이동(새 탭)

이번 기회에 내 YouTube 채널을 홍보하겠습니다.

내 YouTube 채널(TechStacker)로 연결됩니다.

앵커/링크 요소에 대해 자세히 알아보세요.

값이 없는 속성

일반적으로 속성 앵커 요소 예제와 같이 속성 이름과 속성 값으로 구성됩니다.

그러나 때때로 가치 (동작)은 속성 이름에 내장되어 있습니다.

예를 들어, defer HTML <script> 수정 속성 요소:

<script defer src="app.js"></script>

defer 속성에 할당 연산자가 없습니다(=). ) 또는 동작이 내장되어 있기 때문에 값입니다.

defer 이른바 부울입니다. 기인하다. 부울은 true의 두 가지 값만 가질 수 있는 데이터 유형에 사용됩니다. 또는 거짓 (또는 활성화/비활성화 ).

defer를 자세히 살펴보겠습니다. 속성.

이 <script> 요소, 없음 defer 속성은 src를 실행합니다. app.js의 JavaScript 코드 브라우저가 로드하는 즉시 값:

<script src="app.js"></script>

기본적으로 HTML 문서는 한 번에 한 줄씩 위에서 아래로 구문 분석(읽기)됩니다. 즉, 문서 맨 위에 JavaScript를 넣으면 이전에 실행됩니다. 문서의 나머지 부분은 구문 분석이 완료되었습니다.

이것이 기본값입니다. 스크립트 요소의 동작.

그러나 defer를 추가하면 <script>로 기본 동작을 비활성화하는 요소:

<script defer src="app.js"></script>

이제 전체 페이지 로드가 완료될 때까지 JavaScript 코드가 실행되지 않습니다.

문자 그대로 지연 연기/연기/대기를 의미합니다.

죽은 말을 이기기 위해:

  • defer 없이 , JavaScript는 로드되는 즉시 실행됩니다.
  • 함께 defer JavaScript는 전체 HTML 페이지가 로드될 때까지 실행을 기다립니다.

속성이 헷갈리더라도 걱정하지 마세요. 실제로 사용하기 시작하면 항상 10배 더 이해가 됩니다.

맞춤 속성

사용자 정의 속성을 생성한 다음 JavaScript로 제어할 수도 있습니다. 사용자 정의 속성 이름 앞에는 data-가 와야 합니다. 레이블:

<tag data-custom-attribute-name="value">Content</tag>

예를 들어 "Apple"이라는 음식 요소가 있다고 가정해 보겠습니다. . 사용자가 클릭하면 유형이 무엇인지 표시하고 싶습니다. 음식의 팝업 대화 상자에 있습니다.

이를 위해 food-type이라는 사용자 정의 속성을 생성합니다. (data- 레이블)을 <div>에 추가합니다. Apple이 있는 요소 내부 텍스트:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

기능을 작동시키는 JavaScript:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

여기 데모가 있습니다.

HTML 코드 작동 방식:

  • 먼저 onclick을 추가했습니다. <div> 속성 요소. 이것은 클릭을 수신하는 이벤트 리스너를 연결하는 이벤트 속성입니다... 짐작하셨겠지만, 클릭!
  • 그런 다음 showDetailsBox(this)의 속성 값을 할당합니다. onclick으로 속성.
  • showDetailsBox() Apple 텍스트 요소를 클릭하는 즉시 호출되는 JavaScript 함수의 이름입니다.
  • this (this)의 일부 속한 객체를 참조하는 인수입니다(this 초심자에게는 다소 상급이므로 이해하지 못해도 괜찮습니다.)
  • id HTML 요소의 고유 ID를 지정하는 데 사용되는 내장 HTML 속성입니다. 이 경우 고유 ID는 apple입니다. .

자바스크립트 코드 작품은 이 HTML 튜토리얼의 범위를 벗어나므로 간단하게 설명하겠습니다.

showDetailsBox() 함수는 onclick에 의해 호출됩니다. 이벤트 속성, 코드 블록 { ... } 실행 내용:

function showDetailsBox(food) {
  ...
}

코드 블록 내부의 첫 번째 줄에서 JavaScript는 사용자 정의 data-food-type이 있는 HTML 요소를 선택합니다. 속성 및 해당 속성 값을 foodType이라는 변수에 할당합니다. :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

두 번째 줄에서 내장 alert()를 실행합니다. 메서드(팝업 대화 상자를 표시하고 foodType 값을 표시하도록 지시합니다. 물론 fruit입니다. :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

위의 전체 코드 예제를 완전히 이해하지 못하더라도 걱정하지 마십시오. 특히 초보자에게는 이해해야 할 내용이 많이 있습니다. 연습하면 이해가 될 것입니다!

HTML 속성에 대한 보다 광범위한 정보를 보려면 MDN 웹 문서 HTML 속성 참조를 살펴보는 것이 좋습니다.

중요: 보조 때문에 데이터 속성 내에서 볼 수 있고 액세스할 수 있어야 하는 중요한 콘텐츠를 저장하지 마세요. 기술은 때때로 그것들에 접근하지 않습니다. 검색 크롤러는 할 수 있습니다. 또한 데이터 속성 값을 인덱싱하지 않습니다. 따라서 여기에 중요한 SEO 콘텐츠를 넣지 마세요.