My StudyRoom

nth-of-child : 같은 부모 요소에서 적용됨

nth-of-type : 선택요소중 태그 요소를 사용해야 함

https://includestdio.tistory.com/2

해당 선택자 : : -webkit-scrollbar{

display : none     => 스크롤바 없애기

width/height       => 스타일을 지정해 준 순간 기본 스크롤바는 사라짐

background        => 전체스크롤바의 배경색

}

해당 선택자 : : -webkit-scrollbar-thumb{

background        => 스크롤되는 부분의 배경색

}

image filter 참고

http://www.w3bai.com/ko/cssref/css3_pr_filter.html

background-image filter 참고

https://css-tricks.com/apply-a-filter-to-a-background-image/

[ margin : 0 auto  Not Working ]

1. float를 썼을 때

2. width 값을 지정하지 않았을 때

3. inline 요소일 때 

4. display : inline-block  => 요소가 inline 성질을 갖게 되어 => margin:auto 대신 text-align:center

[ inline요소 block 요소 ]

출처:https://webclub.tistory.com/486

[ transform : rotate ]

시계방향으로 회전

x축 : 양 옆으로

y축 : 위 아래로

z축 : '나'라는 중심이 있을 때 ,

나의 앞으로 +Z

나의 뒤로 -Z

[ transform-origin ] 

- 회전 중심(원점. 기준점)을 지정

- transform 속성과 함께 사용 함!( rotate, skew ... )

- 기본값 50% 50%

- transform-origin 단위 :  0%  ( left / top )

          50% ( center )

          100%( right / bottom )

[ transform-style ]

- 자식 요소는 2D의 2차원에서 부모 요소와 동일한 평면에 배치되는 것을,

   transform-style : preserve-3d 을 지정하여 3D차원으로 배치할 수 있음

- 기본값 flat

- {   transform-style : preserve-3d;

      transform : perspective(100px) /* perspective : 100px */  }

* z축으로 100px를 지정했을 때 어떤 변화도 일어나지 않을 것임( 실제로는 움직였지만 화면상에서는 보이지 않음, 2D이기 때문 )

     => 컨테이너 요소에 Perspective를 선언하면 더욱 풍부한 3D적 효과가 나타남 

* perspective : 투영점의 깊이를 설정해 줌

pespective의 px값이 낮을 수록 가까이 보이는 원리이기 때문에 element가 크게 보임

( 투영점 : 나에게 사물이 가까워질수록 점차 커져 보이고, 나에게서 멀어질수록 사물이 점차 작아보임! ) 

background : url()

[ background-size : contain ]

배경 이미지의 가로, 세로 모두 엘리먼트보다 작다는 조건하에 가능한한 크게 조정,

이미지의 가로, 세로 비율은 유지

[ background-size : cover]

배경 이미지의 가로, 세로 모두 엘리먼트보다 크다는 조건하에 가능한한 작게 조정,

이미지의 가로, 세로 비율은 유지

form 태그 (input,select..)

img 태그 

=> 가상선택자가 적용되지 않음!

form태그 대신해서 button태그 등을 사용해야함..!