Css 기본 선택자 정리 및 사용법 정리, 자주 쓰이는 것 위주로

안녕하세요 엘빈입니다. 저번 포스팅에서는 css 기초적인 내용에 대해서 알아보았는데요. Css를 제대로 활용하려면 선택자,스타일 속성, 속성값 3개를 제대로 알아야 한다고 말했습니다. 이번 포스팅에서는 가장 헷갈리고도 공부할 것이 많은 선택자에 대해서 알아보겠습니다. 가장 많이 사용되는 선택자들부터 알아보고 나중에 포스팅을 통해 다양한 선택자에 대해서 알아보겠습니다.

 

 

 

 

 

 

  전체 선택자

 

* {font-size: 15px;font-family: cursive;}

 

전체 선택자는 웹문서 전체 모든 요소에 해당 스타일을 적용시킬때 사용합니다. 주로 웹문서에서 가장 기본이 되는 스타일을 지정할 때 사용합니다. 예를 들어 글꼴,사이즈,여백 등이 있습니다. 스타일을 표시하지 않으면 전체 선택자에 표시된 스타일이 자동으로 지정됩니다.

 

 

 

 태그 선택자

 

p {font-size:13px;}

 

웹문서 작성시 사용되는 태그들에 스타일을 적용시키고 싶으면 태그 선택자를 사용합니다. 예를 들어 p 태그에 스타일을 적용시키고 싶다면 위의 코드처럼 작성하시면 됩니다. 전체 선택자 다음으로 넓은 선택 범위를 가지고 있습니다.

 

 

 

 

 클래스 선택자

 

 

태그 선택자를 사용하는 것은 정말 간편하지만 해당 태그 전체에 스타일이 적용되어 개별적으로 지정할 수 없다는 단점이 있습니다. 클래스 선택자는 앞서 2개의 선택자보다 좁은 선택 범위를 가지고 있는데요. 스타일을 적용하고 싶은 태그에 특정 클래스를 지정하고 작성하는 방식입니다.

 

<p class="memo">이것은 메모입니다.</p>

 

 

예를 들어 다음과 같이 태그를 작성하였습니다. 태그 클래스를 "memo"라고 지정하고 해당 부분만 스타일을 적용하고 시다면 css 파일에 다음과 같이 작성합니다.

 

.memo {font-size:14px;color: yellow;}

 

클래스 선택자를 사용할 때 클래스 명 앞에 꼭 '.'을 붙여주어야 합니다. 해당 태그 부분만 memo 스타일이 적용됩니다.

 

 

 아이디 선택자

 

<p id="dancing">아이디 고유의 댄스</p>

아이디 선택자는 클래스 선택자와 거의 동일합니다. 두개의 차이점이라면 아이디 선택자는 오로지 한 요소에만 적용할 수 있다면 클래스 선택자는 여러 번 사용할 수 있습니다.

 

위의 아이디 "dancing"을 가진 태그에만 스타일을 적용하려면 css 파일에 다음과 같이 작성합니다.

 

 

#dancing{color:red;font-size: 20px;}

 

클래스와 다르게 아이디 앞에 '#'을 붙여줍니다.

 

 

 

 

 그룹선택자

 

p, h4 {color:blue;}

 

여러 개의 요소에 같은 스타일을 적용 시키고 싶다면 어떻게 할까요? 그룹 선택자를 사용하면 됩니다. 예를 들어 p 태그와 h4 태그 모두 파란색 글씨 스타일을 적용시키고 싶다면 위의 코드와 같이 작성하면 됩니다.

 

선택자 사이에 ','을 작성하여 여러 개의 요소 모두에 같은 스타일을 지정합니다.

 

 

---

마무리

 

지금까지 기본적인 선택자에 대해서 알아보았습니다. 웹문서를 작성하면서 정말 많이 사용하기 때문에 꼭 숙지하시고 넘어가시기 바랍니다.

 

포스팅 읽어주셔서 감사합니다.