css

CSS 선택자

하이자바 2024. 6. 11. 11:54

선택자는 html의 요소를 선택하는 코드이다.

예시로는

* {} body{} 등 이 있다.

 

여기서 중요한 것은 class, id, 속성 선택자이다.

만약 div의 백그라운드 컬러를 모두 red로 하고 싶다고 하자면 각 div마다 color red를 부여하는 것보다

하나의 클래스를 둬 공통적인 속성들을 넣으면 더 쉽게 코드를 작성할 수 있다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .divTag{
        background-color: red;
    }
</style>
<body>
<div class="divTag"></div>
<div class="divTag"></div>
<div class="divTag"></div>
<div class="divTag"></div>
<div class="divTag"></div>
<div class="divTag"></div>

</body>
</html>

 다음의 예시를 통해 같은 클래스들은 공통된 백그라운드 컬러를 가질 수 있다.

id 또한 class대신 id 키워드를 통해 만들 수 있으나 style에선 #을 이용해 사용할 수 있다.

그리고 중복 사용이 불가하다.

'css' 카테고리의 다른 글

text 속성  (0) 2024.06.11