HTML
[HTML] CSS 링크 거는법, # . 태그 이용법, class와 id 차이점
ChrisJang
2020. 11. 6. 17:53
- Tag에 링크 걸기 => Tag명만 입력
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
background-color: red;
}
</style>
</head>
<body>
<h1>how to link at Object, h1 tag </h1>
<p>p tag</p>
</body>
</html>: 특정 Tag에 css에서 link를 걸어주고 싶을때는 해당 tag명(h1)을 입력한다.
- Class에 링크 걸기 => " . " 사용
<!DOCTYPE html>
<html>
<head>
<style>
.TagAtclass
{
background-color: red;
}
</style>
</head>
<body>
<h1 class="TagAtclass">first</h1>
<h1>second</h1>
<h1 class="TagAtclasse">third</h1>
</body>
</html>: tag에 링크를 걸어서 css를 바꿔주면 중복이 생기기 때문에 특정 class명을 사용하여 구분해주어야 한다.
=> tag에 class명을 부여하여 css파일에서 .classname{ } 으로 접근한다
- ID에 링크 걸기 => "# " 사용
<!DOCTYPE html>
<html>
<head>
<style>
#usingId
{
background-color: red;
}
</style>
</head>
<body>
<h1 id="usingId">first<h1>
<h1>second</h1>
<h1>third</h1>
</body>
</html>: ID는 거의 Class와 같은 기능입니다. 특정 태그를 선정한 후 디자인을 다루기 위해 사용합니다
=> tag에 id명을 부여하여 css파일에서 .idname{ } 으로 접근한다
- class 와 id의 차이점
: class의 경우 동일한 class명을 부여할 수 있지만 그에 반면 id는 중복을 허락하지 않습니다.