[220405] css selector

🎥인강

 

CSS

선택자{ 속성 property : 값 value; }

 

CSS 선언방식

- 내장방식 :태그를 사용해안에 작성

<style>
    div{colot : red;}
</style>

- 인라인 방식 : 요소의 style 속성에 직접 작성

  <div style =:colot:red;></div>

- 링크방식 : 태그로 외부 css 문서를 연결하는 방식

병렬 방식(한번에 가져와서 연결)

  <link rel="stylesheet" href="./css/main.css">

- import 방식 : css 파일에 @import로 다른 css 문서를 연결하는 방식

직렬 방식(순서대로 하나씩 가져와서 연결)

  @import url("./box.css");

 

CSS 선택자

기본 선택자

* 전체 선택자 : 모든 요소 선택

 태그 선택자 : 해당 태그 이름의 요소 선택

. 클래스 선택자 : HTML class 속성이 일치하는 요소 선택

# 아이디 선책자 : HTML id 속성이 일치하는 요소 선택

 

복합 선택자

일치 선택자 ab (붙여 쓰기) : a 와 b 를 동시에 만족하는 요소 선택

자식 선택자 a>b : a의 자식요소 중 b 요소 선택

하위 선택자 a b(띄어쓰기) : a의 하위요소 중 b 요소 선택

인접 형제 선택자 a+b : a의 다음 형제 요소 중 b 하나 선택

일반 형제 선택자 a~b : a의 다음 형제 요소 중 b 모두 선택

 

가상 클래스 선택자

:hover : 요소에 마우스 커서가 올라가 있는 동안

:active : 요소에 마우스를 클릭하고 있는 동안

:focus : 요소가 포커스 되었을 때

- focus 가 가능한 요소만(html 대화형 요소)

- <div tabindex = " -1"/> :  포커스 요소가 불가요소를 가능 요소로 바꾸는 속성

:first-child : 형제 요소 중 첫번째라면 선택

:last-child : 형제 요소 중 마지막이라면 선택

:nth-child(n) : 형제요소중 n 번째 라면 선택

                 2n == 짝수

                2n+1== 홀수

                 n+2 == 2번째부터

:not(선택자) : 선택자가 아닌 요소 선택

 

가상 요소 선택자

::before : 해당 요소의 내부 앞에 내용 content 를 삽입

::after : 해당 요소의 내부 뒤에 내용 content 를 삽입

.box::after{
	content : "뒤"
 }

 

 

속성 선택자

[속성]

속성을 포함한 요소 선택

[속성 ="값"] 

속성을 포함하고 값이 같은 요소 선택

 

스타일 속성

글자/문자 관련 속성들은 대부분 상속됌

 

강제속성

div{ display : inherit; }

 

선택자 우선순위

: 같은 요소가 여러 선언의 대상이 된 경우 어떤 선언을 우선 적용할지 결정하는 방법/

1 점수가 높은 선언

2 점수가 같다면, 가장 마지막에 해석된 선언 

 

• id 선택자 100점
• class 선택자 10점
• 태그 선택자 1점
• 전체 선택자 0점
• 상속과 부정 선택자는 계산하지 않음
• !important 9999999점

{color : red !important }

 

 

 

📢실강

속성의 기본값을 알고 있는 것도 중요!

 

마진중첩

1 부모의 margin-top과 자식의 margin-top이 만나면 (margin-bottom을 만났을때도)

2 이전형제와 다음형제 (위아래가 만났을때)

좌우에서는 발생하지 않음

 

box-sixing

content (paddig) border