JAVASCRIPT#35 - css 세로정렬, html 요소 움직이기

No turning back from this party, Put you through enough to come play

JAVASCRIPT#35 - jQuery와 css에 대하여

1. jQuery를 통해 CSS 값 변경,접근 하는 방법

- $(셀렉터).css({css내용});

2. offset vs position

- offsent 오프셋이란 무엇일까? 오프셋은 상대위치가 아닌 document(전체) 기준 절대위치를 가져온다.

- 반면 position은 부모 엘레멘트를 전체로 잡고 위치를 가져온다.

3. CSS 내용 세로 정렬하기 ★

display: flex;
align-items: center;

justify-content: center;

4. CSS 왼쪽위가 아니라 중심점 기준으로 움직이게 하기 

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

5. jQuery 이용해서 HTML 요소 움직이는 방법

- $(셀렉터).css({top:위치, left:위치}); html 요소이동은 jQuery를 통해서 css내용의 수정으로 해주면 된다. 

6. 선택한 요소로 반복문 돌리기 jQuery 셀렉터 반복문?

$(셀렉터).each(function(i, obj){})

each를 사용하면 선택된 요소들을 배열로보고 첫번째부터 순서대로 돌려가며 실행시킬 수 있다.

i 는 배열인수, obj는 돌리는데 사용할 객체자체를 의미한다. 생략가능한 부분.

랜덤 위치로 이동, 지정위치로 이동 jQuery를 통한 html 요소이동하기 예제

(+ 세로 정렬 중앙 정렬하는 방법)

CSS접근및 GPS 타겟팅 시스템.zip

빨간 칸들을 랜덤배치하고 클릭해서 지정한뒤 보라색이 그빨간색의 중심부분으로 이동하도록 함.

칸을 중간에 놓게하기위해서 보라는 top: 50%;left: 50%;transform: translate(-50%, -50%); 을 통해서 중심으로 이동하게 한뒤 빨간칸의 위치의 중심점으로 이동하게 만듬. 빨간색도 중심점으로 이동하게 만들려고 했으나 이는 이동할때 이야기지 자체 프로퍼티인 position 값을 바꾸진 못함. 즉 이동하는 주체인 보라돌이만 ㄱㄱ 

<추가글>

빨간박스 css설정에서 position: relative; 를 사용하면 이상하게 top(세로) 범위초과하는 버그 발생해서

absolute로 수정함. ㅡㅡ 기묘하다.