728x90
반응형
SMALL
스타일 시트 기본 구조
선택자(Selector) { 속성(property) : 값(value); }
선택자 (Selector)
: HTML 문서에서 스타일을 정의할 대상을 의미한다.
하나 또는 그 이상의 선택자가 지정될 수 있다.
선택자 종류
1. 전체 선택자 (Universal Selector)
: 모든 요소를 선택하는 방법으로 '*' 을 선택자로 선언한다.
*{ 속성 : 값; }
<head>
<style>
*{font-size: 12px;}
</style>
</head>
2. 클래스 선택자
: HTML 요소의 class 속성 값을 참조하여 선택하는 방법이다.
여러개를 지정할 수 있고, '.'을 사용해서 클래스를 지정해준다.
.클래스이름{ 속성 : 값; }
<head>
<style>
.title{
color: blue;
font-size: 50px;}
</style>
</head>
<body>
<span class="title">title클래스</span><br/>
<span>클래스를 지정하지 않음</span>
</body>
비교를 위해서 두 개의 <span> 태그에 하나만 class 지정을 해 보았다.
<style> 안에 .title 로 클래스를 지정해줘서 스타일을 입혀주었다.
아래의 결과를 보면, 클래스를 지정해주지 않은 <span> 태그는 스타일 적용이 안된 것을 확인할 수 있다.
3. 아이디 선택자
: HTML 요소의 id 속성 값을 참조하여 선택하는 방법이다.
한 개만 지정할 수 있고, '#'를 사용해서 아이디를 지정해준다.
#아이디이름{ 속성: 값; }
<head>
<style>
#title{
color: pink;
font-size: 50px;
}
</style>
</head>
<body>
<span id="title">title 아이디</span><br/>
<span>아이디를 지정하지 않음</span>
</body>
위의 클래스와 동일하게 두 개의 <span> 중 한 개에만 id를 지정해주었다.
<style>에서 #title 로 아이디를 지정해주고, 스타일을 적용했다.
아래의 결과를 보면, id 를 지정해 준 <span> 태그만 스타일이 적용된 것을 확인 할 수 있다.
728x90
반응형
LIST
'Front-End > CSS 3' 카테고리의 다른 글
| [프론트엔드][CSS3] 6. color, background 관련 스타일 (0) | 2021.07.06 |
|---|---|
| [프론트엔드][CSS3] 5. text 관련 스타일 (0) | 2021.07.05 |
| [프론트엔드][CSS3] 4. font 관련 스타일 (0) | 2021.06.30 |
| [프론트엔드][CSS3] 3. 선택자 (2) (0) | 2021.06.30 |
| [프론트엔드][CSS3] 1. CSS소개, 스타일문법 (0) | 2021.06.30 |
