TechScribe Notes

03.CSS선택자 본문

프론트엔드/CSS

03.CSS선택자

yunmee0704 2021. 9. 11. 19:32

*CSS선택자는 CSS로 꾸미고자하는 HTML의 영역을 선택하는데 사용된다.

 

1.전체 선택자: *

<style>
*{
   CSS명령1;
   CSS 명령2;
}
</style>

선택자 자리에 *을 써 넣으면 전체 HTML요소를 선택하여 CSS 명령을 적용시킨다.

 

 

2.태그 선택자: 지금까지 내가 배운것

<body>본문에 있는 태그들을 선택자로 두고, CSS명령을 적용시킬 수있게 하는 선택자.

ex) h1, span, p, body

 

3.그룹선택자: 선택자는 여러 태그선택자를 한번에 지정이 가능하다. 각 선택자는 콤마로 구분한다.

<style>
h1,h2{
CSS명령1;
}
</style>

4.아이디 선택자: 웹 페이지 내에서 특정 영역 하나를 선택해서 CSS로 꾸미고 싶을 때 사용한다.

<style>
 #ID이름{
 CSS명령1; }
</style>
<body>
<태그 id="intro">내용</태그>
</body>

5.클래스 선택자 :웹 페이지에서 두 군데 이상의 특정 영역을 선택해서 CSS로 꾸미고자 할 때 사용한다.

<style>
 .클래스 이름{
 CSS명령1; }
</style>
<body>
<태그 class="클래스이름">내용</태그>
<태그2>내용</태그2>
<태그 class="클래스이름">내용</태그>
</body>

6.하위 선택자: 특정 요소의 하위에 있는 요소들을 선택한다. 하위 선택자를 사용하면 HTML태그 선택자의 개수를 상당부분 줄일 수 있어서 CSS코드가 간결해지고 가독성이 좋아진다!

<style>
 #구역이름.하위선택자명{
 CSS명령1; }
</style>
<body>
<div id="main">
  <p>내용내용</p>
   <span>내용 내용</span>
</div>
</body>
ex)#main.p로 선택자를 잡고 시작하면, <div id="main"구역 안에 있는 <p>태그에 해당되는 내용들이 CSS적용이 된다.

 

 

//23-12-19 추가내용

7.속성 선택자: 특정 속성을 명시하여 요소를 선택 [속성명]

8.자식 요소 선택자: 상위요소에 포함된 바로 한 단계 하위 요소를 선택 >(태그선택자,클래스 선택자,,,)

9.인접 형제 선택자 : 형제 요소 중 첫 번째 형제 요소를 선택 +

10.형제 요소 선택자 : 형제 요소를 선택 ~

'프론트엔드 > CSS' 카테고리의 다른 글

06.CSS활용 -목록과 폼 꾸미기  (0) 2021.09.14
05.CSS활용(2) 디스플레이  (0) 2021.09.14
04.CSS활용(1)  (0) 2021.09.11
02. 박스모델  (0) 2021.09.11
01.CSS의 기본 문법  (0) 2021.09.11
'프론트엔드/CSS' Related Articles more