TIL 06

트랜지션 transition

1. 스타일이 바뀌는 시간에 따라 스타일 속성이 바뀌는 것

2. transition-property 속성, transition-duration 속성 :
   쉼표(,)로 구분하여 여러 개 지정할 수 있다

3. transition-timing-function 속성 : 트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해서 전체 속도 곡선을 만들 수 있다

4. transition 속성
   1) 트랜지션의 적용대상이 전체이면서, 각각의 진행시간이 동일하다면 → 한꺼번에 지정하는 것이 편리하다

   2) 속성값을 지정하는 순서는 따로 없으나,
   시간을 사용하는 속성이 2개 (transition-duration, transition-delay) 이므로
   앞에 오는 시간값을 transition-duration
   뒤에 오는 시간값을 transition-delay 속성으로 간주한다

5. 트랜지션의 대상

.box {
	transition: 2s ease-in;
}
.box:hover {
	/* 여러 스타일 속성들 */
}

box:hover { } 안에 지정한 스타일 속성들이 모두 트랜지션의 대상으로 알고 있다

z-index

1. 기본적으로 위치한 레이어(Layer 0) 이외의 추가적인 레이어를 생성하고 박스를 위치할 수 있다

2. 그래서 이 값은 해당 요소의 z축 상의 위치를 나타낸다

3. 레이어의 z축 위치는 레이어가 쌓일 때, 쌓인 순서를 결정하는 하나의 정수로 결정된다 (양수, 음수 모두 OK)

4. 특정한 쌓임 순서를 적용하고 싶다면, 먼저 해당 요소에 position 속성을 지정해야 한다

5. 높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 위치한다

   MDN z-index 적용 참고 사이트

스타일 속성은 이렇게 지정해야한다는 공식이나 법칙이 있는 게 아니라
html 웹 문서의 구조를 바탕으로 그때 그때 지정해주도록 하자
(강박증??? 이 생기지 않도록 주의하기)

Q. caption요소에는 어차피 h2요소와 p요소만 존재하는데
스타일 지정할 때 h2, p로 따로 구분해준 이유는 무엇일까

<style>
  .prod-list .caption h2, .prod-list .caption p {
  	color: #fff;
  	text-align: center;
  }
</style>

<div id="container">
  <ul class="prod-list">
    <li>
      <img src="images/prod1.jpg">
      <div class="caption">
        <h2>상품 1</h2>
        <p>상품 1 설명 텍스트</p>
        <p>가격 : 12,345원</p>
      </div>
    </li>
  </ul>
</div>