[CSS] Selector , 선택자

CSS 구문(문법)

- 선택자 { 속성명 : 값; }

- 선택자 { 속성명 : 값; 속성명 : 값; 속성명 : 값; ..}

- h1 { color : red; }

Selector , 선택자 (***********************)

- CSS 에서 가장 중요

- HTML 소스에서 특정 태그(******)를 검색하는 도구

→ 태그를 찾아 서식을 적용

1. 태그 자체에 서식 적용

2. 태그의 내용물에 서식 적용

태그 선택자
- 태그명을 사용해서 원하는 태그를 검색
- 장점 : 검색된 태그가 1개 이상이면 모두 적용된다 ( 일괄 적용 → 생산성 )
- 단점 : 태그명으로만 검색하기 때문에 원치않는 동일한 태그를 걸러낼 방법이 없다.

<head>
	<style>
		/* 선택자 { 속성명 : 값; } */
        h1{ color: red ;}

        div{ color: royalblue;}

        input{ color: yellow;}

        h2{ color: red;}

        p{ color: gray;}
	</style>
</head>
<body>
   <h1>h1 입니다.</h1>
   <p>p 입니다.</p>
   <div>div 입니다.</div>
   <blockquote>blockquote 입니다.</blockquote>
   <input type="text" value="홍길동입니다.">
   <h1>h1 입니다.</h1>
   <p>p 입니다.</p>
   <div>div 입니다.</div>
   <blockquote>blockquote 입니다.</blockquote>
   <input type="text" value="홍길동입니다.">
</body>

2. ID 선택자

태그명#ID { 속성명 : 값; }

#ID { }-> *#ID { }

원하는 태그에 개발자가 id속성 정의 > CSS에서 id를 검색해서 태그를 찾는 방식

ID : 영문자 + 숫자 + 특수문자 (-,_ ) , 한글(x), 공백(x), 나머지 특수문자(x)

ID : identity , 유일한 값

원하는 태그를 검색하기 용이 + id를 작성하는 추가비용 발생

3. Class 선택자

원하는 태그에 개발자가 class 속성 정의 > CSS 에서 그 class를 검색해서 태그를 찾는 방식

class : 영문자 + 숫자 + 특수문자 (-,_ ) , 한글(x), 공백(x), 나머지 특수문자(x)

문서내에 여러개 존재 가능

원하는 태그를 검색하기 용이 + class 를 작성하는 추가 비용 발생

<head>
	<style>
		/* ID 선택자 */
		h2#title { color : red; }
		#title { color : red; }
		#adb { color : blue; }


		/* 클래스 선택자 */
		p.content { color : red; }
		.content { color : red; } 

		
	</style>
</head>
<body>
	<h2 id="title">회사 소개</h2>

   <p class="content">회사에 대한 소개입니다.회사에 대한 소개입니다.
		회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.
		회사에 대한 소개입니다.회사에 대한 소개입니다.</p>
		
  <h2 id="adv">사내 광고 </h2>

  <p class="content">광고 내용 ~광고 내용 ~광고 내용 ~광고 내용 ~광고 내용
	 ~광고 내용 ~광고 내용 ~광고 내용 ~광고 내용 ~광고 내용 ~광고 내용 ~광고 내용
	 ~광고 내용 ~광고 내용 ~광고 내용 ~광고 내용 ~광고 내용 ~광고 내용 ~</p>
</body>

4.그룹 선택자

여러개의 선태자가 body를 공유.

여러개의 선택자로 검색된 태그들이 공통된 서식을 적용받는다.

기존의 선택자들을 그룹지어 선언부를 공유.

<head>
	<style> 

		p, div { color : red; }
		#item1, #item2, h1, .item { color : blue; }

	</style>
</head>
<body>
	 <h1>h1 입니다.</h1>
	 <p class="item">p 입니다.</p>
	 <div id="item1">div 입니다.</div>
	 <blockquote>blockquote 입니다.</blockquote>
	 <input type="text" value="홍길동입니다." class="item">
	 <h1>h1 입니다.</h1>
	 <p id="item2">p 입니다.</p>
	 <div class="item">div 입니다.</div>
	 <blockquote>blockquote 입니다.</blockquote>
	 <input type="text" value="홍길동입니다.">
	 <h1 id="item3">h1 입니다.</h1>
	 <p>p 입니다.</p>
	 <div class="item">div 입니다.</div>
	 <blockquote>blockquote 입니다.</blockquote>
	 <input type="text" value="홍길동입니다.">
</body>

5. 자식 선택자

부모를 조건(**)으로 자식 태그(***목표)를 검색

부모 > 자식 { 속성명 : 값; }

