내일배움카드(재직자) 웹표준 수업 / 4월4일 (월) 13회차

 

 

 

<transition 전환효과(값이 변할때 서서히 변하게 해줌)>

trnasition-property: 서서히 변하게 할 속성
trnasition-duration: 변하는 시간(초단위)
trnasition-timing-function: 속도를 완만하게 
    속성값 ▶ ease: 서서히 빨라지고, 서서히 느려짐(기본값, 생략가능)
              ▶ linear: 일정한 속도로 전환효과 만듦

▶ ease-in: 느리게 시작
▶ ease-out: 느리게 끝
              ▶ ease-in-out: 느리게 시작하고, 느리게 끝
trnasition-delay: transition이 작동하기 전 지연시간(0~1초 사이 값으로 입력)

 

 

*hover로 또 따로 나눠서 적는 이유는 트렌지션이 적용 되고 안되고를 구분해서 적어줘야 하기 때문이다

변화가 되어 보여줄 부분은 :hover이고 어떤 transition에 어떤값을 넣을 건지는 :hover가 안붙은

원본 태그에 transition값들을 넣어준다

 

 

 

(예제 태그)

.tr{
   width: 200px; height: 200px;
   background-color: red; color: white;
   font:lighter 30px "나눔고딕";
   transition-property: background, font; ☞어떤 속성들을 변하게 해줄건지 태그의 이름을 작성(속성값은 래                                                               hover 태그에)
   transition-duration: 2s;  ☞트렌지션 되는 초수를 지정해준다
}

.tr:hover{
   width: 100px; height: 100px;
   background-color: blue;
   font: bolder 40px "나눔고딕";
}

---

li{
   display: inline-block;
   background-color: yellowgreen; 
   text-align: center;
   width: 120px; height: 20px;
   padding: 15px;
   transition-property: background, border-radius;
   transition-duration: 0.5s, 1.5s;  ☞초수를 따로따로 적어주면 적용되는 초수가 각각 다르다. 다만,시작하는                                                시간은 동일하고 끝나는 시간이 달라지는것이다. (초수 느린게 느리게 끝남)
   transition-delay: 0.5s; ☞트렌지션들의 전체 시작시간을 연기함. 지정한 초수만큼 멈춰있다가 시작함
   transition-timing-function: ease-out; ☞서서히 끝남
}

li:hover{
   background-color: yellow;
   border-radius: 25px; border: 1px double black;
}


★transition은 홈페이지에서만 거의 쓰인다. 모바일에선 누르고 있을수가 없기 때문에..요샌 잘 안쓴다고★

 

 

 

*list-style-position: inside;  > li 점들 안으로 밀어주는 태그

 

 

※미디어 쿼리 : 홈페이지를 보는 기기(전자기기)의 가로 크기에 따라서 화면에 맞는 홈페이지가 나오도록 해줌

<작성방법>
@media (화면 가로크기) {
선택자{속성:속성값;}
}

*min-width: 최소 화면크기 / max-width: 최대 화면크기


(예시)
@media all{/* 핸드폰에서 홈페이지 볼때*/  ▶all은 모든 화면크기에서 적용되는 스타일
   li{
      background: lightyellow;
      width: 150px; 
      height: 30px;
      padding: 15px;
      text-align: center;
      list-style: none;
      border: 1px solid black;
      margin-bottom: 5px;
      font: bold 30px "나눔손글씨";
      }
}

@media (min-width:769px) and (max-width:1200px){   ▶가로 769~1200 크기의 화면에서 적용되는 스타일
   li{
      background: yellowgreen;
   }
}


@media (min-width:1201px) {  ▶가로크기가 최소 1201부터 적용할 스타일
   li{
      background: lightblue;
      display: inline-block;
      border: 1px double blue;
   }
}