클래스 속성
<!DOCTYPE html>
<html>
<head>
<title>클래스</title>
<style>
.h1 {
color: red;
}
</style>
</head>
<body>
<h1 class="h1">클래스 사용하기</h1>
</body>
</html>class 속성은 종종 스타일 시트에서 클래스 이름을 가리키는 데 사용됩니다. JavaScript에서 특정 클래스 이름을 가진 요소에 액세스하고 조작하는 데에도 사용할 수 있습니다.
.class { //스타일부분 }클래스는 CSS에서 사용하기 위해서는 점( . )을 사용해야합니다.
<p class="class1 class2">p1</p>
<p class="class1">p2</p>그리고 클래스는 한 태그 안에 여러 클래스를 사용할 수 있습니다. 한 태그에 여러 클래스를 사용할 때는 한 칸 띄고 클래스명을 적으면됩니다. 또한 한 클래스가 여러 태그에서 사용될 수 있습니다.
ID 속성
<!DOCTYPE html>
<html>
<head>
<title>아이디</title>
<style>
#h1 {
color: red;
}
</style>
</head>
<body>
<h1 id="h1">아이디 사용하기</h1>
</body>
</html>HTML 요소에 대한 고유한 ID를 지정합니다.
id의 구문은 다음과 같습니다. 해시 문자(#)를 쓰고 그 뒤에 id 이름을 씁니다.
클래스와 ID의 차이
<!DOCTYPE html>
<html>
<head>
<title>아이디</title>
<style>
#h1 {
color: red;
}
.h2 {
color: blue;
}
</style>
</head>
<body>
<h1 id="h1">아이디 사용하기</h1>
<h2 class="h2">클래스 사용하기</h2>
<h3 class="h2">클래스 사용하기</h3>
</body>
</html>
클래스의 경우 여러 태그에 사용할 수 있지만 ID의 경우에는 한 태그에 하나만 사용해야합니다.
북마크(ID 앵커)
<!DOCTYPE html>
<html>
<head>
<title>아이디</title>
<style>
#h1 {
color: red;
}
.h2 {
color: blue;
}
</style>
</head>
<body>
<a href="#h1">h1으로 이동</a>
<h2 class="h2">클래스 사용하기</h2>
<h3 class="h2">클래스 사용하기</h3>
<h1 id="h1">아이디 사용하기</h1>
</body>
</html>HTML 북마크는 독자가 웹페이지의 특정 부분으로 이동할 수 있도록 하는 데 사용됩니다.
북마크를 사용하려면 먼저 북마크를 만든 다음, 북마크에 링크를 추가해야 합니다.
그런 다음, 링크를 클릭하면 페이지가 북마크가 있는 위치로 스크롤됩니다.
출처
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'Programming > HTML' 카테고리의 다른 글
| HTML 기본 소개 (0) | 2024.08.03 |
|---|
