css 는 기본적으로
h1{
background-color:blue;
font-size:20px;
}
다음과 같은 방식으로 작성한다.
우선 태그를 지정하고(h1) 그 안에 속성들을 나열해 나가는 방식.
하지만 이러한 방식에는 단점이 있다. 바로 같은 태그를 가진 모든 요소들은 전부 같은 속성을 가지게 된다는 것이다.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<div>aa</div>
<div>aa</div>
<div>aa</div>
</body>
</html>
위 코드를 실행하게 되면 다음과 같은 화면이 나오게 된다.
그렇다면 저 3개의 <div></div> 블럭에서 가운데 <div>의 색만 파란색으로 만들려면 어떻게 해야 할까?
<id>
바로 "id"를 사용하면 된다.
id는 다음과 같은 방식으로 사용한다.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: red;
}
#center{
background-color: blue;
}
</style>
</head>
<body>
<div>aa</div>
<div id="center">aa</div>
<div>aa</div>
</body>
</html>우선 <tag> 안에 id를 지정해주고
#을 붙인 id 값에 속성을 넣어주면 된다.
이와같이 id를 이용하면 원하는 태그 안에 원하는 속성을 지정해 줄 수 있지만,
id의 "고유성"이라는 특성 때문에 우리가 원하는 집단에게 동시에 속성을 부여하는 것은 힘들다. (id 값은 유일해야 함)
<class>
이를 보완하기 위해서 class라는 개념이 등장한다. (c++에서의 class 와는 완전히 다른 개념)
우선 class 를 이용한 코드를 보자.
<!DOCTYPE html>
<html>
<head>
<style>
div{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div>aa</div>
<div class ="blue">aa</div>
<div class ="blue">aa</div>
</body>
</html>사용법은 id와 거의 같지만 class 이름 앞에 # 이 아닌 . 을 사용한다는 차이점이 있다.
다음과 같은 방법으로 원하는 집단에 동시다발적으로 원하는 속성들을 지정해 줄 수가 있다.
'웹 프로그래밍 > css' 카테고리의 다른 글
| selector, state (0) | 2023.09.02 |
|---|---|
| position: relative, absolute, fixed, static (0) | 2023.08.27 |
| margin, padding , border (0) | 2023.01.05 |
| 박스 display: (block , inline, inline-block) (0) | 2023.01.05 |
| html + css (css 를 html에 추가하는 방법) (0) | 2023.01.05 |
