웹페이지에서 두 사진의 배경색깔은 파랑색이다.
만약 내가 하나의 이미지를 코드에 첨부한다고 해도,
배경색깔은 파랑색으로 자동 적용된다.
외부 CSS(link코드)를 이용하여 전체 웹페이지에 CSS코드가 적용되도록 링크를 만들었기 때문이다.
practice.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>🍎practice</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<img src="ann-modified.png" alt="anne">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/samsung/320/red-apple_1f34e.png" alt="red apple">
</body>
</html>styles.css
img {
background-color: blue;
}
하지만,
매 사진마다 다른 배경색깔을 적용하고 싶을 수 있다.
즉 각각의 HTML 요소마다 다른 CSS를 적용하는 것이다.
이럴 땐 어떻게 하면 될까?
바로 클래스 선택자 class selector를 이용하면 된다.
먼저 html파일의 이미지 태그에서 클래스 class속성을 추가해서,
각각의 요소를 분류한다.
<img class="anne" src="ann-modified.png" alt="anne">
<img class="apple" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/samsung/320/red-apple_1f34e.png" alt="red apple">
한편,
이제까지 외부 CSS를 만들고 선택자 Selector를 쓸 때,
body, img, h1 등의 태그를 적었었다.
img {
background-color: blue;
}
하지만 이번에는 각 요소마다 개별 CSS를 적용하기 위해
클래스 선택자 Class selector를 쓴다.
클래스 선택자를 사용하는 방법은 아래와 같다.
. + 클래스 이름
.anne {
background-color: red;
}
.apple {
background-color: blue;
}
'HTML & CSS' 카테고리의 다른 글
| [47-8 HTML] 수도 클래스, 의사 클래스, pseudo class, :hover (0) | 2022.10.12 |
|---|---|
| [43-7 HTML] id Selector, 아이디 선택자, 클래스 선택자, 클래스 선택자와의 차이, 우선순위 (0) | 2022.10.12 |
| emojipedia 이모지피디아, 이모티콘, 무료 이모지, 그림 (0) | 2022.10.12 |
| [43-5 HTML] CSS syntax, selector, property, value, 선택자, 속성, 값 (0) | 2022.10.12 |
| [43-4 HTML] CSS 코드 디버깅 방법, 크롬 개발자 도구, 우선순위 (0) | 2022.10.11 |