속성
속성 (Attribute)
속성은 내용에 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용한다. 특히 id와 class 속성은 스타일에 관련된 내용이나 기타 연산등의 내용을 위해 해당 태그를 찾을 수 있는 구분점 역할을 수행한다.
속성의 종류
HTML의 속성은 다양하지만 그 중 가장 많이 사용되는 속성은 아래와 같다.
| style | <h1>, <div> 태그 등등 태그와 함께 사용되는 인라인 스타일이다. |
| id | JS나 CSS에서 특정 값을 선택할 때 사용된다. |
| class | 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 사용한다. |
속성 사용 시 주의사항
- 태그 이름 다음에 오는 속성은 태그 이름과 속성 사이에 공백이 있어야 하고, 여러 속성이 있을 경우에는 공백을 넣어서 구분한다.
- 속성 이름 다음에는 등호(=)를 작성한다.
- 속성 값은 따움표안에 작성한다. (생략 가능하지만 여러 값을 작성할 수도 있기 때문에 꼭 붙여준다)
예시)
<p id="p1" class="p-group"> You are pretty </p> <!-- id값이 p1이고, class값이 p-group -->
속성 사용 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p 태그</title>
</head>
<body>
<p style="color: green" id="main-title">
You are <strong style="color: red">much</strong> better
</p>
<!-- I love you를 다른 색으로 변경하고, love는 또 다른 색으로 변경하기 -->
<p style="color: fuchsia" class="subtitle">
I <strong style="color: red">love</strong> you
</p>
</body>
</html>
'프론트엔드' 카테고리의 다른 글
| HTML 이미지 태그 (0) | 2024.01.17 |
|---|---|
| HTML 링크 태그 (0) | 2024.01.17 |
| HTML 리스트 (0) | 2024.01.17 |
| HTML 기본 형태 및 서식 태그 (0) | 2024.01.12 |
| 웹 개발을 배우기 전에 알면 좋은 용어! (0) | 2024.01.12 |
