티스토리 뷰

HTML & CSS

[HTML & CSS] CSS Class Selectors

Dongi 2021. 12. 6. 15:31

안녕하세요 동기 여러분! 오늘은 CSS Class Selector에 대해 알아봅시다!

 

CSS Class Selectors

지금까지는 HTML의 요소를 CSS파일에서 설정을 하였습니다.

하지만 h1, h2, p , a, body 등등 무수히 많은 HTML 요소들 말고도 다른 방법으로 지정해 주는 방법이 있습니다.

 

아래의 코드를 한번 보겠습니다.

<div class="emphasis">
  <h2>회사가 가기 싫은 나</h2>
  <p>회사에서 조금 큰 사고를 친적이 있는데 그 다음날 출근을 하려니까 너무나도 가기가 싫었다.<br>
  혼나는것도 두렵고 내 자신이 한심스럽기도하고 짜증이랑 짜증은 대폭발 일보직전이라 아무것도 하기가 싫었다.<br>
  그러다가 세상에서 가장 오래 사귄 나의 FireEgg 친구에게 연락을 해서 이런일이 있는데 어떻게 해야할까 물어보니<br>
  내 친구의 아주 현명하고 간결한 한마디<br>
  "그냥 가 븅신아"<br>
  그래서 그냥 갔더니 별일 없이 지나갔다ㅋㅋㅋ</p>
</div>

 

여태 우리가 배운 방법으로 하면 CSS 코드를 아래와 같이 짜서 넣어야 하지만

h2 {
  font-size: 32px;
  font-family: "서울남산 장체EB", serif;
  color: #fffb00;
}

p {
  font-size: 32px;
  font-family: "서울남산 장체EB", serif;
  color: #fffb00;
}

 

CSS Class Selector와 함께 한다면 

.emphasis {
  font-size: 32px;
  font-family: "서울남산 장체EB", serif;
  color: #fffb00
}

이 코드 한방으로 다 바꾸어 줄 수 있다.

 

  • <div class="emphasis"> 태그가 부모 태그로 자식인 <h2>와 <p> 데리고 있기 때문에 한방에 바뀐다.
  • 점을 하나 찍고 클래스 명을 적어주고 중괄호 안에 세부 설정을 해주면 완성이다.  -> .emphasis { 폰트나 폰트 사이즈 등등 }
  • 또 다른 장점으론 미세 컨트롤이 가능하다. 만약 h2에 관한 CSS 설정을 해주면 그 웹페이지에 있는 h2는 모두 통일 된 설정값을 가지게 되는데 CSS Class Selector와 함께 하면 h2 각각의 설정을 다르게 줄 수 있는 것이다.

 

한번 실행해보자

노란색이 너무 눈이 부셔 색을 약간 조정하였다.

 

HTML 코드

<!DOCTYPE html>
<html>
<head>
	<title>덩기덕 쿵더러러</title>
	<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
	<div class="emphasis">
		<h2>회사가 가기 싫은 나</h2>
		<p>회사에서 조금 큰 사고를 친적이 있는데 그 다음날 출근을 하려니까 너무나도 가기가 싫었다.<br>
		혼나는것도 두렵고 내 자신이 한심스럽기도하고 짜증이랑 짜증은 대폭발 일보직전이라 아무것도 하기가 싫었다.<br>
		그러다가 세상에서 가장 오래 사귄 나의 FireEgg 친구에게 연락을 해서 이런일이 있는데 어떻게 해야할까 물어보니<br>
		내 친구의 아주 현명하고 간결한 한마디<br>
		"그냥 가 븅신아"<br>
		그래서 그냥 갔더니 별일 없이 지나갔다ㅋㅋㅋ</p>
	  </div>
</body>
</html>

 

 

 

CSS 코드

.emphasis {
  font-size: 32px;
  font-family: "서울남산 장체EB", serif;
  color: #4e4a11;
}

 

 

실행 화면

 

 

오늘의 느낌

운동을 하러 갈 때도 마찬가지로 생각한다. 그냥 가, 가면 뭔가 일어나겠지ㅋㅋㅋ

'HTML & CSS' 카테고리의 다른 글

[HTML & CSS] A Background Image  (0) 2021.12.08
[HTML & CSS] font-size (2021 - 12- 23 수정)  (0) 2021.12.07
[HTML & CSS] color  (0) 2021.12.06
[HTML & CSS] font-family  (0) 2021.12.05
[HTML & CSS] Anatomy of a CSS Rule  (0) 2021.12.05
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함