배웠는데 못 쓰겠는 css 정리

인프런에서 배웠는데 못 쓰겠는 css 라는 강의를 보고 정리한 내용입니다.

1. 가운데 정렬 프레임

1. static 일 경우

   • display:block;

     • width : <길이>;
     • margin:0 auto;

2. absolute 일 경우

   • left : 50%;
   • width : <길이>;
   • margin-left : -<길이/2>;

2. 모바일에 대응하는 CSS

1. max-width 설정

2. viewport 설정

   • html에서 head 태그 안에 meta 태그의 속성으로 추가
   • device-width : 출력 장치의 너비
   • initial-scale : 화면 비율

3. media query

   • 사용문법 : @media (조건문) {실행문}
   • if문과 동일한 효과

   • 예시) width가 768 이하인 경우

     @media(max-width:768px){
     #contents{
     	display:none;
     }
     }

3. 크기의 단위

1. 고정 크기 단위 : px, cm

2. 가변 크기 단위

   1. 폰트크기에 영향 : em, rem

      1. em : 부모요소에서 지정한 font-size 기준
      2. rem : html 태그에서 지정한 font-size 기준

   2. 화면 크기에 영향 : vw, vh, vmin, vmax

      1. vw : 가로 너비를 100등분한 것이 1 vw
      2. vh : 세로 높이를 100등분한 것이 1 vh
      3. vmin : 가로, 세로 중 짧은 것을 100등분한 것이 1 vmin
      4. vmax : 가로, 세로 중 긴 것을 100등분한 것이 1 vmax
3. calc 함수 : 다른 크기 단위를 계산해준다. ex : height:calc(100vh - 100px)

4. 인접, 가상 선택자, transition

1. 인접 선택자

2. A>B : A 엘리먼트 자식으로 오는 B 엘리먼트

3. A+B : A 엘리먼트 바로 옆에 오는 B 엘리먼트

4. A~B : A 엘리먼트 옆에 오는 B 엘리먼트들

5. 가상 선택자

6. A:checked : 체크된 A 엘리먼트

7. A:hover : 마우스가 올려진 A 엘리먼트

8. A:active : 클릭된 A 엘리먼트

9. transition 애니메이션 효과 transition : <적용할 속성> <적용 시간> 예시) transition : all .25s