멋쟁이사자처럼 프론트엔드 스쿨 7기 학습내용 정리 및 복습

📲 반응형 이미지

• 웹페이지는 다양한 디바이스 환경을 고려해 적절한 이미지를 제공해야 함
• 네트워크, 메모리, 성능 등을 고려한 다양한 크기의 이미지
  • 해상도 전환 문제
• 화면 크기, 방향 등을 고려한 다양한 레이아웃 이미지
  • 아트 디렉션 문제

해상도 전환

• 크기만 다른 동일한 컨텐츠의 이미지를 보여주고 싶을 때 사용

  • 큰 이미지가 필요없는 좁은 화면에서 더 작은 이미지를 제공하고 싶을 때
  • 선택적으로 다양한 해상도의 이미지를 고/저밀도 화면에 제공하고 싶을 때

벡터 그래픽 이미지 사용(SVG)

• 벡터 이미지는 용량도 작고 확대해도 깨지지 않는 장점이 있으나, 그래픽이 복잡해지면 용량이 늘어나게 됨. 보통 간단한 그래픽, 패턴, 인터페이스 요소 등에 적합함

<img>요소에 srcset과sizes속성 이용하기

• srcset: 브라우저에게 이미지 선택권을 위임하는 속성
• sizes: 이미지가 차지하게 될 사이즈를 브라우저에게 알려주는 속성

아트 디렉션

• 연출 방향, 중요한 부분을 자른 이미지를 보여줌
• 이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대해서 보여주는 형태의 방법

<picture> 요소 사용하기

• <source>
  • 브라우저가 고를 수 있는 소스 제공
• <img>
  • src, alt 속성 포함하여 필수적으로 넣어줘야 함
  • <source>요소 중 사용가능한 이미지가 없을 경우 해당 이미지로 적용

🎲 3D 관련 속성

perspective

• 3D 위치 요소에 원근감을 주기 위해 평면과 사용자 사이의 거리를 결정
• 값이 클수록 변형이 작고, 값이 작을수록 변형이 커짐
• 해당 속성은 부모에게 사용하고, 적용 범위는 직계 자식만 가능(자손 적용X)
• 음수값 사용 불가
  
  

perspective-origin

• 소실점(기본값: 정 중앙)
• 사용자가 보고 있는 위치(x,y) 결정
• 해당 속성은 부모에게 사용

transform

• 요소에 2D 또는 3D 변형 적용

3D 변형과 관련된 method

• 메소드를 사용하려면 원근감을 표현할 기준을 명시해야 함
• perspective()필수

translateZ(z)

• z축 거리만큼 이동

rotateZ(z)

• z축 기준으로 회전
• rotate()와 동일

scaleZ(z)

• z축 기준으로 크기를 배율 증감

translate3d(x,y,z)

• 현재의 위치에서 주어진 x축,y축,z축의 거리만큼 이동

rotate3d(x,y,z,angle)

• 주어진 각도만큼 x축,y축,z축을 기준으로 회전

scale3d(x,y,z)

• 크기를 주어진 배율만큼 x축,y축,z축 방향으로 늘리거나 줄임
  
  

transform-style

• 요소에 변형 적용 시, 자식요소에게 적용 여부 설정
• flat: 평면에 배치(기본값)
• preserve-3d: 3D 공간에 배치
  
  

backface-visibility

• 요소의 뒷면이 사용자를 향할 때 보이게 할지 설정
• 3D 공간에서는 회전되면 노출 될 수 있음
• visible: 뒷면 보임(기본값)
• hidden: 뒷면 보이지 않음