HTML Attributes: 웹 콘텐츠의 디테일을 완성하다
웹페이지를 구성하는 HTML은 단순히 구조를 정의하는 언어에 그치지 않습니다. HTML 요소들이 의도한 대로 동작하고, 원하는 디자인과 기능을 제공하려면 **Attributes(속성)**의 도움이 필수적입니다. 속성은 각 요소에 추가적인 정보를 제공하거나, 특정 동작 방식을 지정하도록 도와주는 중요한 도구입니다. 예를 들어, 링크를 새 탭에서 열리게 하거나 이미지의 대체 텍스트를 설정하는 작업은 모두 속성을 통해 이루어집니다.
이 글에서는 HTML Attributes가 무엇인지, 기본적인 사용법과 함께 주요 속성들을 살펴보며, 실제 웹페이지 제작에서 어떻게 활용할 수 있는지 알아보겠습니다. Attributes를 제대로 이해하면, 한층 더 완성도 높은 웹 콘텐츠를 제작할 수 있을 것입니다.
1. 속성(Attributes)의 기능과 형식
속성은 HTML 태그들에 대한 추가 정보를 제공하는 역할을 한다.
→ 모든 HTML 태그들은 속성을 가질 수 있다.
→ 속성은 항상 start tag 에서 지정된다.
→ 속성은 항상 다음과 같은 형식을 띈다 : name = "value"
example) <a href=" url 주소 ">강코딩의 블로그</a>
2. 속성(Attributes)의 종류
(1) href 속성
→ <a> 태그는 하이퍼링크로써, href 속성을 가지며 기능은 페이지의 URL을 표시한다.
(2) src 속성
→ <img> 태그는 HTML 페이지에 이미지를 삽입하는데 사용되고, src 속성은 표시할 이미지의 경로를 지정한다.
→ example ) <img src="img_baby.jpg">
→ url 이 슬래쉬가 포함되지 않은 이미지 url을 사용하는 것이 좋다. 외부 url은 대게 슬래쉬(/)가 포함되는데,
이는 외부 사이트에서 가져온 url을 의미한다. 저작권 문제가 생길수도 있고 외부에서 이미지를 바꿔버리면
내 이미지도 바뀌어버린다.
(3) width 와 height 속성
→ <img> 태그는 마찬가지로 width와 height 속성도 가질 수 있다.
(4) alt 속성
→ alt 속성은 어떠한 이유로 이미지가 표시가 안될 경우, 이미지의 대체 텍스트를 보여준다.
(5) style 속성
→ style 속성은 스타일을 더해주는 태그다. 컬러/폰트/사이즈 등등....
→ (example) <p style="color:red;">This is a red paragraph.</p>
(6) lang 속성
→ 언어를 나타내주는 속성이다. ex) <html lang="en">
→ lang 속성에 country code 를 추가하여 나타낼 수도 있다.
ex) <html lang="en-US">
(7) title 속성
→ 마우스를 text에 가져다 놨을 때, 텍스트에 대한 대체텍스트를 보여준다.
ex) <p title="I'm a tooltip">This is a paragraph.</p>
결론
지금까지 살펴본 속성들의 활용법은 웹 개발의 기초일 뿐입니다. 실제 프로젝트에서 다양한 속성을 조합하고 응용한다면 더욱 풍부하고 직관적인 웹 경험을 제공할 수 있습니다. HTML 속성을 제대로 이해하고 다룰 수 있는 능력은 효율적인 코딩뿐 아니라, 보다 나은 사용자 경험(UX)을 설계하는 데에도 큰 도움이 될 것입니다.