css 실무 테크닉

@hanminss·2021년 11월 25일
1
post-thumbnail

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 : 무한반복

1개의 댓글

comment-user-thumbnail
2021년 11월 25일

👍👍👍

답글 달기