할 것:
이력서
잘정리. jquery에
나중에 포폴에 쓸 유용 애니있음
sample30
포샵 쓸만한것 제작
?? :
poa 를쓰면 영역이 사라지나부당..? 그래서 하위 content에 width height 잇어도 dpb 해줘야하나벼
| sublime3 셋팅 (0) | 2018.02.06 |
|---|---|
| pro (0) | 2018.02.06 |
| ㅇㅇ (0) | 2018.02.01 |
| 프로가 되라 js애니메이션 둘쨋날 (0) | 2018.01.30 |
| js 애니메이션 시작의 날 (0) | 2018.01.29 |
분석
:자주 틀리는거
px안넣는것.
닫는태그 틀려서 글씨색 바뀐거 눈치못채는거
after 스펠링
display none은 애니 안됨
transition은 구 ex9에서 안되기때문에,,,
하지만 안되므로 js animaiton을 . 호환성때문.
ajx
php 다른 데서 텍스트를 가져옴
bottom:auto = none 이란뜻.!
할 것:
홈페이지 꾸미기 윅스나 요런거 참고나 .. .( code )도 예쁘게 꾸며주는 거 있음..
사이즈 width height
홈피 메이
codepen
이번주 숙제
https://tympanus.net/Tutorials/CircleHoverEffects/index4.html 랑
codepen 레슬링
| pro (0) | 2018.02.06 |
|---|---|
| rd (0) | 2018.02.02 |
| 프로가 되라 js애니메이션 둘쨋날 (0) | 2018.01.30 |
| js 애니메이션 시작의 날 (0) | 2018.01.29 |
| 01.26 (0) | 2018.01.26 |
Transform: {translate} {scale} {rotate} {skew}
rotate /scale/ skew 의 transform-origin은 center, center (50%, 50%) 이다 !!
translate 에 하나의 요소만 있으면 x축만을 의미한다.
skew또한, x축만 을의미한다. transform:skew(왼쪽으로 기울임+,상-/하+)
rotate는,회전의 각도가 양수이면 시계 방향으로 회전하고 음수이면 시계 반대방향으로 회전한다.
해당축은 고정되어있고, 원하는 각도 만큼 반대 축이 돌아간다고 생각하면 됨.
scale는, y축 확대를 의미한다.
2차원 변환 함수
키워드 이름 | 설명 |
translate(translate X, translate) | 특정 크기만큼 이동합니다. |
translateX(translateX) | X축으로 특정 크기만큼 이동합니다. |
translateY(translateY) | Y축으로 특정 크기만큼 이동합니다. |
scale(scaleX,scaleY) | 특정크기만큼 확대 및 축소합니다. |
scaleX(scaleX) | X축으로 특정 크기만큼 확대 및 축소합니다. |
scaleY(scaleY) | Y축으로 특정 크기만큼 확대 및 축소합니다. |
skew(angleX, angleY) | 특정 각도만큼 기울입니다. |
skewX(angleX) | X축으로 특정각도만큼 기울입니다. |
skewY(angleY) | Y축으로 특정각도만큼 기울입니다. |
rotate(angleZ) | 특정 각도만큼 회전합니다. |
3차원 변환 함수
키워드 이름 | 설명 |
translate3d(translate X, translateY, translateZ) | 특정 크기만큼 이동합니다. |
translateX(translateX) | X축으로 특정 크기만큼 이동합니다. |
translateY(translateY) | Y축으로 특정 크기만큼 이동합니다. |
translateZ(translateZ) | Z축으로 특정 크기만큼 이동합니다. |
scale(scaleX, scaleY, scaleZ) | 특정크기만큼 확대 및 축소합니다. |
scaleX(scaleX) | X축으로 특정 크기만큼 확대 및 축소합니다. |
scaleY(scaleY) | Y축으로 특정 크기만큼 확대 및 축소합니다. |
scaleZ(scaleZ) | Z축으로 특정 크기만큼 확대 및 축소합니다. |
rotate3d(rotateX, rotateY, rotateZ) | 특정 각도만큼 회전합니다.. |
rotateX(rotateX) | X축으로 특정각도만큼 회전합니다. |
rotateY(rotateY) | Y축으로 특정각도만큼 회전합니다. |
rotateZ(rotateZ) | Z축으로 특정각도만큼 회전합니다. |
| 백그라운드 블렌드 모드 섞는 방법 (0) | 2018.06.11 |
|---|---|
| margin 통합 (0) | 2018.06.11 |
| line-height 속성 (0) | 2018.01.11 |
| overflow 속성 (0) | 2018.01.11 |
| how to use pseudo-class :not with :nth-child (0) | 2018.01.11 |
calc는 js에서는 안먹음
콜백함수 ~??
레슬링 이번주 금까지~~
할 것 :
이력서
홈페이지 사진변경
codepen
+a html
계획 :
6~6:30 복습 할 수 있는것 한가지
7시~8시 이력서
8시~8:30 기능사
남은시간은 자유~!
텍스트를 가운데 정렬하는 방법
블록요소를 가운데 정렬하는 방법 7가지 (샘이 알려준)
1 블록 구조일떼 h100vh lh 100vh margin 0 auto
2 인라인 구조일때 tac h100vh lh 100vh
3. 포지션1 width 를 알고있을때 poa l50 t50
4 포지션2 width 를 모를때 poa l505 t50% transform:translate(-50%,-50%);
4-2 poa t50p w100p transform:translatey(-50%)
5 포지션3 poa t0 b0 l0 r0 margin:auto;
5-2 포지션, 영역 살아있게, por t50p w100p transform:translatey(-50%)
6. display: flex; 이용 , justify-content:center; , align-items:center height:100vh
7 table을 이용. .table { display: table; width: 100%; height: 100%;} .icon-wrapper { display: table-cell; text-align: center; vertical-align: middle; }
참조 자세함