HTML 속성은 HTML 요소에 대한 추가 속성을 정의합니다. HTML 요소의 여는 태그에 지정되며 일부 요소는 작동하려면 속성이 필요합니다.
HTML 속성이란 무엇이며 어떻게 사용합니까? HTML을 배울 때 attributes이라는 용어를 접할 수 있습니다. . 속성은 HTML 페이지의 특정 요소에 대한 추가 정보를 제공하는 데 사용됩니다.
속성은 HTML 문서의 여는 태그에 지정되며 일반적으로 이름/값 쌍으로 지정됩니다. 예를 들어 name이라는 속성은 value 값으로 다음과 같이 표시됩니다. name=value .
이 자습서에서는 예제를 참조하여 HTML 속성의 기본 사항과 속성이 사용되는 이유에 대해 설명합니다. 또한 HTML의 대부분의 요소에 적용되고 코딩할 때 가장 많이 접하게 되는 몇 가지 범용 속성에 대해서도 설명합니다.
HTML 속성이란 무엇입니까?
HTML 마크업 언어의 모든 요소에는 해당 요소가 보유한 추가 속성을 정의하는 데 사용되는 속성이 있을 수 있습니다.
예를 들어 이미지의 높이 또는 양식 요소에 의해 저장된 값을 정의하는 속성을 지정할 수 있습니다. 이러한 속성은 요소에 고유하므로 웹 페이지에서 특정 요소가 작동하는 방식을 사용자 정의하는 데 사용할 수 있습니다.
어떤 경우에는 요소에 속성이 필요합니다. 예를 들어 <a>로 작업하는 경우 HTML 태그, href를 정의해야 합니다. 태그가 클릭할 때 어떤 URL을 가리켜야 하는지 알 수 있도록 속성을 지정합니다.
HTML의 속성에는 두 가지 구성 요소가 있습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
- 이름 생성 중인 속성의 이름을 정의합니다.
- 가치 속성이 보유한 값을 정의합니다.
Career Karma 웹사이트 홈 페이지를 가리키는 링크를 정의하고 싶다고 가정합니다. 이를 위해 <a>를 사용할 수 있습니다. HTML의 태그. 그러나 태그가 Career Karma 홈페이지로 연결되도록 하려면 href도 사용해야 합니다. 속성.
다음은 <a>의 예입니다. Career Karma 홈페이지로 연결되는 태그:
<a href="https://careerkarma.com/">Career Karma</a>
이 태그는 href라는 속성을 사용합니다. Career Karma 홈페이지의 URL인 "https://careerkarma.com/" 값을 할당합니다.
HTML의 속성은 대소문자를 구분하지 않지만 속성은 일반적으로 소문자로 작성됩니다.
작은따옴표 및 큰따옴표 HTML
속성에 값을 할당할 때 작은따옴표와 큰따옴표를 모두 사용할 수 있습니다. 큰따옴표를 사용하는 것이 가장 일반적인 접근 방식입니다(이전 예제에서 사용한 방법입니다). 그러나 사용하는 접근 방식은 속성의 내용에 따라 다릅니다.
John ‘Rocketman’ Smith 값을 갖는 양식 요소를 생성한다고 가정합니다. . 이 경우 값에 작은따옴표가 포함되어 있으므로 속성 이름에 큰따옴표를 사용해야 합니다. 이 속성을 선언하는 데 사용할 코드는 다음과 같습니다.
<input type="text" value="John 'Rocketman' Smith">
반면에 값에 큰따옴표가 포함되어 있고 대신 John “Rocketman” Smith라고 가정합니다. . 이 경우 작은 따옴표를 사용하여 속성을 정의하려고 합니다. 사용할 코드는 다음과 같습니다.
<input type="text" value='John "Rocketman" Smith'>
HTML 부울 속성을 사용하는 방법
일부 속성은 이름/값 쌍 구조를 사용하지 않습니다. 우리는 이것을 부울 속성이라고 합니다. 이러한 속성은 true-false 값만 가질 수 있으며 해당 값은 지정되면 true로 설정되고 지정되지 않으면 false로 설정됩니다.
부울 속성은 일반적으로 HTML 양식에서 사용됩니다. 사용자에게 이름을 묻는 양식 필드를 생성한다고 가정합니다. 이 양식 필드는 기본적으로 필수입니다. required를 사용할 수 있습니다. 이 작업을 수행하기 위한 부울 속성:
<input type="text" value="Name" required>
이 예에서는 3개의 속성이 있는 입력 태그를 정의했습니다. 처음 두 속성, type 및 value , 이름/값 구조를 사용합니다. 세 번째 속성, required 는 부울 속성입니다. required를 지정했기 때문에 부울 속성, 해당 값은 true로 설정됩니다.
표준 HTML 속성을 사용하는 방법
HTML의 모든 요소에 적용되는 몇 가지 HTML 속성이 있습니다. 이를 전역 속성이라고 합니다.
웹 페이지 전체에서 이러한 문제를 접할 수 있으므로 해당 항목과 작동 방식을 아는 것이 중요합니다. 요소에 적용되는 가장 일반적인 표준 HTML 속성 4가지를 살펴보겠습니다.
HTML ID 속성
id 속성은 요소에 고유 식별자를 제공합니다. id 속성 자체는 HTML 요소가 표시되는 방식에 영향을 미치지 않지만 CSS 또는 JavaScript로 작업할 때 조작할 특정 요소를 선택할 수 있습니다.
주어진 요소에 할당하는 ID는 문서에서 고유해야 합니다.
다음은 <p>에 사용된 id 속성의 예입니다. 태그:
<p id="secondParagraph">Hello, there! Welcome to my site.</p>
이 예에서는 <p>를 할당했습니다. secondParagraph 값으로 id 속성에 태그 지정 .
HTML 제목 속성
HTML 제목 속성은 종종 요소나 그 내용을 설명하는 데 사용됩니다. title 속성에 저장된 값은 사용자가 커서를 요소 위로 가져가면 나타나는 툴팁으로 표시됩니다.
사용자 이름을 수집하는 입력 필드가 있다고 가정합니다. This field is required를 표시하고 싶습니다. 사용자가 필드 위로 마우스를 가져갈 때 다음 코드를 사용하여 이 목표를 달성할 수 있습니다.
<input type="text" title="This field is required">
텍스트 필드 위로 마우스를 가져가면 다음 툴팁이 나타납니다.
HTML 스타일 속성
HTML 스타일 속성은 특정 요소에 대한 CSS 스타일을 지정하는 데 사용됩니다. 요소 스타일을 지정하는 이러한 접근 방식을 인라인 스타일 생성이라고 합니다.
회색으로 표시하려는 텍스트 단락을 생성한다고 가정합니다. style 속성을 사용하여 텍스트의 색상을 지정할 수 있습니다. 이 작업을 수행하는 데 사용할 수 있는 코드는 다음과 같습니다.
<p style="color: gray;">Hello, there! This is my website.</p>
다음은 코드의 출력입니다.
보시다시피 텍스트의 색상이 회색으로 변경되었습니다. 스타일 속성을 지정하고 color를 변경했기 때문입니다. gray과 같은 스타일 .
요소별 HTML 속성
요소와 관련된 다양한 다른 속성이 있습니다. 다음은 몇 가지 예입니다.
img src
<img src="source.png">
이 예에서는 src 속성을 지정했습니다. 이 속성은 img와 함께 사용됩니다. 태그가 웹페이지에서 렌더링해야 하는 파일을 가리키는 태그입니다.
a href
<a href="https://careerkarma.com/">Career Karma homepage</a>
href 속성은 이 예에서 <a>를 알리는 데 사용됩니다. 링크를 클릭할 때 사용자를 안내할 사이트에 태그를 지정합니다.
이미지 대체
<img src="source.png" alt="Image of a book">
코드에서 alt를 지정했습니다. 기인하다. 이 속성은 img 태그에만 해당되며 이미지를 표시할 수 없는 경우 웹페이지에서 처리할 대체 텍스트를 지정합니다.
HTML의 alt 속성은 스크린 리더가 읽을 수 있으므로 스크린 리더에 의존하는 시각 장애가 있는 사람도 여전히 우리 웹페이지를 이해할 수 있습니다.
HTML 속성 사용 방법:결론
속성은 HTML의 특정 요소에 적용되는 추가 속성입니다. 속성은 항상 요소의 시작 태그에 지정되며 일반적으로 이름/값 쌍을 사용합니다.
이 자습서에서는 예제를 참조하여 HTML의 기본 속성, 부울 속성, 몇 가지 표준 HTML 속성 및 일부 요소별 속성을 살펴보았습니다. 이제 HTML에서 속성을 사용하는 방법을 알게 되었습니다.