ETC>>>>>>>>>
-box shadow
그림자 효과
-opacity 투명도
-overflow
-transform
-visibillity
box shadow>
x축 | y축 | 흐린정도 | 그림자사이즈 | 색상
overflow>
visible | auto | scroll | hidden
visible 기본값 (그냥 내비 두는 옵션 , 그냥 있는 그대로 보여준다!)
auto
넘쳐 흘럿을때 알아서 해라, (넘처흐르면 보통 스크롤로 되어버림..)
scroll
넘처흘럿을때 알아서 스크롤로 표시를 해라.
overflow-x: scroll;
overflow-y: hidden;
이런식으로 x축 y축 해서 설정가능,
hidden
넘처흘럿을때 숨겨라.
transfom >>>>>>>>>>>>>>>>>>>>>>>>
트랜스폼!!!!
변형하다.
요소를 2차원 혹은 3차원의 공간에서 변형을 할 수 있도록 도와주는 기능.
translate() | scale() | rotate()
주로 이것만알면됨.
이런 함수를 쓸 수 있다.
translate(x,y)
한마디로 옴길떄 사용,
보통 포지션 할떄 사용함,
내가 어떤 요소를 , 원하는 방향으로 위치시킬때 씀
다른 요소에 영향을 주지않음.
박스라는 클래스가있을때,
.box{
transform: translate(40px, 50px);
transform: translate(100%, 100%);
}
.box{
transform: translateX(-40px); //x축으로만,,,
transform: translateY(-40px); //y축으로만,,,
}
항상 , 자기의 원래 위치를 기억하고 있어서, 다른요소에 영향을 안미친다.
트렌스폼
스케일
scale(N)
자기 사이즈를 키우고 줄일때 쓰는 함수.
transform: scale(1.5, 1.5);
요렇게 x 축 y 축 설정가능하고
그냥 숫자쓰면 자동 x y 설정이됨
트랜스폼 로테이트
rotate(Ndeg)
요소 각도 돌려줄때 사용하는 함수
transform: rotate(45deg);
이런식이러 사용
숫자를 쓰고 deg 쓰면됨
margin-bottom: 20px;
마진 넣어도 되고 암튼 돌릴때 사용함,
아무튼
//////////
트렌스폼은 사실 많이는 사용 안하고,
주로
position: absolute;
가운데 배치할떄 주로 사용하고,
거의 사용은 안함.
visiblility
visible | hidden
오페시티 0 과 비슷한 상황을 연출
요소를 본디 자리는 유지하되 그냥 보이지만 않게 한다는것.
#box1 {
visibility: hidden;
}
참고로,
display: none;
과는 다르다.
왜냐면
디스플레이 넌은 박스의 존재를 없는듯이 취급하는거기때문에, 실제로 존재하지않게 되므로
옆의 요소들이 침범을 하게된다든지 그런상황이 됨.
