CSS Sprite 기법

  • 여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법
 

CSS Sprites Generator Tool | Toptal®

CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.)

www.toptal.com

  • CSS Sprites Generator 에서 이미지를 합친 후, 위치를 지정하여 표시한다.
.bg-icon_check_empty {
    width: 22px; height: 22px;
		// 아래 부분만 복사해서 속성값을 변경하면 사용 가능하다.
    background: url('css_sprites.png') -11px -81px;
}
  • 가장 상위 요소에 이미지를 넣고, 각각의 요소에는 위치값만 넣는 방법도 있다. → 더 좋은듯!
[class^="icon"]::before {
	background-image: url('images.png');
}

.icon-google::before {
    background-position: -99px -81px ;
}

.icon-naver::before {
    background-position: -187px -81px ;
}

⇒ 기존의 방식보다 이미지를 빠르게 로딩할 수 있다.

  • 단점
    • 중간에 있는 한가지 요소가 바뀌면, 계속해서 추가해야하고.. 공간 낭비가 된다.
    • 이미지 용량을 줄이려고 사용하는데 불필요한 요소가 누적되어서 용량이 커지는 상황이 발생..!
    • 포토샵이나 피그마를 활용하여 직접 이미지를 편집하게 될 것이다.. Sprites Generator는 순서도 정할 수 없고 한계가 있다.

 

레티나 디스플레이 대응법

  • 레티나: 특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가 넘을 경우)를 가진 애플 LCD 제품의 브랜드 이름
  • 원인
    • 논리픽셀(css에서 표현하는 화소의 기본 단위)과 물리픽셀(디바이스가 실제로 처리할 수 있는 화소의 기본 단위)의 차이가 발생
    • 브라우저는 css에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에 원래는 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀 만큼 커져버리게 된다.
  • 해결방법
    • 그리고자 하는 원본 사이즈의 가로 세로 2배 되는 이미지를 준비
    • 사이트에서 이미지를 합칠때, 간격도 2배로 해서 계산되기 편하게 한다.
    /* 이미지가 1/4로 줄어들기 때문에 이미지 자체 사이즈를 줄여줘야한다. */
background-image: url("images_login/css_sprites_x2.png");
background-size: 123px 89px;

/* 요소 배경이미지 위치값도 다 1/2로 수정한다. */
.icon-google::before {
    /*background-position: -20px -20px ;*/
    background-position: -10px -10px ;
}
.icon-naver::before {
    /*background-position: -116px -20px ;*/
    background-position: -58px -10px ;
}
    • 디자이너분께 이미지를 2배로 달라고 한다..
    /* 기존에는 아래와 같이 픽셀이 2배인 것에 미디어쿼리를 적용했다. */
@media screen and (-webkit-device-pixel-ratio: 2) {
	/* code */
}

 

반응형 컨텐츠 만들기 - img

  • 이미지 포맷
    • GIF, JPG/JPEG, PNG, SVG, WebP, AVIF
  • 이미지 반응형 만들기
    • 뷰포트가 넓어지거나 줄어들 때 !
/* 단위를 vw로 하면 부모요소가 있을때 문제가 생김*/
img {
	width: 100%;
}

/* 이미지가 줄어들긴 하지만 기존 이미지보다 늘어나지 않는다. */
img {
	max-width: 100%;
}
  • 백그라운드 이미지 반응형 만들기
<style>
	article {
		width: 100vw;
		height: 100vh;
		background: url(logo_google.jpeg) black center/contain no-repeat;
}
</style>
<body>
	<article> </article>
</body>

 

반응형 컨텐츠 만들기 - video, iframe

  • 동영상 포맷
 

Media container formats (file types) - Web media technologies | MDN

The format of audio and video media files is defined in two parts (three if a file has both audio and video in it, of course): the audio and/or video codecs used and the media container format (or file type) used. In this guide, we'll look at the container

developer.mozilla.org

  • video 속성
    • preload =“none”, “auto”; : 페이지를 로드할때 영상을 미리 로드할지 말지 결정합니다.
    • poster : 비디오를 내려받을 동안 혹은 영상을 재생할때까지 표시할 이미지를 지정합니다.
    • controls : 브라우저가 재생에 핋요한 컨트롤러를 제공할지 지정합니다.
    • autoplay:  파일이 다운로드가 완료되면 자동으로 재생될지 지정하는 속성입니다.
    • muted: 소리를 끕니다.
    • loop : 비디오가 끝나고 반복적으로 재생할지 지정합니다.
  • video 반응형 만들기
video {
	width: 100%;
}

video {
	max-width: 100%
}
  • iframe 반응형 만들기
.cont-video {
	position: relative;
	padding-top: 56.25%;
	/* 16:9 비율 : aspect-ratio 사용 가능하나 지원 브라우저가 별로 없다. 최신기술! */
	/* 많은 개발자들이 잘 모르는 CSS 매직을 알려드리겠습니다 :) */
	/* padding-top, padding-bottom 속성의 % 값은 부모 요소의 넓이에 비례합니다. */
	/* 예를 들어 부모의 넚이가 1200px 이라면 자식요소의 padding-top=50% 의 값은 600px 과 같습니다. */
} 

.video-next-level {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
  • 반응형 video background 만들기
.full-screen-vid {
	position: fixed;
	top: 50%;
	left: 50%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	/* pointer-events: none; */
}

회고

오랜만에 돌아온 CSS 수업! JS 하다가 들으니까 사막의 오아시스 같다... 기본 문법 학습이나 실습을 하며 어느정도 웹을 만들어낼수는 있지만, 아직 웹접근성이라던지 최적화, 반응형을 만드는거에 약하다는 생각이 들었는데 이렇게 다시 실무에서 활용할 수 있는 좋은 기술들을 알 수 있어서 좋았다.

레티나 디스플레이는 처음 듣는 단어였는데 이런것까지 신경써야 한다니 아직 갈길이 멀은것 같다. 수업시간에 예시로 네이버 쇼핑 페이지에 들어갔는데 레티나 디스플레이 대응이 안되어 있어 맥북을 사용하는 나의 화면에는 이미지가 살짝 깨져보였다ㅎ 네이버 같은 대기업도 안맞춰논게 있다니.. 까볼수록 신기한 세계다ㅋㅋㅋ 시간이 난다면 초반에 진행했던 과제들을 개선하며 다시 만들어보는 시간을 가져봐야겠다!

저작자표시 비영리 변경금지 (새창열림)

'Frontend > HTML-CSS' 카테고리의 다른 글

[HTML | CSS | JavaScript] Form Validation - 폼 양식 검증하기  (0) 2023.06.09
[jQuery | 제이쿼리] jQuery 사용하기 - 선택자, 필터  (0) 2023.05.01

+ Recent posts

티스토리툴바