CSS 구문 몇가지 정리

1. nth-child()

책에서 nth-child()가 너무 간단히 나와있길래 좀 검색 해봤는데 약간 헷갈릴 수도 있는 사항이 나와서 정리해 둔다.

https://m.blog.naver.com/PostView.nhn?blogId=adidas0331&logNo=220214005783&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

2. text-shadow와 box-shadow의 사용 방법

text-shadow:가로축 거리 세로축 거리 퍼짐도 색상 (box-shadow도 동일)

text-shadow는 인라인 요소에, box-shadow는 블록 요소의 태그에 사용한다.

3. background-size 

-수치 고정할 경우 :  가로값; 세로값 

원본 관계없이 그냥 막 쑤셔넣는 느낌이라 느낌이 안산다... 아니면 원본 비율을 잘 고려해야 함

-cover

div를 꽉 채우긴 채워준다. 근데 단점은 사진이 크면 짤라서 그냥 일부분만 나올 수도 있음

-contain

사진 원본을 그냥 잘 넣어준다. 비율도 따져서 넣어주는 것 같음

4. transform 3D

-translate 와 rotate가 3D로 변형이 가능하다.

-perspective 구문을 보통 부모 요소의 속성으로 설정해주는 것이 일반적이다.

수치가 작아질수록 왜곡이 커지며, 수치가 커지면 왜곡이 적어서 자연스럽다.

-translateZ는 마이너스값이 사용자 기점으로 멀리 이동한다.

5. transition

-구문의 위치는 :hover 부분이 아니라 원래의 태그 선택자에 속성으로 설정한다.

6.mediaquery

troy.labs.daum.net

@meida screen and (min-width:최소 넓이 폭) and (max-width:최대 넓이 폭) {

조건에 부합될 때 연결할 CSS 구문

}

중요한 것은 괄호 안에 들어가는 width 부분에서 px 설정후 끝에 ; 이걸 붙이면 적용이 안되더라..

7. https://fontawesome.com/

웹 폰트 아이콘을 사용 할 수 있다.