요번 주는 광복절과 대체휴무일 이 월요일에 적용되어서 화요일까지는 수업이 없는 날이라서
저번주에 배웠던 걸 위주로 더 알아보는 시간을 가지도록 할 것이다.
1.transtition 시간을 적용해 주는 속성이다.
-display와 background에서는 transition이 적용이 안된다.
-opacity 나 transform에서 transition을 주도록 하자.
2. 이미지 적용 시
-img태그로 이미지 줄 때는 width값을 설정해 줘야 되는데 height 값은 설정 안 해줘도 이미지가 적용이 된다.
-background로 이미지 줄 때는 width*height값을 설정해 줘야지 이미지가 적용이 된다.
ex) 화면 넓어질 때 안에 img 커지게 하려면 부모태그에 width:100% , height:32.5vw (이렇게 화면대비 얼마인지 구해야 된다)
-img태그는 width 값에만 % 센트 주면 되고 , background는 width, height 값둘다 % 값 줘야 한다.
3. 웹 2를 배워감에 있어서 헷갈리는 게 있으면 우선 css 적용 전에 움직이기 전에 화면을 먼저 만들어 놓고 css로 hover시 작동하는 걸 적용해 보자.
4. 이미지 가운데 정렬 하는 법
-부모 태그에 포지션 relative를 적용, 이미지 박스에 absoult를 주고 left:50% , top:50% 주고 transform:translate (-50% ,-50%) 이렇게 주면 가운데 정렬가능하다.
-calc로 사용 시 ( 50% - (이미지 크기 /2 ) 이렇게 구해도 된다.
5.transform 에서 hover 쓸 때 원래 태그에 translate 썼으면 hover 할 때도 translate 적용해 준다.
scale 썼으면 hover 할 때도 scale 적용해 준다.
rotate 썼으면 hover 할 때도 rotate 적용해 준다.
-이렇게 적용하고 안 쓰는 속성은 '0' 값을 0으로 설정해 주고 쓰는 속성만 따로 값을 주고 하는 식으로 적용하자.
6.rotate 줄 때 글씨가 뒤집어져 나올 때는 원본 태그에다가 rotate(100 deg) 우선 적용해 뒤집어놓은상태서 hover시 rotate (100 deg) 주면 글씨가 hover 하면 똑바로 나올 것이다.
-backface-visibility:hidden -> 도형 뒷면 자체를 안 보이게 함.
7.transform 3D 주려면 부모, 자식으로 만들고 , 부모에 perspacing(px) 주고 자식에 갑을 입력한다.
-perspacing(px) 은 원근감을 나타내고 숫자가 클수록 눈에서 멀리 있다.
-'부모-자식-손자'인 구조에서 부모에 perspacing(px) 주고 손자까지 적용해주고 싶을 때는 자식 박스에 transform-style:preserve-3d를 적용해 주면 손자박스까지도 원근감이 적용이 된다.
8.transition 줄 때 all 말고
-position 쓸 때는 사방값에 시간 줄 수 있고, ex) top 1s
-그 외에 transform , width, height, opacity까지 세세하게 정해서 시간적용가능하다.
9.checkbox에 :checked라는 가상클래스 쓸 때는 checkbox에 파란색 표시 들어오면 체크가 된 상태이고, 다시 한번 누르면 checkbox에 파란색 표시가 체크가 없어지면 체크 안 된 상태이다.
(이원리를 기억해 두면, checked 시 delay 적용과 checked 안됬을 시 delay적용을 다르게 하여서 체크되고 안될 때 시간을 적용할 수 있을 것이다.)
10. 위치 옮기는 건 transform:translate 말고도 position속성으로 사방값 활용해 위치를 옮길 수 있다
- 이 2개를 따로 쓰는 이유는 transform : translate, rotate를 주었을 시 이건 하나하나 transition을 적용을 못할 것이다.
- 하지만 position:top으로 위치이동하고 transform:rotate로 각도를 주면 이건 transition:top 1s transform 1s 이렇게 각각 위치랑 각도에다가 시간을 줄 수 있을 것이고 delay 시간도 따로 줄 수 있을 것이다.
11. 이미지에 hover 시 필터 효과 주는 법.
-이미지 부모박스 안에 이미지 박스 말고 다른 박스 만들어 background-color :silver , opacity:0.5 이렇게 투명도 정해놓으면 이미지에 필터효과 준 것처럼 보인다.
-outer라는 부모박스에 배경색 주고, img 박스를 opacity :0.5로 img 박스를 흐리게 적용해서 뒤에 있는 outer 박스에 배경색이 투명하게 보이게 해 줄 수 있다.
12. 가상요소 활용해 테두리 만들기
-. outer::before {
content: "";
-outer::after 활용 시 z-index 안 써도 된다. 왜냐면 after 에적용시 박스 뒤에 (위에) 위치할 것이기 때문에 z-index로 안 해줘도 테두리가 잘 보이는데 , before 은 박스 안쪽에 숨겨져 있기 때문에 z-index로 뺴줘야한다.
-z-index는 position 쓸 때만 쓸 수 있다.
'국비교육' 카테고리의 다른 글
| 국비지원 22일차 (0) | 2023.08.17 |
|---|---|
| 국비지원 21일차 (0) | 2023.08.16 |
| 국비지원 20일차 (0) | 2023.08.12 |
| 국비지원 19일차 (transform, transition, hover을 활용실습) (0) | 2023.08.10 |
| 국비지원 18일차(font,접두사,gradient,transform,transition) (0) | 2023.08.09 |