TIL : 웹퍼블리싱 CSS 1회 (1,2,3)

I. 문서 스타일 변경하기 (01)

학습목표  HTML이 가지고 있는 기본 스타일은 우리가 원하는 모습이 아닐 수 있다. CSS를 이용하면 그 스타일을 우리가 원하는 모양으로 변경할 수 있다. 그 방법에 대해서 알아보자. CSS란 무엇인가. CSS로 스타일 변경하는 방법

1. CSS 학습안내 (1)

2. Cascadind이란(2)

3. 스타일 입히기(3)

4. 우리가 다루게 될 스타일 속성들(4)

5. 선택자 Selectors(5)

6. 공통 스타일 집중화(6)

 

II. 선택자 (02)

1. 기본 선택자 (7)

CSS에서는 선택자로 클래스명을 쓰자

 

2. id와 class의 차이점(8)

ID는 HTML에서... / class 는 CSS 에서

3. 속성 선택자(9)

h1태그가 있는데 그중에 class라는 속성을 가진것을 선택하시오.

값은 중요한게 아니고 class라는 속성가진 h1태그 선택하기 이다.

 

 

III. 콤비네이션 연산자 (3)

1. 콤비네이션 연산자 (10)

태그 클래스 아이디로 선택 함 4가지 연산자가 있음

자손인 의미는 가계도를 그려서 하는거라서

 

AB 빈 공백도 연산자임  (자손연산자) 즉 B를 찾건데 A의 자손중에서... (자손연산자)

A>B 는 A의 자식들 중에서

여기서 P > B 1개 / A B 는 3개 / A > B 는 3개 (동일함 왜냐 앞서 AB는 자식만있음)

 

 

Adjacent sibling (A+B) 은 바로 맞(밑)동생 => B + B 는 없음

General sibling 은 동생들 => B~B 는 1개

 

 

P > B + A A

초록색 A

 

 

2. 콤비네이션 연산자 확인문제 (11)

 

3. Selectors 우선순위 (12)

 

우선순위는 더 정밀하게 선택(범위가 좁을수록)하는것이 더 높다 

 

tag < class < id

더 높은 순위가 아니면 덮어 쓰기가 어렵다 / 순서가 바뀌어도 마찬가지이다.

그리고 컴비네이션 연산자(복합연산자)가 들어가면 우선순위가 높아진다. (2번째가 1순위)

 

h1.cafe{
    color: green;
}

h1[lang="ko"]{
    color: brown;
}

얘들 둘은 동급이라서 순서에따라서 덮으쓰기가 가능하다

---

1. 보충

 

 

 

2. 회고 

일단 휴대폰으로만 보았던 강의를 간략하게 정리했다

역시 정리를 해야지 내것이 된다.

 

이해 정리 후 폰으로 가볍게 보아야 더 탄탄해진다고 생각함