태그의 관계와 속성

태그(tag)

---

1. <열린 태그>, <닫힌 태그/>

<div>내용</div>

태그는 기본적으로 열린 태그와 닫힌 태그 한 쌍으로 이루어져 있다.

<meta />
<img scr="#" alt="#" />

닫힌 태그가 없는 '빈 태그'(Empty tag)도 존재하며, 이 경우 태그 내부 마지막에 슬래시(/)를 꼭 써서 혹여나 발생할 오류를 방지하는게 좋다.

2. 부모, 자식, 형제, 상위, 하위 요소관계

<div>
  <span>
    <p></p>
    <h1></h1>
  </span>
</div>

• 부모-자식 관계 : div - span 처럼 외부에서 감싸고 있는 태그를 부모태그, 감싸져 있는 태그를 자식태그 라고 한다.

• 형제 관계 : p - h1 처럼 부모가 같으면서 동등한 위치에 있는 태그들은 형제태그 관계이다.

• 상위(선조)-하위(후손) 관계 : div - p 처럼 부모-자식 관계를 포함해 더 많은 단계로 감싸져 있는 관계이다.

속성(attribute)

---

<input type="text">

태그의 기능을 확장해서 쓰고싶다면 속성을 사용하면 된다.

• 속성(attribute) : 위 코드에서 type 부분. 기능의 유형을 나타냄.

• 값(value) : 위 코드에서 "text" 부분. 속성의 이름이나 유효한 값을 할당함.

전역 속성

모든 태그에 사용할 수 있는 속성을 '전역 속성' 이라고 한다.

<div title="제목"></div>
<div style="width: 100px"></div>
<div class="클래스명"></div>
<div id="id명"></div>
<div data-이름="데이터"></div>

• title : 요소에 대한 설명(브라우저에서 마우스를 올리면 나타남)

• style : 요소의 스타일을 직접 입력

• class : 요소를 지칭하는 이름 (중복 가능)

• id : 요스를 지칭하는 '고유한' 이름 (중복 불가능)

• data : 요소에 데이터를 저장함. 주로 Javascript에서 사용