[CSS] 속성 2

 

21. flex-basis

- flex item의 공간 배분 전 기본 너비

- auto가 기본 값으로 기본 너비는 content 너비와 같음
- 0으로 하면 기본 값을 무시하고, 비율 값을 사용함

출처 : 패스트캠퍼스, 박영웅

 

22. transition

- transition : 속성명 지속시간 타이밍함수 대기시간;

- 요소의 전환 효과를 지정하는 단축 속성

- 전환 효과는 전 상태와 후 상태 말고는 추가적인 애니메이션을 부여할 수 없음

- 지속시간은 필수

- 같은 클래스에 display 속성은 적용 안됨. visibility로 설정해야함.

 

1) transition-property

- 전환 효과를 사용할 속성 이름 지정

- 기본값은 all

 

2) transition-duration

- 전환 효과의 지속시간을 지정

 

3) transition-timing-function

- 전환 효과의 타이밍 함수를 지정

 

4) transition-delay

- 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

 

transition : 
width .5s, 
background-color .2s 처럼 여러개의 속성 사용 가능 

*전환 애니메이션 이해를 위한 페이지*
easing-function mdn : firefox에서 만든 doc
tweenmax easing : easing 함수 doc(custom도 가능)

4) transition-origin

- transform과 함께 사용

- 요소의 transform 을 위한 기준점을 정하기 위해 사용

 

 

23. transform

- transform : 변환함수1 변환함수2 변환함수3

- transform : 원근법 이동 크기 회전 기울임;

 

1) 2D 변환 함수

- translate(x,y), translateX(x), translateY(y)

- scale(x,y) ...

- rotate(degree)

- skew(x,y) ...

 

2) 3D 변환 함수

- perspective(n) : 원근법 -> 보이는 관점은 기존 item의 정중앙에서 시작

- rotateX(x), rotateY(y)

출처 : 패스트캠퍼스, 박영웅

 

24. perspective

- 하위 요소를 관찰하는 원근 거리를 지정

- 함수, 속성 둘 다 존재함

출처 : 패스트캠퍼스, 박영웅

출처 : 패스트캠퍼스, 박영웅

 

25. backface-visibility

- 3D 변환으로 회전된 요소의 뒷면 숨김 여부

- visible : 뒷면 보임, hidden : 뒷면 숨김

출처 : 패스트캠퍼스, 박영웅

 

26. text-indent

- text-indent: -9999px;
  -> 배경이미지에서 대체텍스트까지 사용하는데, 화면에서 텍스트는 안 보이게 하자는 일종의 약속

 

27. textcontent

- 어떤 특정한 요소에 textcontent 속성을 추가해서 그 요소가 가지고 있는 어떤 내용을 텍스트로 확인/추할 수 있음

 

28. user-select, user-drag

- user-select : none - 이미지는 드래그가 안됨
- user-grag : 이미지를 드래그 가능

 

29. orientation

- portrait : (x<y) 세로 모드

@media (orientation: portrait) {
/* Portrait 모드일 때 적용할 CSS */
}

- landscape : (x>y) 가로 모드

@media (orientation: landscape) {
/* Landscape 모드일 때 적용할 CSS */
}

30. -webkit

-webkit : 공급업체 접두사
-> 브라우저를 만드는 공급업체에서 일부 기능을 가능하게 하는 속성

 

31. mask-image

- 아이템이 부분적으로만 보여지거나, 완전히 가려서 숨기는 기능

- 마스킹, 특정 점을 기준으로 이미지를 잘라내는 기능도 포함

 

32. gap

- 행과 열 사이 간격

- row-gap, column-gap의 단축 속성

 

33. order

- 동일한 컨테이너에서 요소의 순서를 결정하는 속성