opacity

엘리먼트 전체의 불투명도를 조절하는 속성이다.
우리가 색상의 불투명도를 rgba의 alpha값으로 조절했었는데 이것은 색상 뿐만 아니라 그 엘리먼트 자체의 불투명도를 조절하는 것이다.
alpha값과 마찬가지로 0~1까지의 값을 집어넣어서 조절한다.

transition

transition은 css의 속성이 변경될 때, 애니메이션 속도를 조절할 수 있다.
본래에 hover시 검정색 block을 빨간색으로 바꾼다고 했을 때, 우리는 이렇게 표현한다.

하지만 transition속성을 적용한다면 검정색에서 빨간색을 서서히 바뀌게하는 효과를 낼 수 있다.

transition: background-color 1s

transition: (적용할 속성) (재생 시간)

이런 형식으로 사용한다.

div: hover에 사용하면 안되는 이유

div{
  width:300px;
  height:300px;
  background-color:black;
}

div:hover{
  background-color:red;
  transition: background-color 2s;
}

여기서 조금 더 직관적으로 transition을 :hover에 집어넣으면 안되는지 의문을 가질 수 있다. 하지만 이렇게 되면 커서가 block갔을 때는 transition이 잘 작동하지만 커서가 block을 떠나는 순간 transition이 작동하지 않기 때문에 빨간색에서 검정색으로 바뀔 때에는 기존처럼 바뀌게 된다.

transform: scale

우리가 position할 때 배웠던 transform:translate ~;와 비슷하게 이것은 엘리먼트의 크기를 변경시켜주는 속성이다.

transform: scale(X축을 몇 배로, Y축을 몇 배로)
transform: scale(전체를 몇 배로 배로)
transform: scaleX()<----X축 방향으로만 바꾸고 싶을 때, scaleY()<---Y축 방향으로만 바꾸고 싶을 때

이런 형식으로 사용한다.

-> transition속성 적용도 가능하다.

z-index

z-index란 흔히 말해서 레이어의 순서를 바꾸는 역할을 한다. 3차원의 z축에 레이어의 깊이를 결정하는 속성이다.
우리가 html상에서 태그를 겹치게 표현한다면 나중에 작성된 코드가 더 위에 표시되게 된다.

z-index: ~; "~는 숫자가 들어간다."

이런 형식으로 사용하며 z-index의 숫자가 상대적으로 높은 것이 나중에 표현된다.

중요한 것은 z-index는 position속성이 static이 아닐 경우에만 적용된다.(왜냐하면 position이 static인 요소들만 있다면 요소들이 겹칠 이유가 없기 때문이다. <- 2차원, 밑에서 나오겠지만 예외가 있다.ex)scale속성)
z-index의 기본값은 auto이며 엘리먼트들이 모두 auto일 때에는 본래의 규칙으로 작동한다.

흐려지고 text를 띄우는 이미지 효과 구현

아래 코드처럼 마우스를 가져다댔을 때, VIEW라는 글씨가 나타나고 이미지가 흐릿하게 바뀌는 효과를 구현해보자.

<div>
  <img src="https://picsum.photos/id/188/500/500" alt="">
</div>

div {
  width:500px;
  position:relative;
  /*이 div가 유령의 집이 되어 before태그와 after태그를 div태그 안에 표현한다.*/
  cursor:pointer;
}

div > img {
  width:100%;
  display:block;
  /*이미지의 여백을 없애기 위함이다.*/
}

