[프론트엔드][CSS3] 2. 선택자 (1)

Front-End/CSS 3

[프론트엔드][CSS3] 2. 선택자 (1)

nanee_ 2021. 6. 30. 20:41

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 지정을 해 보았다.

아래의 결과를 보면, 클래스를 지정해주지 않은 <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를 지정해주었다.

아래의 결과를 보면, id 를 지정해 준 <span> 태그만 스타일이 적용된 것을 확인 할 수 있다.

728x90

LIST