css 실무 테크닉
이미지 포맷
- GIF : 256컬러만 표현가능, 선명하진 않지만 영상에 비하여 용량이 적다.
- JPG,JPEG : 화소가 매우 높고 용량이 적지만 투명처리가 불가능핟.
- png : 거의 모든 컬러는 표현 간으하며 투명 영역도 처리 가능하지만 용량이 크다.
- SVG : 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하다.
background 속성
background에 한번에 작성하기
background: url() position/size repeat;
background-size
- Background-size: 5px : 이미지의 크기를 px단위로 고정한다.
- Background-size: auto : 이미지의 종 횡비를 통해 자동으로 다른 축의 크기를 결정한다
- Background-size: 30% : 컨테이너의 넓이에 비례하게 크기 지정
- Background-size: contain : 컨테이너를 덮지만 이미지를 자르지 않는다.
- Background-size: cover : 컨테이너 전체를 완전히 덮는다.
video tag
- controls : 영상에 흔히 아는 UI가 생긴다. 없으면 영상 못틈
- preload =“none”, “auto”; : 페이지를 로드할 때 미리 영상을 로드할지 정한다.
- poster: 비디오를 내려받을 동안 혹은 영상을 재생할때까지 표시할 이미지를 지정한다.(썸네일?)
- autoplay : 페이지가 로드되면 자동으로 영상을 재생한다. 여러 브라우저에서 muted 속성을 넣지 않으면 자동재생이 되지않는다. 이유는 접근성과 과도한 트래픽 방지 위함 이다.
- loop : 무한반복
👍👍👍