Tqoon web style

IMAGE

Image Resolution

고정이미지

  • - 팝업창과 같이 크기가 변하지 않는 이미지는 Pixel 값을 사용한다.
  • - 이미지의 해상도는 출력되는 영역과 동일하게 제작한다. (해상도 = 팝업창 크기)

변형 이미지

  • - 반응형과 같이 화면에 따라 크기가 변하는 이미지는 % 값을 사용하며 100%를 기본으로 한다.
  • - 이미지를 감싸는 영역이 - Css로 설정한 넓이값 100%는 실제 이미지 사이즈의 2배를 초과하지 않도록 한다.
  • - 이미지는 1024px ~ 1280px (PC) / 768px (태블릿) / 425px (모바일)에 최적화한다.
기기별 이미지 최적화 해상도
Image Extensions
  • - 확장자는 JPG,JPEG,PNG의 사용을 권장한다.
  • - PNG 기준 사진 1장당 300KB 미만의 사용을 권장한다.
Image Property
  • - html로 이미지를 삽입할 경우, src와 alt는 필수로 입력한다.
  • - style로 입력하는 인라인 속성은 유지보수를 위해 사용하지 않는다.

Css를 통해 background 속성을 사용할 경우 다음과 같은 통합코드를 사용한다.

  • - backgrdound-image, background-color, background-size 등 세부 속성을 사용해도 되나, 두 개 이상의 속성을 적용할 경우 background 속성을 사용하여 필요한 값만 입력한다.
Image Arrayal
  • - 2개 이상의 이미지를 리스트 형식으로 표현할 때는 ul li를 사용한다.
  • - 이미지를 한 행에 표현할 때는 li의 inline-block을 기본으로 쓴다.
  • - PC기준 한 행에는 최대 5개의 이미지를 정렬한다.