자식은 조건으로 사용 불가

6. 자손 선택자

조상을 조건으로 자식 태그를 검색

직계 조상을 조건으로 검색

조상 자식 { 속성명 : 값; }

<head>
	/* 자식 선택자 */
	li > b {color : red; }
	ol > li > b { color: blue;} 
	
	/* 자손 선택자 */
	blockquote b {color : blue; }
  
  /* 조상이 겹칠땐 -> id 사용 */
     #my b {color: red;}

</head>
<body>
		<ol>
        <li>자바, <b>Java</b></li>
        <li>오라클,<b>Oracle</b></li>
        <li>HTML</li>
    </ol>
	
	<blockquote>
        <div>
            <div>
                <ul>
                    <li>자바, <b>Java</b></li>
                    <li>오라클, <b>Oracle</b></li>
                    <li>HTML</li>
                </ul>
            </div>
        </div>
    </blockquote>

		<blockquote id="my">
        <div>
            <div>
                <ul>
                    <li>자바, <b>Java</b></li>
                    <li>오라클, <b>Oracle</b></li>
                    <li>HTML</li>
                </ul>
            </div>
        </div>
    </blockquote>
</body>

7. 인접 형제 선택자

바로 전의 형태를 조건으로 검색

형제 + 선택자 { }

동생은 조건으로 사용 불가

자식 선택자와 유사

8. 형제 선택자

형제를 조건으로 검색

형제 ~ 선택자 { }

조건인 형제와 대상인 선택자 사이에 또 다른 중간 형제가 와도 좋다

자손 선택자와 유사

<head>
	/* 인접 형제 선택자 */
	div + p { color : red; } 
	span + p { color : blue; }

	/* 형제 선택자 */
	div ~ p { color : red; }
	p ~ p { color : blue; } 	

</head>
<body>

		 <p>p 태그</p>
     <div>div 태그</div>
     <p>p 태그</p>
     <p>p 태그</p>
     <span>span 태그</span>
     <div>div 태그</div>
     <p>p 태그</p>
     <p>p 태그</p>

</body>

자식/자손, 형제/인접형제
- 부모 조건(o)
- (윗)형제 조건(o)
- 자식 조건(x)
- (아랫)형제 조건 x

의사 클래스 , Pseudo class

- 실제 태그에는 class 속성이 없는데 선택자에서는 존재하는 class 처럼 사용

- <a> 태그에만 제공 → 다른 태그들에게도 제공

<head>
	/* 가장 보편적인 <a> 의 CSS 적용 모습 */
	a { color : black; text=decoratiob : none; }
	a:hover { color : red; text-decoration; }

    a:link{color: black;} /* 한번도 방문한적 없는 상태의 링크 */
    a:visited{color:orange;} /* 방문기록이 있는 상태의 링크*/
    a:active{color: red;} /* 활성화된 상태의 링크 */
    a:hover{color: pink;} /* 마우스 커서가 올라가 있는 상태의 링크 */
</head>
<body>

	 <a href="http://google.com">구글</a><br>
   <a href="http://getbootstrap.com">부트스트랩</a><br>

</body>

동일한 선택자 + 동일한 속성 + 다른 값 지정 → 마지막 적용된 속성 반영

선택자 우선 순위

- 서로 다른 선택자가 하나의 태그를 선택했을때 > 동일한 속성 적용 > 속성 충돌 발생

- 점수 계산 : 선택자를 구성하는 요소들의 점수 총합을 계산해서 가장 높은 선택자가 적용

- 태그 선택자 : 개당 1점 , 클래스 선택자 : 10점, ID 선택자 : 100점

- 같은 선택자일 경우엔 마지막꺼 적용

- 선택자 우선 순위를 결정하는 점수의 의미 → 개념적인 표현 ( 클래스 100개 만들어도 ID 못이김 )

<head>

	/* 속성 충돌 발생  */

  html > body > div.box.aaa{color: red;} 
  /* 10점 ->11 -> 21 -> 22 -> 23  */

  body > div.aaa.box{color: blue;}
  /* 10점 -> 11 -> 21 */

</head>
<body>
	
	 <div id="box1" class="box">상자입니다.</div>
   <div id="box1" class="box aaa bbb ccc">상자입니다.</div> 

</body>

Uploaded by Notion2Tistory v1.1.0

'프로그래밍 > CSS' 카테고리의 다른 글

[CSS] Background 속성 (0)	2021.08.03

꾸준희

[CSS] Selector , 선택자

'프로그래밍 > CSS' 카테고리의 다른 글

티스토리툴바

[CSS] Selector , 선택자

'프로그래밍 > CSS' 카테고리의 다른 글

관련글

티스토리툴바