같이 공부하며 배우는 : 선택자??

안녕하세요 MIN입니다.

 

요즘 날씨가 많이 추워졌네요. 다들 감기 조심하세요.

저는 이번에 감기에 걸려서 연휴때 집에만 있었네요 ㅠㅠ..

 

그럼 오늘은 선택자에 대해서 알아볼께요.

선택자는 꼭 퍼블리싱쪽에만 사용되는게 아니라 원리를 알게 되면 다른 곳에서도 응용해서 사용 하실 수 있을꺼에요.

그럼  한번 같이 알아보로 가볼까요??

 

선택자란????

우리가 HTML 구조를 작성할때 태그에 다양한 CSS나 JS를 적용 해야 될때가 있는데 그때 어떤 태그에 값을 줄 지 해당 태그를 선택할때 사용합니다.

 

그럼 선택자는 어떤게 있을까요??

1. 유형선택자
2. 아이디, 클래스 선택자
3. 특성선택
4. 그룹선택

첫번째 유형선택자란?

우리가 일반적으로 HTML구조를 사용할때 쓰는 태그를 선택해서 스타일을 주는 방식입니다.

<style>
	h1 {font-size:20px; color:red;}
</style>

<h1>Hello World</h1>

요소 선택자는 특별한 상황이 아니면 사용하는것을 추천하지 않습니다.

주로 css초기화를 선언할때 많이 사용합니다.

css 초기화에 관해 궁금하시면 구글에 css초기화를 한번 검색해보시면 왜 초기화를 해야되는지 알 수있을꺼에요.

 

두번째 아이디, 클래스 선택자

퍼블리싱할때 주로 제일 많이 사용하게 되는 선택자 방식이에요.

<style>
	.abc{width:100%; height:100%; background-color:blue;}
    #abc{width:100%; height:100%; background-color:red;}
</style>

<div class="abc"></div>
<div id="abc"></div>

이렇게 태그에 클래스와 아이디를 지정해서 해당 클래스와 아이디값을 선언해서 지정 할 수있습니다.

단 아이디와 클래스를 정의할때 여러방식이 있는데 그거는 회사를 다니시면 회사에서 사용하는 선언방식이 있거나 개인이 선호하는 방식을 사용하시면 됩니다.

아이디와 클래스는 어떤속성인지 아실꺼라 생각해요. 

 

 

세번째 특성선택자

이거는 태그에 특성이 선언되어 있는것을 선택해서 사용하는것을 말합니다.

특성 선언방식에 대해서는 너무 다양해서 링크를 공유 드려요.

https://developer.mozilla.org/ko/docs/Web/CSS/Attribute_selectors

특성 선택자 - CSS: Cascading Style Sheets | MDN

 

네번째는 그룹선택자란?

<style>
	.abc, #abc, span, div, p{width:100%; height:100%; display:block; background:red; margin:10px 0;}
</style>

<div class="abc"></div>
<p id="abc">Hello</p>
<span>World</span>

이렇게 태그 및 클래스, 아이디에 동일한 css를 적용을 시킬때 사용하는 선택자입니다. 

추후 작업하실때 자주 사용하게 되는 방식입니다.

 

요즘 회사가 너무 바빠 내용이 많이 부실한거 같네요....

나중에 좀 더 내용을 다듬어 다양한 내용을 작성해 볼께요.

 

미흡한 내용 봐주셔서 감사합니다.