[CSS] hover,position...

float 요소가 왼쪽, 오른쪽으로 떠 있도록 지정해줌 // 끊어줘야함
left / right
clear 요소의 왼쪽 오른쪽에 부동 요소를 허용하지 않도록 허용
left / right / both(양쪽허용x)

text-align // 인라인 요소를 정렬
left / right / center 
margin: 0 auto; // 박스 요소를 가운데 정렬


스티커 사용(head에 삽입)
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<i class="material-icons">menu</i>


float사용시 class명을 입력하고 부모요소에 입력하면 자동으로 끊어줌

  .clearBoth::after{
        content: "";
        display: block;
        clear:both;
    }

:hover 요소에 마우스를 올렸을 때 스타일을 지정
1) 선택한 요소
2) 선택한 요소의 하위요소


position 속성 html 문서 상에서 요소가 배치되는 방식을 결정
static 기본값 / html문서 상에서 원레 있어야 하는 위치에 배치하는 방식
relative 원레위치를 기준으로 상대적으로 배치하는 방식
absolute 원레위치 기준이 아닌 브라우저를 기준으로 배치하는 방식
fixed 스크롤시 고정된 위치에 배치하는 방식(홈페이지의 메뉴 같은 느낌)

top : 위쪽에서 요소의 위치를 지정
left : 왼쪽에서 요소의 위치를 지정
right : 오른쪽에서 요소의 위치를 지정
bottom : 아래쪽에서 요소의 위치를 지정

left 50 top 50 가 x50px y 50px 위치
bottom과 right는 바닥에서 0px 오른쪽끝에서 0px로시작
사이즈를 주지않고 4개의 값을줘서 사이즈설정가능
부모요소에 position:relative; 를 주면 absolue값으로 브라우저 기준이었던 자식요소를 부모요소를 기준으로하도록 만들 수 있다.

z-index position으로 겹쳐진 요소에서 z-index: 10;와 같이 값을 줘서 위아래를 변경할 수 있다.(position)요소가 들어 가 있어야 사용이 가능하다. z-index값만으론 변하지않음

 

transition / 애니메이션을 만들어줌
transition-property 트렌지션을 적용해야하는 css속성명을 지정
transition-duration 트렌지션이 일어나는 지속 시간을 지정
transition-timimg-function 트렌지션이 일어나는 시간함수를 지정



transform
transform: translate(x,y) 위치를 이동할때 사용
transform: scale(x,y) 크기 조정
transform: rotate(45deg) 45도 회전
transform: skewX(45deg)