[웹] HTML/CSS #6 :: 속성이란?

<h1>HTML 실습</h1> <h3>정말 쉬운 실습</h3> <p>이건 진짜 시작이 반이다</p> <a href="#" target="_blank">네이버로 가자</a>

빠르게 진행하겠다. 속성은 태그를 보조해주는 역할이다. 태그는 <> 사이에 태그 이름이 들어가 있는 단순한 구조다. 여기에 좀 더 많은 기능을 부여해주는 것이 속성이다. CSS를 통해 태그를 보조해주는 경우가 많지만, 디자인보다 '기능'에 가까운 쪽은 HTML 자체 속성을 활용한다. 위의 표 중에서 맨 아래 요소만 가져와보겠다. #에는 네이버의 메인 주소를 치면 된다.

<a href="#" target="_blank">네이버로 가자</a> 

위의 줄 전체, 즉 오프닝 태그부터 클로징 태그까지, 다시 말해 <a>부터 </a>까지를 모두 일컬어 HTML 요소(element)라고 부른다. 그리고 파란색으로 색칠한 <a>와 </a>를 앞선 포스팅에서 설명한 것처럼 태그라고 부른다. 그리고 오프닝 태그의 안에 담겨있는 주황색, 저게 속성이다. 영어로는 attribute라고 한다. 그리고 = 뒤에 큰 따옴표 안에 지정되어 있는 것이 속성의 값, value라고 부른다. 위의 예시 같은 경우는 <a> 태그 안에 href 속성과 target 속성이 지정되어 있다.

태그의 종류에 따라서 어떤 속성은 필수적으로 지정되어야 하는 것들이 있다. 지정되어 있지 않다고 문법적으로 오류가 있는 것 같진 않지만 기능적으로 없으면 안 되는 경우. 이런 속성들은 emmet을 활용해 태그 자동완성을 이용해도 함께 완성된다. 그만큼 필수적이란 이야기. <a> 태그의 href 속성이나 <img> 태그의 src 속성이 대표적이다. 링크를 걸려면 '어디로' 이동할 것인지 'href'를 통해 지정해줘야 의미가 있다. 이미지 역시 그 이미지가 '어디에' 있는지 'src'를 통해 알려줘야 브라우저가 그 이미지를 찾아서 보여준다.

각각의 속성은 다양한 값들이 정해져있다. href 속성의 경우 사용자가 입력하는 모든 url이 그 값이 된다. 하지만 저 위에 있는 target의 경우 몇몇의 정해진 값이 있고, 그 값 중에서 골라야 한다. 그래서 속성을 제대로 사용하기 위해선 그 값을 모두 알고 있어야 한다. 하지만 우리에게 에디터가 있다. 속성의 값을 정확히 외울 필요없이, 어떤 속성이 어떤 기능을 하는지 정도만 알면 그 값을 에디터가 추천해주는 목록에서 고를 수 있다.

target 속성을 입력하면 다양한 값을 제안해준다.

그래도 어떤 태그가 어떤 속성을 가질 수 있고, 그 속성이 어떤 값을 가질 수 있는지에 대한 이해는 필요하다. <a>의 target 속성은 _blank, _parent, _self, _top 값을 가질 수 있다는 것을 모두 알고 정확한 스펠링과 각각의 기능을 암기할 필요없다는 얘기다. target이 무슨 기능인지 정도만 이해하고 대충 자주 쓰는 값이 뭔지, 어떤 기능인지 한 번 쯤 읽고 머릿속에 담아는 둬야한다. 그 정도만 해도 나중에 필요할 때 찾아서 쓸 수 있지만 아예 존재조차 모른다면 찾아 쓸 수도 없다.

참고로 속성에는 기본값이란 게 있다. 굳이 지정하지 않아도 기본 설정으로 되어있는 값. 속성이 정말 많긴 하지만 막상 쓰는 건 몇 개 안 되는 것 같다. 그럼 다음 포스팅에서는 실제 자주 쓰이는 태그와 그에 맞는 속성, 그리고 그냥 공통적으로 많이 쓰는 주요 속성들을 알아보겠다.