이번은 HTML 강좌 5장 포스팅입니다. 내용은 HTML Attributes(속성)에 대한 것인데요. 이전 포스팅에서 잠깐 언급한 것들도 등장하니 이번에도 어려운 것은 없을 거 같네요.
HTML Attributes
모든 HTML elements는 attributes(속성)를 가질 수 있는데요.
이 속성이란 것은 HTML elements에 대한 추가적인 정보를 제공하는 역할을 합니다.
이것은 항상 start tag 안에서 정의되며, ‘name=”value”‘처럼 name과 value가 짝을 이룬 형태로 사용됩니다.
The lang Attribute
lang 속성? 이름만 딱 봐도 뭔지 감이 오시죠?
네, 맞습니다. 언어를 의미한다는 것을 쉽게 눈치챌 수 있을 거에요.
하… 그냥 제 혼자 공부하고 넘어가는 것이라면 30초도 안 되서 정리하고 넘어갈 내용인데… 흐미…
명색이 강좌라는 이름으로 포스팅을 하려다 보니 이걸 정리하는데 시간도 많이 걸리고… 참 골치 아프네요. ㅠㅠ
앞으로도 이런 게 종종 많이 나올텐데.. 그때마다 어찌 처리하면서 넘어가야 할지… 에겅..
인터넷에 있는 여러 웹 페이지의 소스를 살펴보면 <html> tag 안에 lang 속성을 사용하고 있는 것을 볼 수 있는데요.
국내 유명한 사이트 중 한 곳인 네이버의 소스를 보더라도 아래와 같이 사용하고 있는 것을 볼 수 있네요.
그렇다면 lang 속성은 <html> 태그 안에서만 사용해야 되는가?
그건 아닌 듯 싶네요. 그때 그때 필요한 곳에 사용하면 되는 것으로 보이네요.
<html> 태그 안에 사용하면 문서 전체가 해당 언어로 정의되지만 문서 안에서 다른 언어로 지정해줘야 할 부분이 있다면 그 부분에 lang 속성을 지정해 주면 된다고 합니다.
lang 속성을 지정하는 것은 웹 접근성 때문이라고 하며, 이는 스크린 리더나 검색 엔진에게 중요한 것이라고 하네요.
The title Attribute
title 속성은 해당 요소에 마우스 커서를 올렸을 때 title 속성값으로 넣은 텍스트를 툴팁의 형태로 보여줍니다.
<a href=”https://googlinfo.com” title=”클릭하면 이동합니다“>클릭</a>
아래 문장과 링크에 마우스 커서를 올려보세요. 툴팁이 나타나는 것을 확인하실 수 있을 거에요.
테스트 문장
The alt Attribute
alt 속성은 <img> 태그에서 title 속성과 함께 흔히 사용되고 있는데요.
어떤 이유로 이미지가 나타나지 않아서 엑박으로 표시되는 경우 그 이미지를 대체하는 텍스트를 표시하고자 할 때 사용됩니다.
위 예시의 경우 이미지(test.jpg)가 표시되지 않을 때 그 자리에 “테스트 그림”이라고 텍스트가 표시됩니다.
alt 속성을 사용함으로써 검색 엔진과 시각 장애인에게 해당 이미지에 대한 정보를 알려줄 수 있습니다.
따라서, 대체 텍스트는 시각 장애인이 해당 이미지를 이해할 수 있도록 자세히 설명하는 것이 좋다고 하네요.
Size Attributes
이미지의 크기를 표현하는 속성에는 ‘width‘와 ‘height‘가 있습니다.
여기서 사용된 속성값의 단위는 픽셀로 정의됩니다.
무슨 말이냐면, width=”200″이라는 것은 폭이 ‘200 픽셀’이라는 거죠.
The href Attribute
href 속성은 <a> tag와 함께 정의되며, 그 값으로 링크 주소를 갖습니다.
속성은 영문 소문자로…
HTML5 표준에서는 속성 이름에 대해 영문 대소문자를 구별하지는 않지만 가능한 소문자를 사용하는 것이 좋다고 하네요.
속성값은 따옴표로…
HTML5 표준은 속성값에 따옴표를 하는 것을 반드시 요구하지는 않습니다.
간단히 예를 들자면, 따옴표를 넣어 ‘<a href=”URL”>‘라고 하든, 빼고 ‘<a href=URL>‘라고 하든 상관없다는 거죠.
그런데 경우에 따라 따옴표를 넣지 않았을 때 의도치 않은 문제가 발생할 수 있기에 항상 큰 따옴표로 속성값을 감싸는 게 좋다고 하네요.
그런데, 간혹 속성값 자체에 따옴표가 포함되는 경우가 있을 수도 있는데요.
이럴 경우 <p title=‘A “B” C’>
혹은 <p title=“A ‘B’ C”>로 하시면 됩니다.
정리하면, 속성값 자체에 큰 따옴표가 포함되면 속성값 전체는 작은 따옴표로 감싸고, 작은 따옴표가 포함되면 큰 따옴표로 감싸라는 거에요.