2022.08.01

연결선택자는 조금 더 국소적인 위치에 효과를 주는 것

 

section p { .. }

섹션 안에 있는 모든 p에 적용한다. 

바로 밑에 있는 자식 요소뿐만 아니라 손자, 손자의 손자 요소 등 모든 하위 요소까지 적용하는 것.

 

상위 요소 하위 요소를 나란히 쓰면됨.

 

 

자식 선택자는  > 부등호를 표시해 구분한다

 

섹션 및에 있는 자식요소만 된다는 뜻

인접 형제 선택자+는 같은 부모를 가진 형제 요소중 첫 번째 동생 요소ㅁ에만 스타일이 적용 되는 것이다 .

 

~ 물결 표시로 하면 형제 요소 전체(~)가 적용되었다.

속성 = 값 하면 정확히 속성에 일치하는 것을 찾아서 적용시키는 것이다.

 

되게 많이 쓰임 한번씩 실습 해봐야함

가상 클래스 선택자 종류 한 번씩 실습해보기

 

 

이거 공백도 맞춰줘야함 꼭;; 아니면 실행 안됨...........

애니메이션 중간에 스타일이 바뀌는 지점을 키 프레임이라고 함.

 

 

반응형 웹

 

다양한 화면 크기에 맞게 웹사이트를 표시하는 방법이다.

(내용은 그대로 유지하면서)

 

 

pc 화면과 모바일 화면이 픽셀이 서로 다름

그러다 보니 모바일 화면에 의도한대로 표시되지 않을 때가 있음.

실제 pc화면보다 훨씬 작으니까.

그래서 뷰포트라는 것은 스마트폰 화면에서 실제 내용이 표시되는 영역을 우리는 뷰 포트라고 하는데

그 표시되는 영역에 맞춰서  뷰포트를 지정하면 기기 화면에 맞춰 내용을 표시할 수 있다.

 

초기 화면 비율은 1로 기본적으로 세팅