이번 포스팅에서는 HTML의 모든 태그에서 사용 가능한 속성인 전역 속성에 대해 정리해봤습니다.
저번 포스팅에서 다뤘던 HTML의 이미지 태그와 컨테이너 태그에 대해 궁금하신 분은 아래를 읽어보시면 좋습니다!
HTML 기초 4편 - 이미지 태그와 컨테이너 태그
이번 포스팅에서는 HTML에서 사용되는 이미지 태그와 컨테이너 태그에 대해 정리해봤습니다. 저번 포스팅에서 다뤘던 HTML의 블록 요소와 인라인 요소로 구분되는 태그에 대해 궁금하신 분은 아
mlngwandev.tistory.com
전역 속성
- 모든 HTML 태그에서 공통으로 사용할 수 있는 속성이다.
- 태그의 부가적인 기능을 정의하는 것으로 선택 사항이다.
- 시작 태그 내부에 정의하며 개수에 특별한 제한은 없다.
속성
앞서 이미지 태그에서 살펴보았던 src, alt, width, height 도 속성이다.
하지만 위와 같은 속성들은 일부 태그에서만 사용 가능하다.
전역 속성은 어떤 태그인지 관계없이 모두 적용 가능한 속성이다!
속성의 기본 구조
<태그명 속성명 1 = "속성값 1" 속성명 2 ="속성값 2"...> 콘텐츠 </태그명>
위와 같이 속성은 시작 태그 내부에 정의하며, 개수 제한이 없다!
종류
주로 사용되는 전역 속성들에 대해 설명하려 한다.
id
- 고유한 이름을 부여하는 식별자 역할 속성이다.
- 태그당 하나씩만 지정 가능하다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div id="first"><p>This is First div</p></div>
<div id="second"><p>This is Second div</p></div>
</body>
</html>
결과
위와 같이 두개가 같은 div 이지만 하나는 first라는 id (이름)을 가진 div이고 나머지 하나는 second라는 id (이름)을 가진 div가 생성됨을 확인 가능하다.
class
- 그룹별로 묶을 수 있는 식별자 역할 속성이다.
- 다중 지정과 중복이 가능하다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div class="first"><p>This is First div</p></div>
<div class="first"><p>This is Second div</p></div>
</body>
</html>
결과
위와 같이 두 개가 같은 div이고 같은 first라는 class (성격)를 가진 div임을 확인 가능하다.
하나의 class 설정으로 두 개의 div의 class (성격)를 동시에 설정이 가능하다.
style
- 적용할 css 스타일을 선언하는 속성이다.
- 따로 css 파일 없이 기본적인 style을 html에서 설정할수 있다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div style="color: blueviolet">style test 1</div>
<div style="text-decoration: underline">style test 2</div>
</body>
</html>
결과
위와 같이 두 개의 div에 서로 다른 style이 적용되어 있음을 확인 가능하다.
하나의 요소에 여러 style 적용
하나의 요소에 여러 style을 적용시키고 싶다면 style명1 : style값2; style명2 : style값2... 와 같이 동시 적용이 가능하다!
예시로 위의 두개의 div style을 합친다고 하면 아래와 같다.
<div style = "color : blueviolet; text-decoration : underline"> 내용 </div>
title
- 추가 정보를 제공하는 텍스트 속성이다.
- 사용자에게 툴팁을 제공하는 역할을 한다.
사용 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div title="This is a title">title test</div>
</body>
</html>
결과
위와 같이 마우스 커서를 해당 요소에 올렸을때 title로 입력한 내용이 출력됨을 확인 가능하다.
그 외의 전역 속성들...
위에 있는 전역 속성들 외에도 다른 전역 속성들이 존재한다.
모든 전역 속성들을 외우는 것은 불가능하므로 아래에서 찾아볼 수 있다.
전역 특성 - HTML: Hypertext Markup Language | MDN
전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.
developer.mozilla.org
HTML의 모든 태그에서 사용 가능한 전역 속성들에 대해 알아보았습니다.
다음 편에서는 링크 태그와 목록 태그에 대해 알아보겠습니다.
'Frontend > HTML' 카테고리의 다른 글
| HTML 기초 7편 - input (입력요소) 태그 (0) | 2023.07.10 |
|---|---|
| HTML 기초 6편 - 링크 태그(a 태그)와 목록 태그 (0) | 2023.07.09 |
| HTML 기초 4편 - 이미지 태그와 컨테이너 태그 (0) | 2023.07.07 |
| HTML 기초 3편 - 블록 요소 / 인라인 요소로 구분되는 태그 (0) | 2023.07.06 |
| HTML 기초 2편 - 텍스트 태그 (0) | 2023.07.03 |
