html의 class속성 ≠ 자바스크립트의 class
보면 사용되는 곳이 엄밀히 다른데, 명칭이 같아 헷갈리는 것들이 있다.
말 나온김에 몇 가지 정리해보자면,
| (html의) <a>태그 |
· anchor의 약자 · 링크 역할 |
| (css의) a |
· all의 약자 · 전부를 의미 · 태그 아님! |
| <style>태그 | · html내에서 태그로써 쓰임 · 예시 → <Style>a {color: green;}</Style> |
| style속성 | · 예시 → <a href="2.html" style="color:red">CSS</a> |
만약... 틀렸다면 추후 수정하는 것으로. 지식을 좀 더 쌓은 후에....
아무튼 class속성을 처음 접했을 땐, 자바스크립트의 class가 생각났음.
id, class속성 모두 html에서 먼저 지정시켜야 하는, html의 속성임에도,
css에서 정리하는 이유는 css에서야 두 속성이 빛을 발하기... 때문임.
id, class속성
▶id속성
| html에서 지정시킬 때 | id="속성값" |
| css(혹은 html의 <style>태그 내)에서 불러올 때 | #속성값 {} |
▶class속성
| html에서 지정시킬 때 | class="속성값" |
| css(혹은 html의 <style>태그 내)에서 불러올 때 | .속성값 {} |
▶정리해서 비교하면,
· html에서 지정시킨 속성값을 → css에서 가져오는 법
| id="속성값" | #속성값 {} |
| class="속성값" | .속성값 {} |
· id, class를 각자 어느 상황에서 쓰냐면,
| id | · id 하나 당, 하나의 정체성만을 가짐 (고유값) · 태그 하나 당 id속성 하나를 사용한다. 이미 한 번 적용시킨 id는 다른 태그에 또 사용할 수 없음. · 단, id에 부여시킨 속성값이 제각기 다르다면 하나의 태그에 여러 id가 올 수 있다. 중요한 건, 같은 속성값을 가진 id를 다른 태그에 중복해 사용할 수 없다는 것! |
| class | · 하나의 class를 여러 곳에 쓸 수 있음 (그룹화) · 여러 태그에 class속성을 중복해 사용할 수 있다. |
▶선택자 우선순위: id > class > 태그선택자
· 태그선택자 예시: a, h1 등
· 같은 유형의 선택자일 경우,
css에서 가장 마지막에 있는(가장 밑에 위치한) 선택자 일수록 → 우선순위가 높음
▶예시1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성01</title>
<Style>
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 100px;
text-align: center;
}
.test {
color: red;
}
</Style>
</head>
<body>
<h1><a href="index.html">NAME</a></h1>
<ol>
<li><a href="1.html" class="test">HONG</a></li>
<li><a href="2.html" class="test">GIL</a></li>
<li><a href="3.html">DONG</a></li>
</ol>
</body>
</html>
▶예시2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성02</title>
<Style>
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 100px;
text-align: center;
}
.test {
color: gray;
}
#test2 {
color: red
}
#test3 {
color:cornflowerblue
}
</Style>
</head>
<body>
<h1><a href="index.html">NAME</a></h1>
<ol>
<li><a href="1.html" class="test">HONG</a></li>
<li><a href="2.html" class="test" id="test2">GIL</a></li>
<li><a href="3.html" id="test3">DONG</a></li>
</ol>
</body>
</html>
+) html 내부 링크
WOW... 깜짝 놀랐다.
id 속성값(#속성값)을 불러올 수 있는 곳이 → css 뿐 만 아니라, html 내(<body>태그 내)에서도 사용 가능함.
예를 들어 <a>태그와 결합해 <body>태그 내에서 사용할 경우,
링크를 타고 html 내에서 이동하는(본문에서 본문으로 이동하는) 내부 링크가 가능하게 된다.
'1-2 css' 카테고리의 다른 글
| [css] <div>, <span>태그_레이아웃 설정하기 (0) | 2021.07.09 |
|---|---|
| [css] Block level element, Inline element_박스 기본 영역 (0) | 2021.07.08 |
| [css] 속성 간략하게 쓰기 (0) | 2021.07.05 |
| [css] 선택자(Selector), css의 속성(Property) (0) | 2021.06.25 |
| [css] html문서에서 css 연결하기 (0) | 2021.05.13 |