CSS transform , opacity , content 속성

CSS transform 속성

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

변형 가능한 요소만 transform할 수 있습니다. 즉, CSS 박스 모델이 레이아웃을 결정하는 모든 요소 중 비대체 인라인 박스, 표 열 박스, 표 열 그룹 박스를 제외한 요소에만 적용할 수 있습니다. 

transform 속성은 키워드 none 또는 하나 이상의  값을 사용해 지정할 수 있습니다.

 

값

요소에 적용할 하나 이상의 CSS 변형 함수. 변형 함수는 왼쪽에서 오른쪽으로 곱해집니다. 즉, 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같습니다.none아무런 변형도 적용하지 않음.

transform: matrix(1, 2, 3, 4, 5, 6); /* 자유 변형(포토샵 Ctrl + T랑 같은 듯)*/
/* matrix(a, b, c, d, tx, ty) a,b,c,d는 선형변환, tx, ty는 적용 할 이동*/



transform: translate(120px, 50%); /* 이동 */
/* translate(<length-percentage> , <length-percentage>) 
   첫번째 값 x축, 두번째 값 y축 (한 개 값을 가지면 이거랑 같음 > translate(x축, 0))*/
   
/* Single <length-percentage> values
   transform: translate(200px);
   transform: translate(50%); */
   
/* Double <length-percentage> values
   transform: translate(100px, 200px);
   transform: translate(100px, 50%); 
   transform: translate(30%, 200px);
   transform: translate(30%, 50%); */



transform: scale(2, 0.5); /* 크기 변형 */
/* scale()은 2D에서만 가능, 3D는 scale3d() 사용 */
/* scale(sx) 값을 한 개만 가지면 x,y축 동일 transform: scale(0.7); == scaleX(0.7) scaleY(0.7)
   scale(sx, sy) 값을 두 개 가지면 각각 x와 y축이 됨*/



transform: rotate(0.5turn); /* 회전 */
/* rotate(a) a는 <angle> 
   값을 +주면 시계방향, -는 시계반대 방향
   단위는 아래와 같음
   deg(도) 1회전 = 360deg
   grad(그레이드) 1회전 = 400grad 
   rad(라디안) 1회전 = 2π 라디안, 1rad는 180/πdeg 
   turn(회전) 1회전 = 1turn */
   
/* 다른 속성과 같이 사용할 수 있으며 순서를 어떻게 주냐에 따라 값이 다름
.rotate {
  background-color: transparent;
  outline: 2px dashed;
  transform: rotate(45deg);
}

.rotate-translate {
  background-color: pink;
  transform: rotate(45deg) translateX(180px);
}

.translate-rotate {
  background-color: gold;
  transform: translateX(180px) rotate(45deg);
} */




transform: skew(30deg, 20deg); /* 왜곡 */
/* skew(ax) 값을 한 개 가지면 x축만 기울어짐
   skew(ax, ay) 값을 두 개 가지면 각각 x축과 y축이 기울어짐 */




/* 키워드 값 */
transform: none;

/* 함수 값 */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); /* 3D 변형 */
transform: perspective(17px); /* 3D 변형 */
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg); /* 3D 변형 */
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em); /* 3D 변형 */
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3); /* 3D 변형 */
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* 다중 함수 값 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* 전역 값 */
transform: inherit;
transform: initial;
transform: unset;

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

 

 

 

CSS opacity 속성

opacity CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.

opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.

opacity 값이 1이 아니면 요소를 새로운 쌓임 맥락에 배치합니다.

자식 요소는 불투명하게 유지하고 싶다면 background 속성을 대신 사용하세요.

background: rgba(0, 0, 0, 0.4);

 

0 : 완전 투명해서 보이지 않음

0 과 1 사이의 아무 숫자 : 요소가 반투명해 뒤의 내용을 볼 수 있음

1 : 요소가 불투명함

 

div { background-color: yellow; }
.light {
  opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */
}
.medium {
  opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */
}
.heavy {
  opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */
}

 

/* hover시 다른 불투명도 적용*/
img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}

 

색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다.

현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면,

텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다.

큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

 

https://developer.mozilla.org/ko/docs/Web/CSS/opacity

opacity - CSS: Cascading Style Sheets | MDN

CSS content 속성

https://velog.io/@dev-tinkerbell/CSS-Content-%EC%86%8D%EC%84%B1

CSS Content 속성

+다음에 필요할 때 그 때 공부하기