6월 4주차 정리

CSS

Animation

animaion-fill-mode

• 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
• normal: 기본값
• forwards: 요소의 기존 스타일로 시작하며 애니메이션 마지막 속성값 유지
• backwards: 첫 번째 정의된 애니메이션 값으로 시작하며 요소의 기존 스타일로 돌아감
• both: 첫번째 정의된 값으로 시작하며 마지막 값 유지

animation-play-state

• 애니메이션 재생 여부
• paused / running : 정지 / 재생

animation

• 단축속성
• 포함하는 속성: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state

3d 관련 속성들

perspective

• 3D 요소에 원근감을 주기위해 z축의 위치를 정함
• 값이 크면 변형이 작고 값이 작으면 변형이 큼
• 부모에게 사용하며 적용 범위는 직계자식만
• 음수 값 사용 X

perspective-origin

• 소실점
• 사용자가 보고있는 위치(x,y)를 결정
• 부모에게 사용하며 기본값은 정 중앙

transform

• 요소에 2D or 3D 변형을 적용
• translate(), scale(), rotata()...

transform-style

• 요소에 변형을 적용할 때 그 변환이 자식에게도 적용될지를 설정
• 부모요소에 작용
• flat / preserved-3d: 평면 배치(기본값) / 3D 공간 배치

backface-visibility

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

미디어쿼리

미디어 유형

• all: 모든 장치를 대상으로 함(기본값)
• print: 인쇄 결과물 및 출력 미리보기 화면에 표시하는 경후
• screen: 모니터나 스크린이 있는 디바이스를 의미
• speech: 텍스트를 음성으로 변환하는 음성 합성장치 대상

미디어 특성

• width: 스크롤바를 포함한 뷰포트의 너비
  • min-width, max-width : 최소 / 최대 너비
• height: 뷰포트의 높이
  • min-height, max-height : 최소 / 최대 높이
• orientation: 뷰포트의 방향
  • portrait / landscape: 세로 / 가로
• aspect-ratio: 뷰포트의 가로세로비
• resolution: 출력장치의 픽셀 밀도 - 단위 dppx(Device pixel ratio).

min-, max-

• min- / max-: 최소 조건 / 최대 조건
  

논리연산자

• and : 조건을 모두 만족하는 경우에만 스타일을 적용
• not: 조건을 반전하는 경우 스타일을 적용
  • 주의: 미디어 유형(all, screen, print..)을 지정한 경우에는 해당 미디어 유형일 경우를 의미하며 부정의 의미에 미디어 유형은 포함되지 않음
• ,(쉼표): 조건중 하나라도 만족하는 경우 스타일을 적용
• only: 미디어쿼리를 지원 하는 브라우저에서만 작동

반응형 이미지

반응형 이미지가 필요한 이유

• 현재 다양한 디바이스가 있기 때문에 각 디바이스 환경을 고려하여 적절한 이미지를 제공해야하기 때문

해상도 전환

• 사용할 때의 장점: 디바이스의 해상도 및 크기에 따라 적절한 이미지를 효율적으로 보여주는 방법

srcset

• 브라우저가 네트워크, 메모리, 성능, 시간 등을 고려하여 최적의 이미지를 선택
• w, x서술자를 사용
• 사용예시
  • w
    • 이미지의 원본 넓이를 브라우저에게 알려줌
    • 이미지의 크기는 기본적으로 뷰포트의 100%를 차지(width, sizes 등의 속성으로 변경 가능)
    • src 속성을 무시함
  • x
    • 화소의 밀도. 디바이스 화소 밀도에 따른 이미지를 로딩하도록 브라우저에게 알려줌
    • 화소밀도: 동일한 면적에 들어가는 화소의 수. 개발자 도구 콘솔창에서 window.devicePixelRatio 명령어를 입력하면 알 수 있음
    • 서술자를 포함하지 않은 경우 기본값인 1x로 간주
• 디바이스의 넓이 - w(반응형 O) / 디바이스 화면의 픽셀 밀도 - x(디바이스 별 따로 앱 제작)

sizes

• 이미지가 차지하게 될 사이즈를 브라우저에게 알려줌
• sizes와 width를 같이 작성할 경우 ⇒ width를 우선시 함

아트디렉션

• 필요한 경우: 반응형 이미지에서 이미지의 의도가 제대로 전달되도록 기기에 따라 사진의 핵심을 확대해서 보여줌. 다른 비율, 다양한 크기의 이미지를 사용하고 싶을 때 사용.
• picture 태그 사용

Figma

피그마란?

• UI/UX 디자인을 위한 클라우드 기반 협업 웹 어플리케이션
• 쉽게 말해 웹을 기반으로 디자인 편집 작업을 하고 웹 링크 공유를 통해 편리하게 협업하는 디자인 툴

주요기능

• 협업
• 디자인 시스템
• 프로토타이핑
• 버전 관리
• 플러그인
• 내보내기 및 공유
• 레퍼런스

Figma 심화

오토레이아웃

• 오토레이아웃이란?: 자동으로 레이아웃을 잡아주는 기능(ex. 내부 텍스트의 크기에 따라 버튼의 크기가 달라짐)

안경 꾸며주기 실습

명함만들기 실습

컴포넌트

• 컴포넌트란?: 재사용 가능한 UI 요소. 일관성 유지, 효율성, 협업 용이 등의 장점이 있음

컴포넌트 용어

• 메인 컴포넌트: 컴포넌트의 원본이자 ‘마스터’ 버전. 메인 컴포넌트를 수정하면 해당 컴포넌트를 기반으로 하는 모든 인스턴스 컴포넌트가 자동으로 업데이트 됨.
• 인스턴스 컴포넌트: 메인 컴포넌트의 복사본 여러 군데에 배치하여 일관된 디자인 유지 가능
• 오버라이드: 특정 인스턴스 컴포넌트에서 메인 컴포넌트와는 다른 속성이나 스타일을 적용하는 것. 개별 인스턴스를 메인 컴포넌트와 다르게 커스터마이징 하는 것을 의미

프로토타입

• 프로토타입: 디자인한 UI를 실제로 작동하는 것처럼 시뮬레이션할 수 있게 해줌
• 프로토타입의 시작점을 만드는 방법: 프로토타입의 시작이 되는 지점을 Flow Starting Point로 설정