Position

▼이미지와 글자를 이동
▷position
-position:relative - 움직이는박스의 부모

-position:absolute - 움직이는 박스에 적용
-position:fixed - 현재 화면에 고정
-좌표: left / right / top / bottom

 

▷relative

-크기를 인식할 수 있어 자리를 차지함

-위치값을 줄 수 있음 (top, bottom, left, right)

-absolute가 움직이는 범위의 기준이됨

▷absolute

-relative 속성을 준 원하는 태그안에 있도록 구조를 짜야함
-공중에 떠 있는 상태로 (블록요소가 아님) 크기가 인식안됨
-absolute시 범위를 인지하지 못함, 직접 크기를 줘야함

-위치값을 줄 수 있음 (top, bottom, left, right)

 

▼header 고정시키기
▷header{position:fixed; z-index:-; background:#---;}
-visual{transform:translateY(header 높이);}

 

▼이미지 기준점 이동
-기본 기준점은 좌측 상단이다

▷회전 기준점

transform-origin:X Y;

ㄴex)

transform-origin:top center;

transform-origin:30px 60px;

 

▷ 배경 이미지 이동

background-position: 'center / top / bottom' ;

 

 

▼좌표 이동
▷transform('변형'): translate('좌표') 'x'px, 'y'px;
 ㄴex)
    transform:translate -50%, -50%
-단위는 % 나 px도 사용가능

▷translate 뒤에 'X' 나 'Y' 입력하면 특정 좌표만 이동 가능
 ㄴex)
    transform:translateX(50px);

 

▼바로 밑에 있는 자식 선택
▷.부모>자식
-부모 바로 밑에 있는 자식만 선택
 ㄴex)
    .wrap>li