클래스 지정하기
클래스는 보통 효과를 따로 주고싶을 때 사용한다
<style>
.first {
text-align: center;
font-size: 20px;
color: gray;
}
</style>
<p class="first"> 클래스 사용하기 </p> /*클래스 이름은 first*/
class = "클래스 이름" 을 입력하고 <style>태그 안에 효과를 적어주면 된다.
<style>에 적용할땐 .클래스 이름을 입력한다.
두 개의 클래스 사용하기
<style>
.first {
text-align: center;
font-size: 20px;
color: gray;
}
.second {
margin-top: 3%
}
</style>
<p class="first second"> 클래스 사용하기 </p> 두 개의 클래스를 사용하고 싶다면 class=" 클래스 이름명1 클래스 이름명2" 처럼 띄어쓰기만 하고 적어주면 된다
아이디(id) 사용하기
클래스는 . 을 쓰지만 아이디는 #을 적는다.
<style>
#first {
font-align: center;
pont-size: 20px;
}
</style>
<p id="first" > 아이디를 배워보자 <p>
이렇게만 보면 .과 #의 차이빼고는 비슷해보이지만 클래스는 중복이 가능하고 아이디는 중복이 불가능하다는 차이점이 있다.
클래스는 여러 태그에 붙여서 연관성과 통일성을 부여할 때 활용할 수 있고
아이디는 하나의 태그에만 붙여서 고유성을 줄 수 있다.
예시
<!DOCTYPE html>
<html>
<head>
<title> 1</title>
<meta charset="utf-8">
<style>
#id {
text-align: center;
font-size: 25px;
color: gray;
}
.class_1 {
text-align: center;
font-size: 15px;
}
</style>
</head>
<body>
<h1 id="id"> class와 id </h1>
<p class="class_1">class: 여러개를 묶어서 효과지정이 가능하다. </p>
<p class="class_1">id: 하나만 가능하다. 대신 고유성을 줄 수 있다.</p>
</body>
</html>
class와 id를 사용하여 만든 웹사이트다. id는 h1에 사용했기 때문에 다른 태그에는 사용이 불가하고 class는 자유롭게 여러 태그에 사용가능하다.
위의 코드를 통해 만들어진 웹사이트
'프론트엔드 > HTML CSS' 카테고리의 다른 글
| 인턴 교육 시작 + <fieldset> , <table> 태그 정리 (0) | 2022.08.30 |
|---|---|
| css 기초 개념 정리 (0) | 2022.05.30 |
| [HTML/CSS] CSS 파일을 적용하는 방법 (3) | 2021.06.12 |
| [HTML/CSS] 기초 개념 ② 링크 넣는법 <a> , 이미지 넣고 가운데 정렬.. (1) | 2021.06.02 |
| [HTML/CSS] 기초 개념 ① <b>,<i> , 주석 ... (1) | 2021.05.31 |