반응형
클래스 지정자
태그 속성중 'class'를 명시한 태그에 대해 선택을 하기 위해서는 아래와 같이 '.' 기호를 사용해서 지정해 주면 된다
.클래스명 {css 규칙들}
예제 코드로 아래와 같이 작성할 수 있다. paragraph, bg라는 값의 클래스를 가진것에 대해 모두 적용되는것을 볼 수 있다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
font-style: italic;
}
.paragraph{
border: 1px solid #000;
}
.bg{
background-color: #ddd;
}
</style>
</head>
<body>
<div>
<h1 class="paragraph bg">What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<span class="paragraph">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></p>
</div>
</body>
</html>id 지정자
id를 지정하기 위해서는 '#'기호를 이용해서 지정해 주면 된다.
#아이디명 {css규칙들}
예제 코드는 아래와 같이 작성할 수 있다. 'container'라는 id값을 가진 div 태그에 적용되는것을 볼 수 있다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
p{
font-style: italic;
}
.paragraph{
border: 1px solid #000;
}
.bg{
background-color: #ddd;
}
#container{
width: 500px;
margin: 10px auto;/* 중앙배치 */
padding: 10px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<h1 class="paragraph bg">What is Lorem Ipsum?</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<span class="paragraph">Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span></p>
</div>
</body>
</html>차이점
이 두가지의 가장 큰 차이점은, 클래스 선택자는 문서에 여러번 적용할 수 있는 반면, id 선택자는 문서에 한번만 적용이 가능하다. 이는 당연한 이유는 id는 중복적인 정의가 불가능하기 때문이다.
반응형
'Web Basic > HTML' 카테고리의 다른 글
| CSS 몇가지 text 관련 style 속성들 알아보기 (0) | 2022.03.10 |
|---|---|
| HTML form : placeholder / readonly / autofocus (0) | 2022.03.08 |
| HTML form type - radio / type - checkbox (0) | 2022.03.08 |
| <map>태그와 <area>태그 (0) | 2019.02.17 |
| HTML 앵커(Anchor)기능 (0) | 2019.02.16 |
