2024-02-28-오전~오후:CSS선택자

1. css선언방식

1) 내장방식

• HTML파일 안에 <style> 태그로 스타일을 작성하는 방식

<style>
div {
color : red; margin : 20px;
}
</style>

 

2) 인라인 방식

• 요소의 style 속성에 직접 스타일을 작성하는 방식이다.
• 유지보수의 측면에서 어려움이 있기 때문에 권장하지 않는 방식

<div style="color:red; margin:20px;">
...
</div>

 

3) 링크 방식

• link 태그를 이용하여 외부css 문서를 가져와서 연결하는 방식

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

 

4) @import방식

• css의 @import 규칙으로 css문서 안에서 또 다른 문서를 가져와 연결하는 방식

@importurl("./box.css");

 

---

2. 선택자

1) 기본 선택자

(1) 전체 선택자( * )

• 기호를 사용하여 모든 요소를 선택하여 css를 적용
• 문서안의 모든 요소를 읽어야하기 때문에 페이지 로딩 속도가 느려 자주 사용하지 않는것이 좋음.

 

(2) 태그 선택자( p )

• HTML요소를 직접 지칭하는 가장 간단한 선택자
• 태그에 대한 스타일만 지정되어 있으므로 개발자가 지정해주는 스타일이 적용되지 않음

 

(3) 클래스 선택자( . )

• 주어진 값을 class속성값으로 가진 HTML요소를 찾아 선택

 

(4) ID 선택자( # )

• id 속성값이 #뒤 명칭으로 지정된 요소를 선택

 

2) 복합 선택자

• 복합 선택자는 두 개 이상의 선택자 요소가 모인 선택자 입니다.

(1) 그룹 선택자(E, F)

• E와 F를 선택자를 붙여서 동시에 선택

(2) 일치 선택자(E.F)

• E와 F의 조건을 동시에 만족하는 요소 선택

(3) 자식 선택자(E>F)

• E의 자식요소중에서 F요소를 선택
• 자식요소:특정 요소 바로 아래에 속한 요소

 

(4) 후손(하위) 선택자(E  F)

• E의 후손요소 중에서 F요소를 선택
• 후손요소: 특정 요소 이하의 모든 요소
• 띄어쓰기 사용

(5) 인접 형제 선택자(E+F)

• E요소를 뒤따르는 F요소를 선택
• E와 F 사이에 다른 요소가 존재하면 선택하지 않습니다.

(6) 일반 형제 선택자(E~F)

• E요소가 앞에 존재하면 F를 선택합니다
• E가 F보다 먼저 등장하지 않으면 선택하지 않습니다.

 

 

3) 가상 클래스 선택자

• 콜론(:) 기호가 한 개 붙어있는 상태

(1) active( E:active )

• 마우스를 클릭했을 때

(2)  hover( E:hover)

• 마우스를 롤오버 했을 때

(3) focus( E:focus )

• input 등의 태그에 포커스 되었을 때

(4) first ( E:first )

• 첫번째 요소

(5) last ( E:last )

• 마지막 요소

(6) first-child ( E:first-child )

• 첫번째 자식

(7) last-child ( E:last-child )

• 마지막 자식

(8) first-of-type ( E:first-of-type )

• 해당 태그의 처음 요소

(9) last-of-type ( E:last-of-type )

• 해당 태그의 마지막 요소

 

 

4) 가상 요소 선택자

(1) before( E::before )

::before가 선택된 요소의 맨 첫번째 자식으로 요소를 하나 생성

 

(2) after( E::after)

::after가 선택된 요소의 맨 마지막 자식으로 요소를 하나 생성

 

 

5) 속성 선택자

 

속성 선택자 : HTML의 속성과 속성값을 이용해서 HTML 태그를 선택하는 것

---

참고링크 : 

https://computer-science-student.tistory.com/437

https://stella-ul.tistory.com/16

https://apost.dev/1025/

https://bio-info.tistory.com/68

https://www.daleseo.com/css-box-model/