📝 img 속성
반응형 이미지를 위한 srcset
srcset 속성을 사용하면 여러 해상도에 대응하여 브라우저가 최상의 이미지를 로딩하는데 도움을 줄 수 있다. srcset 속성은 다양한 크기를 가지는 동일 이미지를 최소 2개 이상 사용할 때 사용하며, 브라우저에게 이미지의 선택권을 위임하는 속성이다
x서술자
x서술자는 화소의 밀도(pixel density)를 나타낸다. 디바이스의 화소 밀도에 따른(소수점일 때는 반올림) 이미지를 로딩하도록 브라우저에 알려준다.
<img
srcset="img/logo_1.png 2x,
img/logo_2.png 3x"
src="a.png"
alt="test">💡 Pixel density : 동일한 면적에 들어가는 화소의 수. 화소의 갯수가 많을수록 더 높은 해상도의 기기
개발자 도구의 콘솔창에서 window.devicePixelRatio 명령어를 입력해보면 화소 밀도를 알 수 있다.
w서술자
w서술자는 원본 이미지들의 넓이의 픽셀값을 브라우저에게 알려준다(px이 아닌 w로 표기하는것에 주의). 이 정보를 통해 브라우저에게 현재 사용자의 환경에 따른 가장 적절한 이미지를 로딩하도록 한다.
w서술자가 적용되면 이미지의 크기는 기본적으로 뷰포트의 100%를 차지하려고 한다
<img
srcset="img/logo_3.png 700w,
img/logo_2.png 600w,
img/logo_1.png 300w"
src="a.png"
alt="test">💡 w서술자와 x서술자는 동시에 사용할 수 없다.
💡 src 속성을 유지하는 것은 필수! srcset 속성을 사용할 수 없는 브라우저(Internet Explorer)를 대비해 사용하는 이미지
💡 w서술자를 사용하면 우리가 원하는 이미지를 선택할 수 없다. 브라우저가 스스로 네트워크의 속도, 이미지의 용량, 화면의 해상도 등등 많은 조건을 고려해서 최적의 이미지를 결정한다.
sizes
sizes 속성은 뷰포트의 조건에 따라 이미지가 UI 안에서 차지하게 될 사이즈를 브라우저에 알려준다. 조건에 따른 이미지의 크기를 설정함과 동시에 w서술자에 더해 브라우저에게 이미지를 선택할 수 있는 더 많은 힌트를 준다고 생각 할 수 있다.
이미지에 차례대로 대응되게 작성한다.
<img
srcset="img/logo_3.png 700w,
img/logo_2.png 600w,
img/logo_1.png 300w"
sizes="(min-width: 960px) 250px,
(min-width: 620px) 150px,
300px"
src="a.png"
alt="test">💡 sizes 속성으로 이미지 크기 변경은 되지만 렌더링할 이미지는 브라우저가 선택한다
💡 srcset 속성은 sizes 속성이 없다고 해도 잘 동작하지만, 웹표준을 준수하기 위해서는 srcset 속성을 사용하면 그에 맞는 sizes 속성도 반드시 명시되어야 한다
💡 sizes 속성을 사용할 때 주의할 점은 CSS를 통한 이미지의 사이즈를 컨트롤 하는 방법(미디어쿼리)과 충돌 할 수 있다는 점이다. CSS 스타일이 sizes 속성에 우선한다.
협업할 때는 사전에 반드시 동료들에게 어떠한 방법으로 반응형 이미지를 처리했는지 공유!
📝 picture
<source> 요소와 <img> 요소를 통해 각기 다른 디스플레이 혹은 디바이스에 따라 조건에 맞는 이미지를 보여주는 요소
<img> 요소의 srcset 속성이 같은 이미지들 중 가장 적절한 하나를 선택한다면 <picture> 요소는 여러 다른 종류의 이미지 중 하나를 선택할 때 사용한다
media
<picture>
<source srcset="babies_large.jpeg" media="(min-width:960px)">
<source srcset="babies.jpeg" media="(min-width:620px)">
<img src="babies_small.jpeg" alt="귀여운 아기 팽귄들">
</picture><picture> 요소는 media 속성의 값을 통해 조건에 알맞는 이미지를 찾는다. 조건에 맞는 <source> 요소 안의 srcset 속성 값을 찾아 <img> 태그의 src 에 넣어 화면에 보여준다.
💡 이러한 구조로 작동하기 때문에 <img> 요소가 없다면 이미지가 화면에 나타나지 않는다!
<picture> 와 <source> 요소 자체는 이미지를 표현하지 않는다
type
<picture>
<source srcset="babies.webp" type="image/webp">
<source srcset="babies.avif" type="image/avif">
<img src="babies.jpeg" alt="귀여운 아기 팽귄들">
</picture>이미지의 포맷 타입을 브라우저에게 알려준다. 위에서부터 차례대로 브라우저가 지원하는 포맷인지 탐색하며 만약 지원하지 않는 포맷이라고 판단되면 다음 <source> 요소로 넘어간다.
만약 모든 <source> 요소의 이미지 사용이 불가능하면 최후에 <img> 요소의 이미지를 렌더링한다.
때문에 WebP나 AVIF 같은 최신 포맷의 이미지를 지원하고 싶다면 크로스브라우징을 위해 <picture> 요소와 함께 사용 하는것이 좋다. 이러한 방식의 크로스브라우징 기법을 ‘점진적 향상기법’이라고 한다.
면접 단골 질문
💡 점진적 향상기법 (Progressive enhancement)
기본적으로 예전 기술 환경에서 동작할 수 있는 기능을 구현해두고, 최신 기술을 사용할 수 있는 환경에서는 최신 기술을 제공하여 더 나은 사용자 경험을 제공할 수 있는 방법
- 디자이너에게 이미지 받으면 1. 이미지 용량 체크! 2. 이미지 포맷 체크!
for 이미지 최적화
이미지가 브라우저에 나오는데 걸리는 시간 고려해야 하기 때문
50KB 이하 권장, 페이지에 이미지가 얼마나 많이 사용될지 알 수 없기 때문
💡 이미지 포맷의 종류
-
GIF (Graphics Interchange Format) :
256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 든다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능하다. 애니메이션 처리가 가능하다. -
JPG/JPEG (Joint Photographic Expert Group image):
매우 화소가 높고, 용량도 적지만 투명처리가 불가능하다. -
PNG (Portable Network Graphics) :
왠만한 컬러는 모두 표현 가능하여 투명 영역을 처리 가능하지만 용량이 크다. -
SVG (Scalable Vector Graphics) :
SVG 형식의 벡터 이미지는 손실이나 품질 저하 없이 모든 크기에서 렌더링이 가능하다. -
WebP (Web Picture Format) :
압축률이 좋다고 소문난 JPEG 이미지에 비해 무려 용량은 70% 수준으로 낮지만 더 뛰어난 색상을 지원하는 포맷이다. 그럼에도 불구하고 PNG 처럼 투명도 표현 가능하며, GIF 처럼 애니메이션 표현도 가능한 만능 포맷이다. -
AVIF (AV1 Image File Format) :
WebP 처럼 뛰어난 색상표현, 애니메이션 지원, 투명도 표현 모두 가능하며 JPEG 이미지의 50% 수준인 용량을 자랑하는 차세대 이미지 포맷이다. 아직 지원하지 않는 브라우저가 많음에 주의해야 한다.
💡 picutre VS srcset
해상도에 따라 '다른 이미지(포맷 포함)'를 보여주고 싶을 때에는<picture>를, ‘같은 이미지’인데 해상도에 따라 더 높은 해상도 이미지를 보여주고 싶을 때에는srcset을 사용한다
🎨 perspective(원근법)
perspective
우리가 대상을 보는 거리
컨테이너로 하여금 자식들에게 원근감을 부여하는 효과가 있다
값이 적을수록 더 가까이 보게 되므로 효과가 더 극적으로 나타나게 된다
* 3D 속성: translate3d(x,y,z), scale3d(x,y,z), rotate3d(x,y,z)
같은 각도(transform: rotateY(45deg);)로 움직였는데 똑같은 박스로 나오지 않는 이유 :
소실점(vanishing point)을 바라보고 틀어지는 각도가 다르기 때문이다. 이때 소실점은 정중앙이다.
* rotateX(), rotateY(), rotate() = rotateZ()💡 완전히 세로로 배치되어 보이지 않는 경우
∵ 두께가 없기 때문(물리적인 법칙 생각X)
이 값을 조정하고 싶다면 perspective-origin을 사용한다.
perspective-origin
perspective 속성이 적용된 요소를 보는 사람의 위치를 나타내는 속성
초기값 perspective-origin: 50% 50%;
진짜 오랜만에 새로운 HTML, CSS를 배웠다..!
실무에서는 아직 안 쓴다고 하는데 편리한 것 같고
최신 기술을 사용해서 프로젝트에서 사용하면 어필할 수 있는 포인트가 된다고 해서ㅎㅎ
알아두고 쓸 줄 알면 좋을 것 같다:)
💻 미디어쿼리 실습
https://github.com/yoonmallang22/HTML-CSS/tree/main/practice%F0%9F%92%BB/responsive-web
그리고 반응형은 역시 머리 아프다ㅠ
생각보다 간단한데 난 왜 생각 못했을까.. 내 코드는 왜 더 복잡할까..
아쉬움ㅎㅎ이 느껴지는 실습이었다
앞으로 더 많이 연습하면 나도 할 수 있다!!! 파이팅해야지!!!💪