div::before {
  content:"VIEW";
  /*div의 before태그에 "VIEW"라는 컨텐츠를 집어넣는다.*/
  color:white;
  /*"VIEW"의 색상을 하얀색으로 만든다.*/
  position:absolute;
  /*"VIEW"의 위치를 사진(곧 div태그)의 가운데에 배치하기 위하여
  div에게는 relative, before태그에게는 absolute를 부여한다.
  (유령의 집으로 만드는 것)*/
  top:50%;
  left:50%;
  transform:translateX(-50%) translateY(-50%);
  /*"VIEW"를 가운데로 배치*/
  z-index:1;
  /*"VIEW가 배경보다 앞에 나와야하기 때문에 z-index값을 0인 after보다 큰 1을 준다."*/
  border:3px solid white;
  padding:10px;
  border-radius:10px;
  font-weight:bold;
  /*"VIEW border만들기, 글자 굵게"*/
  opacity:0;
  /*이 "VIEW"의 투명도를 0으로 만들어서 보이지 않게 만든다.*/
  transition:opacity 1s;
  /*opacity속성에 적용되는 속도를 부여한다.*/
}

div::after {
  content:"";
  /*div의 after태그에 공백을 집어넣어서 넓이를 늘릴 수 있게 만든다.*/
  background-color:rgba(0,0,0,0);
  /*기본 배경색을 투명색으로 설정한다.*/
  transition: background-color 1s;
  /*background-color속성에 적용되는 속도를 부여한다.*/
  position:absolute;
  /*div태그를 relative, after태그에 absolute를 부여함으로써 전체를
  덮고있던 배경색이 div태그(곧 img)만을 덮게 한다.(유령의 집으로 만드는 것)*/
  top:0;
  left:0;
  width:100%;
  height:100%;
  /*넓이를 가득차게 만드느 과정*/
}

div:hover::before {
  opacity:1;
  /*before태그("VIEW"글자)의 불투명도를 1로 만들어 평소에는 opacity가
  0이어서 보이지 않던 "VIEW"글자를 :hover시에 투명하지 않게 만들어 보이게 만든다.*/
}

div:hover::after {
  background-color:rgba(0,0,0,0.7);
  /*처음에는 배경색이 0이던 after태그를 :hover시 조금은 더 어두운 색상으로 만든다.*/
}

만약 div::before태그에게 z-index값을 주지 않는다면

배경인 after태그가 나중 레이어에 표현된다.

흐려지고 커지는 이미지 효과 구현

이번에는 마우스를 가져다 댔을 때, 이미지가 커지면서 흐려지는 효과를 구현해보자.

<div>
  <img src="https://picsum.photos/id/188/500/500" alt="">
</div>

div {
  width:300px;
  overflow:hidden;
  /*img가 scale로 커져서 div태그의 너비인300px을 넘었을 때 넘는 부분을 보이지 않게 만든다.
  만약 이 코드가 없다면 이미지는 300px을 넘어 그냥 1.5배로 커진다.*/
  position:relative;
  /*배경에 position이 absolute인 before태그를 포함시키기 위해서 relative로
  만든다.*/
}

div > img {
  width:100%;
  display:block;
  /*이미지의 여백을 없애기 위함이다.*/
  transition: transform 1s;
  /*transform:scale속성이 적용될 때 시간을 부여한다.*/
  z-index:-1;
  position:relative;
  /*기존이 position이 static인 상태에서는 z-index값이 적용되지 않는다.
  하지만 transform속성의 특성상 scale로 요소의 크기를 키우게 되면
  absolute인 before태그보다 나중에 표현되게 된다. 그래서 position:relative
  를 부여한 뒤에 z-index의 값을 -1로 표현해 줌으로써 :hover시에 before태그보다 깊은 쪽에 표현되게 한다.*/
}

div:hover > img {
  transform:scale(1.5);
  /*:hover시 img의 크기를 1.5배 키운다.*/
}

div::before {
  content:"";
  /*div의 before태그에 공백을 집어넣어서 넓이를 늘릴 수 있게 만든다.*/
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  /*absolute가 되어 속성이 relative인 div태그를 가득 채운다. */
  background-color:rgba(0,0,0,0);
  /*기본 배경색을 투명색으로 설정한다.*/
  transition:background-color 1s;
  /*background-color속성에 적용되는 시간을 부여한다.*/
}

div:hover::before {
  background-color:rgba(0,0,0,0.5);
  /*처음에는 배경색이 0이던 after태그를 :hover시 조금은 더 어두운 색상으로 만든다.*/
}