2022-05-12
box-shadow
대상{box-shadow: 5px 10px 10px blue;}
{가로, 세로, 블러효과, 내부그림자효과, 컬러;}
form style
input타입을 style에 지정하기 위해서는 아래 규칙대로 코드를 써야한다.
input[type=text]{}
input:hover, textarea:hover
hover는 마우스 오버 시켰을 때에 보이는 효과를 지정함
table style
{border-collapes: collapse;} 셀 병합
{border-bottom: 1px solid gray} 보더 아랫줄 긋기
:nth-child(2n){background: rgb(200,200,200);} 짝수만큼 배경색 지정
:hover{background: gray;}
{caption-side: boottom; line-height:2 캡션 위치와 간격
transform
적용하기 전에 미리 알아야할 것!
트랜스폼은 지원 브라우저별로 각자 명시해주어야한다. 최신 코드가 적용이 안 되는 경우도 있으므로 하위호환 가능하게 만드는 거다. 즉 실제 서비스 될 때는 아래 코드를 모두 입력해야함(...)
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
-moz-transform: translateX(50px);
-o-transform: translateX(50px);
transform: translateX(50px); /기본/
+어라? 9일차 수업을 들어보니 짧은 코드로 호환을 시켜주는 방법이 있다. 코드 내용은 복습하면서 추가. 필요한 것은 해당 링크 사이트의 자바스크립트(JS) 파일이다. 다운받자
이미지 확대, 축소
축소는 1미만 소수점을 쓰면 된다. ex (0.5)
:hover{transform:scaleX(1.5);}
:hover{transform:scaleY(1.5);}
:hover{transform:scaleXY(1.5);}
X, Y축을 하나만 이동하면 translateX, translateY 따로 지정하고, 함께 이동할 경우 translate만 써서 좌표를 한꺼번에 찍어주면 된다.
*transform: translate(10px, 20px);
기울임(skew)
콘텐츠 자체를 기울이는 것.
.skewx:hover { transform: skewx(20deg);}
.skewy:hover { transform: skewY(20deg);}
.skewxy:hover { transform: skew(180deg, 30deg);}
회전(rotate)
회전에는 기존 x축(가로), y축(세로)에 z축(높이) 도 추가할 수 있다. 평면적으로 회전시킬 거라면 그대로 쓰면 되지만, 3차원 회전을 쓰려면 {perspective:000px} 를 반드시 지정해줘야한다.
(perspective : 원근감)
.origin{ perspective:200px; }다양한 적용 속성이 존재한다
.rot:hover{transform: rotate(90deg);}
.rotx:hover{ transform: rotateX(45deg);}
.roty:hover{ transform: rotateY(45deg);}
.rotz:hover{ transform: rotateZ(180deg);}
.rotxyz:hover{ transform: rotate3d(2.5, 2.5, 2.5, 45deg);
모서리 기준으로 회전하는 방식도 있다.
회전 할 대상을 먼저 지정해주고, 이미지 변형의 시작점을 지정한다.
.bus{ transform: rotatez(5deg);}
.ltop .bus{ transform-origin: left top;}
.rtop .bus{ transform-origin: right top;}
.lbottom .bus{ transform-origin: left bottom;}
.rbottom .bus{ transform-origin: right bottom;}
이미지가 반응해서 동작되는 것들이므로 직접 눈으로 확인하는 것이 좋다.
Transition
transition-property 와 transition-duration(지속시간)을 지정해주어야한다.
첫째 예시
span{transition:font-size 0.3s;}
span:hover{ font-size: 500}
두번 째 예시
.box2{ transition-property: transform, width, heigth; transition-duration: 2s;} 먼저 프로퍼티와 지속시간을 지정한 뒤에,
box2:hover{ width: 300px; height: 300px; background-color: blue;}
마우스오버 이후에 대한 정보를 입력해야 된다.
위처럼 지정한 값(컬러나 스케일)을 따라 변형된다.
2s;와 같이 주어신 시간이 하나만 입력되어 있으면 가로 세로의 변환 시간이 같은 수치로, 즉 (2s, 2s)로 인식한다.
backface
3차원에서는 뒷면도 존재한다. CSS로 주사위도 만들 수 있음...ㅎ!
div로 박스를 만들면 대상이 3차원으로 움직이는 것을 쉽게 확인할 수 있다. perspective를 먼저 설정해주고 transform에서 회전해보자.
{backface-visivility:}에서 hidden;은 뒤집어진 대상을 숨기고 visible;은 그대로 보여준다.
어려웠던 점
아무래도 해당 동작들을 실행하기 위한 규칙들이 헷갈렸다.
어떤 동작 옵션을 쓸 건지 지정을 하고, 수치는 얼마나 늘어나고... 하는 용어를 입력하는 것에 어떤 태그는 사이에,가 들어가고 어떤 태그는 ; 가 들어간다. 물론 마칠 때 쓰는 것이 마침표지만, 여러 옵션을 넣을 때도 ;가 들어가니까 그게 헷갈렸던 것 같다.
그리고 생각보다 오탈자가 영향을 많이 준다. :를 쓴 줄 알았는데 ,나 .를 썼다든지... 그런 것들. 역시 기본이 중요하다
해결 방법
각 태그들이 어떤 식으로 묶이고 마무리 되는지 더 알아봤다. 보통 ,가 들어가는 경우는 한 옵션에 여러 의미를 주기 위한 것이고 ;가 여럿 들어가는 것은 그 각각의 옵션들의 설정을 마치겠다는 의미...인 것 같다. 각 속성 별로 존재하는 규칙에 익숙해지면(외우면..) 되겠다.
예를 들어
#graph:hover .bar{
transition-property: width, background-color;
transition-duration: width:600px; 3s, 3s;
}라는 명령어를
#graph:hover .bar{
width:600px; background-color;
transition-duration: 3s;
}위처럼 써도 똑같은 동작으로 적용된다.
소감
동작되는 것들이 나오니 훨씬 재미있다. 그러나 훨씬 복잡해지고 공간에 대한 생각도 필요해보인다.
반응형 웹에 많이 쓰일 것 같아서 최대한 잘 익혀두고 싶다.
