속성 (Attributes)

요소는 아래와 같이 속성을 가질 수 있습니다.

<p class="editor-note">My cat is very grumpy</p>

위 경우 class="editor-note" 가 속성이 됩니다.

속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다. 위 경우 나중에 스타일에 관련된 내용이나 기타 내용을 위해 해당 목표를 구분할 수 있는 class 속성을 부여 했습니다.

속성을 사용할 때에는 아래 내용을 지켜야 합니다.

1. 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 되고, 하나 이상의 속성들이 있는 경우엔 속성 사이에 공백이 있어야 합니다.
2. 속성 이름 다음엔 등호(=)가 붙습니다.
3. 속성 값은 열고 닫는 따옴표로 감싸야 합니다.

참과 거짓 속성 (Boolean attributes)

때때로 값이 없는 속성을 볼 수 있을텐데 이것은 허용되는 것입니다. 이를 bool 속성이라고 하며, 일반적으로 그 속성의 이름과 동일한 하나의 값만을 가질 수 있습니다. 예를 들어 disabled 속성을 양식 입력 요소에 할당하면 사용자가 데이터를 입력할 수 없도록 비활성화(회색으로 표시) 할 수 있습니다.

<input type="text" disabled="disabled" />

이것은 다음과 같이 줄여쓸 수 있습니다. (참고를 위해 비활성화 하지 않은 형태로 포함 합니다.)

<input type="text" disabled >

<input type="text" >

속성값의 따옴표 생략

웹을 둘러보면 따옴표가 없는 속성값을 포함한 온갖 이상한 마크업 스타일을 볼 것입니다. 어떤 상황에선 이런 것이 허용되지만, 다른 상황에서는 마크업 형식을 망쳐버립니다. “anchor”를 의미하는 <a> 요소를 이용한 코드로 href 속성만 있는 버전을 작성해 봅니다.

<a href=https://www.mozilla.org/>favorite website</a>

여기에 title 속성을 추가하면 문제가 발생합니다.

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>

이렇게 작성할 경우, 브라우저는 마크업을 잘못 해석하여 title 이 세 개의 속성값을 가진다고 생각 할 것입니다. title 의 속상값 “The” 와 두 개의 bool 속성값 Mozilla, homepage 로 인식을 하게 됩니다. 이것은 우리가 의도한 것도 아닐 뿐더러 오류가 발생하거나 예상치 못한 동작을 할 수도 있습니다.

이러한 이유로 항상 속성값이 따옴표를 붙이는것이 좋습니다. 이런 오류를 피할 수도 있고, 코드의 가독성도 좋아지기 때문입니다.

작은 따옴표, 큰 따옴표

작성하고 있는 예시의 모든 속성값은 큰 따옴표에 둘러싸여 있는 것을 볼 수 있습니다. 하지만 어떤 사람의 HTML 에서는 작은 따옴표를 볼 수도 있습니다. 이것은 스타일의 문제로 본인이 좋아하는 방법을 사용하면 됩니다. 동일한 이유로 아래의 예시는 똑같이 동작합니다.

<a href="http://www.example.com">A link to my example.</a>

<a href='http://www.example.com'>A link to my example.</a>

주의해야할 점은 두 개를 섞어 쓰면 안된다는 것입니다. 아래는 잘못 사용한 예시입니다.

<a href="http://www.example.com'>A link to my example.</a>

만약 한 가지 따옴표를 사용 했다면 다른 따옴표로 속성값을 둘러싸서 오류를 방지할 수 있습니다. 아래 예시를 확인해 봅니다.

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

만약 따옴표 안에 같은 따옴표를 사용하고 싶다면 (작은 따옴표든 큰 따옴표든 무관합니다.) 따옴표를 표시하기 위해서 HTML entities 를 사용 하면 딥니다. 잘못된 예시를 먼저 보겠습니다.

<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>

아래와 같이 바꿔주면 정상적으로 작동하게 됩니다.

<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>

 

https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started