class : 일종의 이름. 스타일 부여. 여러 요소에 같은 스타일을 입힐 수 있는 방법
가령 일정 문단만 스타일을 바꾸고 싶다면 그 문단에 클래스를 지정하면 됨
style 안에서는 .클래스이름 을 통해 선언 가능
코드:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<style>
.important{
font-size: 32px;
color: blue;
}
</style>
<p class="important"> Don’t get me wrong; I do believe that engineering and programming are important skills.</p>
<p> Only in the right context, and only for the type of person willing to put in the necessary blood, sweat and tears to succeed. The same could be
said of many other skills. I would no more urge everyone to learn to program than I would urge everyone to learn to
plumb. </p>
|
cs |
결과:
class를 따로 지정하고 style을 바꿔주면 됨
class를 여러개 지정하고싶으면
<p class="important centered-text"> 처럼 띄어쓰기 한 칸 하고 새로운 클래스를 뒤에 적으면 됨
id : class랑 비슷.
id를 지정해준 다음에 style에서 #id이름 을 통해 설정 가능
코드:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<style>
#main{
text-align: center;
}
</style>
<body>
<h1>My First Page</h1>
<h2 id="main">I love HTML</h2>
</body>
|
cs |
결과:
class와 id의 차이점
class는 중복해서 여러 요소에 입힐 수 있음(여러 문단이 class="important" 가능)
id는 유니크한거라 하나에만 사용 가능(단 하나의 문단만 id="important") 가능)
하나의 요소에 여러 class 지정 가능(< p class="important centered-text"> 가능)
하나의 요소에 단 하나의 아이디만 가능(< p id="important centered-text"> 불가능)
결론:
여러 요소를 스타일링 할 때는 class
한 요소만 스타일링 하고 싶으면 id
'JavaScript' 카테고리의 다른 글
| div와 span (0) | 2021.06.22 |
|---|---|
| 텍스트 스타일링하기 (0) | 2021.06.20 |
| 링크, 이미지 넣기 (0) | 2021.06.19 |
| 기본 CSS 스타일 (0) | 2021.06.19 |
| HTML 기본 (0) | 2021.06.19 |
