태그의 분류 및 속성

별초롱언니 2025. 3. 4. 20:56

▣ 미리 정의되어 있는 태그

· 사용자가 변경할 수 없으며 사용 용도에 맞게 사용

▣ 사용자가 직접 정의하여 사용하는 태그

· 사용자가 태그를 직접 설계하고 HTML 문서에 포함하여 작성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>미리 정의된 태그</title>
</head>
<body>
  <h1>문서의 제목</h1>
  <hr>문서의 구분선</hr>
  <p>단락 구분</p>
  <strong>중요한 문장</strong>
  <br> 줄 바꿈
</body>
</html>

▣ 사용자 정의 태그 작성 시 유의점

· 일반적인 의미로 해석할 수 있도록 포함 관계 설정

· 동등 관계로도 설정 가능

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>사용자 정의 태그</title>
</head>
<body>
  <company>한빛아카데미
    <department>영업부</department>
    <department>편집부
      <team>그래픽팀</team>
    </department>
  </company>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>사용자 정의 태그</title>
</head>
<body>
  
  <company>한빛아카데미
    <department>영업부</department>
    <department>편집부
      <team>그래픽팀</team>
    </department>
  </company>

  <p></p>

  <university>한국대학교
    <major>컴퓨터학교</major>
    <major>경영정보학</major>
  </university>

</body>
</html>

▣ 속성

· 태그의 종속적인 정보를 표현하기 위해 사용

· 태그없이 단독으로 사용할 수 없음

· 속성 = "값" 형태로 작성

<시작 태그 속성 = "값"> 내용 </종료 태그>

▣ 글로벌 속성

· 모든 태그에 공통적으로 사용 가능한 속성

속성	설명
accesskey = "단축키"	공백으로 구분하여 여러 개의 단축키를 지정할 수 있다. 단축키를 작성한 순서대로 순위가 매겨지기 때문에 제일 처음 작성한 단축키가 적용된다.
class = "클래스명"	공백으로 구분하여 여러 개의 클래스명을 지정할 수 있다. 클래스 속성은 동일한 문서 안에 있는 여러 개의 태그에 동일한 이름으로 지정할 수 있다. 스타일 시트를 적용할 경우에는 셀렉터로도 이용 가능하다.
contrteditable = "편집할 수 있는지 없는지"	편집할 수 있는 경우에는 true로 지정하고 빈 문자(" ")이거나 편집할 수 없는 경우에는 false로 지정한다
contextmenu = "menu 요소의 id 속성값"	메뉴 요소의 id 속성값을 지정한다.
dir = "텍스트 표시 방향"	왼쪽에서 오른쪽인 경우에는 itr, 오른쪽에서 왼쪽인 경우에는 rti로 지정한다.
draggable="드래그 할 수 있는지 없는지"	드래그 할 수 있는 경우에는 true, 드래그 할 수 없는 경우에는 false로 지정한다.
dropzone=''드롭한 아이템 처리 방법"	값을 copy로 지정하면 드래그한 데이터가 이 장소에 복사되고, move로 지정하면 드래그한 데이터가 이동한다. 또한 link라고 지정하면 오리지널 데이터와 드롭된 곳 사이에 어떤 연결이 만들어진다.
hidden="hidden"	이 속성이 지정된 요소는 브라우저에 표시되지 않는다. <p hidden> 또는 <p hidden="hidden">과 같이 지정할 수 있다.
id="이름"	문서 내에서 해당 태그를 유일하게 식별하는 역할을 한다. 동일한 문서 내에서 동일한 이름을 중복하여 사용할 수 없다.
lang="언어 코드"	한국어는 ko, 영어는 en, 미국 영어는 en-US, 프랑스어는 fr, 일본어는 ja 등 언어의 속성값을 지정한다.
spellcheck="철자 체크를 할 것인지 말 것인지"	철자 체크를 할 것인지 말 것인지 지정한다.
style="CSS선언"	세미콜론으로 구분하면 여러 개의 CSS 선언을 지정할 수 있다.
tabindex="이동 순서"	실제로 Tab키를 이용하는지 아닌지는 환경에 따라 다르다. 값에는 정수를 지정하며, 값이 작은 것에서 큰 것으로 이동된다. 값이 0으로 지정된 요소와 tabindex 속성이 지정되어 있지 않은 요소는 1 이상의 값이 지정되어 있는 요소 다음으로 포커스가 이동된다. 또한 마이너스 값을 지정한 경우, 포커스는 가능하지만 Tab키에 의한 이동 대상은 되지 않는다.

▣ 미리 정의된 속성

· 특정 태그에만 사용할 수 있도록 미리 정의된 속성

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>속성 사용</title>
</head>
<body>

  <h1>미리 정의된 속성을 사용한 사례</h1>
  <img src="dog.jpg" border="1" width="200px" height="230px" alt="Welcome" title="너무기여어">
  <a href="#" target="_blank" title="클릭하세요!">저자 카페 방문</a>
  
</body>
</html>

▣ 사용자 정의 태그에 속성 추가 시 고려할 점

· 태그와 의미적으로 연관성이 있거나 부가적인 정보를 제공하는 속성인지 확인

· 태그 없이 단독으로 사용할 수 없기 때문에 태그와 관계가 있는지 확인

· 속성값은 대부분 한 가지 값으로 표현하는 것이 일반적

· 데이터 값의 단위가 여러 개일 경우 속성보다는 태그로 정의

· 속성값이 게속 변경되는 경우라면 속성보다는 태그로 정의

· 속성값은 웹 브라우저에 직접적으로 출력되지 않으므로 직접 출력되어야 하는 경우에는 태그로 정의

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>사용자 정의 요소</title>
</head>
<body>
  <company location="서울">한빛아카데미<br>
    <department title="영업부 멤버보기">
      <a href="#mem1">영업부</a>
    </department><br>
    <department title="편집부 멤버보기">
      <a href="#mem2">편집부</a>
    </department>
  </company>
  <p>-</p><p>-</p>
  <p>-</p><p>-</p>
  <p>-</p><p>-</p>
  <staff id="mem1">영업부 멤버 이름
    <hr/>
    <member position="과장">박지혜</member>
    <member>홍민성</member>
    <member hidden="hidden">최미래</member>
  </staff>
  <hr/>
  <p>-</p><p>-</p>
  <p>-</p><p>-</p>
  <p>-</p><p>-</p>
  <staff id="mem2">편집부 멤버 이름
    <hr/>
    <member position="부장">김서울</member>
    <member hidden="hidden">나하늘</member>
    <member>홍현성</member>
  </staff>
  <hr/>
</body>
</html>