선택자_CSS

<style>
	.text-lg{font-size:50px;}
	.text-red{color:red;}
</style>
<div class="text-lg text-red">안녕하세요.</div>
<span class="text-red">한국스마트정보교육원입니다.</span>
<div class="text-lg">ksmart.or.kr</div>

목차

1.태그명

2.Id

3.Class

4.속성명_속성명과 속성값

5.상하관계 표현

6.And 조건

7.OR 조건

8.복합활용 예시

 

 

- html 요소를 선택자로 선택하여 style을 적용할 수 있다.

태그명

- 선택자에 명시된 태그명과 일치하는 모든 요소를 선택

- 예 ) input { color : blue; } -> 모든 input 태그에 텍스트요소 color blue 로 적용

아이디

- 선택자에 명시된 아이디명과 html 요소의 아이디 속성의 값과 일치하는 요소 선택

- html 요소의 아이디 속성값은 유일값을 가져야 한다.

-예 ) #my-div { color : blue; } -> id=" my-div " 라는 속성을 가진 대상에 텍스트 요소 색상

- 아이디의 값은 중복으로 적용하면 안된다.

- 잘못된 예 )

<input type="text" id="my-type"> <input type="text" id="my-type">

-모든 html 요소는 id 속성을 가질 수 있다.

-적용 예 )

<style>
	#my-div{color:blue;}
</style>
<h4>적용 예</h4>
<div id="my-div">안녕하세요</div>
<div>한국스마트정보교육원입니다.</div>

Class

- 선택자에 명시된 클래스 명과 html 요소의클래스 값이 같은 모든 대상을 선택하여 style 적용

- html 요소의 클래스 속성에 여러개의 클래스값 지정 가능

- 클래스는 html 요소들을 그룹핑 할 때 쓰인다.

- 모든 html 요소는 클래스 속성을 가질 수 있다.

예 ) .my-class { color : red; } -> class = " my - class .... " html 요소들 중 선택자에 명시된 클래스를

포함하고 있는 대상을 전체 선택하여 텍스트 요소 color 를 red 색상으로 적용

<style>
	.text-lg{font-size:50px;}
	.text-red{color:red;}
</style>
<div class="text-lg text-red">안녕하세요.</div>
<span class="text-red">한국스마트정보교육원입니다.</span>
<div class="text-lg">ksmart.or.kr</div>

적용 예)

 

속성명_속성명과 속성값

- 선택자에 명시된 속성명과 혹은 속성명과 속성값과 html 요소의 속성명 혹은 속성명과 속성값이 같은 모든 대상을 선택하여 style 적용

예 ) 속성명 : [ type ] { color : blue; } -> 모든 html 요소 중 type 이라는 속성의 요소를 선택하여 텍스트 요소를 blue로 적용

예 ) 속성명과 속성값 : [ type = text ] { color : blue; } -> 모든 html 요소 중 type 속성에 text 값을 가진 요소를 선택하여 텍스트 요소

blue로 적용

적용 예 )

<style>
	[type]{color:red;}
	[type=text]{font-size:30px;}
</style>
<input type="text">
<input type="number">
<input type="date">

​상하관계 표현

- html 요소의 상하관계를 표현하는 방식으로 html 요소 선택

- 선택지에 공백과 함께 열거하여 상하관계 표현

예 ) #my - group .text - red { color : blue; }

-> html 요소 중 아이디 속성에 my - group 값을 가진 대상의 하위 요소 class 의 속성 text - red값을 포함한 대상 선택하여

텍스트 요소 blue로 적용

적용 예 )

<style>
	li .my-text-group{color:green;}	
</style>
<ul>
	<li><span class="my-text-group">안녕</span></li>
	<li>하세요</li>
</ul>

And 조건

- 선택자를 공백없이 붙여서 쓸 경우, 모든 조건에 해당되는 html 요소 선택

예 ) #my - group.my-text { color : red; } -> html 요소 중 아이디 속성 값이 my - group이며,

클래스 속성 값이 my- text값을 포함하고 있는 대상을 선택하여 텍스트 요소 색상 red 로 적용

적용 예 )

<style>
	input[name=userName]{font-size:20px;color:green;}
</style>
	<input type="text" name="userName">

OR 조건

- 선택자를 쉼표를 붙여서 열거 할 경우 열거된 모든 HTML 요소를 선택

예 ) .user-group, .user-list { color : red; }

-> html 요소 중 클래스 속성 값 .user-group 과 .user-list 를 포함하고 있는 html 요소를 선택하여 텍스트 요소 색상 red로 적용

적용 예 )

<style>
	.user-list01, .user-list02{color:red;}
</style>
<ul>
	<li class="user-list01">홍길동</li>
	<li>이순신</li>
	<li class="user-list02">유관순</li>
</ul>

복합 활용 예시

<style>
	.bbs-list{padding:0;}
	.bbs-list{color:#999;font-size:13px}
	#notice .notice{font-weight:bold;}
</style>
<div id="notice">
	<ul class="bbs-list">
		<li class="notice">공지사항1</li>
		<li>공지사항2</li>
		<li>공지사항3</li>
	</ul>
</div>
<div id="free">
	<ul class="bbs-list">
		<li class="notice">자유게시물 제목1</li>
		<li>자유게시물 제목2</li>
		<li>자유게시물 제목3</li>
	</ul>
</div>

​