HTML + CSS 마크업 (2) ellipsis & 이미지 스프라이트

 

시작하기에 앞서

 

코드 리뷰와 관련 자료들 중 앞으로 사용하게 될 기술들과 잘 몰랐던 기술들을 짧게 정리하고

 

요점을 적어두고 다시 활용하기 위한 글입니다.

 

CSS로 말 줄임 (text-overflow: ellipsis) 

 

See the Pen Untitled by zerosial (@zerosial) on CodePen.

 

코드의 width를 조절하면 박스 크기를 조절할 수 있습니다.

 

display : block 이거나 시멘틱 태그가 블록 속성인 경우에만 사용할 수 있습니다.

 

  white-space: nowrap; 			// 여러줄이라도 한줄로 모아줌
  text-overflow: ellipsis;		// 일정 이상 벗어낫을 경우 말줄임
  overflow: hidden;			// 넘어가는 라인은 숨김

 

 

이미지 스프라이트 기능

스프라이트이미지

 

See the Pen Untitled by zerosial (@zerosial) on CodePen.

 

 

이미지 하나로 여러 표현을 할 수 있어서 서버간 통신을 줄이고 적은 이미지 파일로 사용가능하다.

 

상단 이미지 별모음 1개로 여러 별점을 나눠서 표기할 수 있다.