[20220928] jQuery

kangsun·2022년 9월 28일

jquery

jQuery

목록 보기

3/3

14_offset과 position

✳️ 특정요소의 위치값을 얻는 방법 (position, offset의 기준)

↳ position의 기준점 ( <body>태그 기준)

↳ offset의 기준점 (브라우저 기준)

id="box" 부분 작성

`<body>`

`<style>`

가로너비 : 600px
높이 : 400px
위치 : 고정
왼쪽에 : 50%
위쪽에 : 50%
바깥쪽 여백: 위-200px 오른쪽0 아래0 왼쪽-300px
배경색 : gainsboro

margin과 padding의 차이 ?

- margin : 바깥쪽 여백
- padding : 안쪽 여백

position: fixed ?
- 화면을 위아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI
- 라이브 채팅 버튼을 구현할 때 많이 쓰이는 기법

브라우저 확인

id="child"

`<body>`

`<style>`

가로너비 : 200px
높이 : 200px
위치 : 상대적으로 배치 (<dib id="box"> 위치 기준으로)
왼쪽위치 : 200px
위쪽위치 : 100px
배경: #6cdaff
커서 : 포인터모양
박스그림자 : 위 오른쪽 아래 왼쪽, 위 오른쪽 아래 왼쪽

position: relative ?
- 요소를 원래 위치를 기준으로 상대적(relative)으로 배치
cursor: pointer ?
- 마우스 커서의 모양을 설정해준다.

브라우저 확인

[jquery] offset()과 position() 값 #child에 노출시키기

`<script>`

child를 클릭하면 기능을 수행한다.
offset변수에 child의 offset 값을 넣어주고
position변수에 child의 position 값을 넣어준다.

아무것도 들어가 있지 않은 msg변수를 생성해준 후
offset의 왼쪽 여백 msg변수에 넣어주고
offset의 위쪽 여백 값을 msg변수에 누적
position의 왼쪽 여백 값을 msg변수에 누적
position의 위쪽 여백 값을 msg변수에 누적해서

child의 msg값을 html에 출력한다.

⚠️ point

리턴자료형 : 객체 (left, top 속성)
➡️ left값과 top값만 반환된다.

브라우저 확인

position 기준점

↳ position의 값은 주어진대로 고정되어 있다.

offset의 기준점

↳ 브라우저를 확대하면 offset값이 크기만큼 바뀐다.
↳ offset은 브라우저 전체의 왼쪽 위가 기준점이다.

⚠️ point

굳이 위에 position, offset 사용하지 않고 sticky 속성 사용하면 쉬움.
position:fixed 와 :sticky의 차이
* position: fixed
- 페이지 화면 내 절대적인 위치에 고정
- 스크롤과 상관없이 항상 해당 위치에 고정
- fixed는 viewport에 고정
viewport : 화면 Display상의 표시 영역
ex) 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당

* position: sticky
- 스크롤을 따라 움직이다 내가 정한 offset에 닿으면 그 순간부터 fixed처럼 고정
- 가장 가까운 부모 element를 기준으로 배치
- 해당 조상의 스크롤 위치가 도달하면 그때부터 fixed처럼 지정한 위치에 고정되기 시작해서 해당 조상의 위치가 스크롤을 벗어나면 고정되던 위치가 사라진다
- scroll 박스가 offset 기준
- top, right, bottom, left 속성이 필수
ex) 각각의 콘텐츠마다 고정해야 되는 내용이 달라져야 되는 경우

15_스크롤이동

body

header, content, footer, topBtn 제작

2. CSS

2) #wrap

3) header

(1)

body
web

↳ 로고, box보기4까지 생성됨

(2)

↳ css 적용

(3) h1태그에 들어있는 로고 css

(4) #nav

↳ box보기 메뉴 가로로 정렬

✳️ #nav li.now a

jquery

✳️ #nav li -> 메뉴박스

↳ 객체를 넣을 수 있다.

↳ box보기를 누르면

↳ 객체가 넘어온다.

* .preventDefault()
↳ box보기를 눌러도 링크로 이동하지 않도록 막아주는 기능

✳️ 사용자가 클릭한 li요소의 index 얻기

4) content

(1)

body

(2)

✳️ 박스 top에 고정시키기

↳ 여기 #header - height:122px을 빼고 여백을 줘야한다.

↳ Box2번은 722에서 122를 빼면 top에 고정시킬 수 있다.

✴️ jquery

✳️ 각 id=box1~box5의 윗쪽 여백 확인 후 변수처리

↳ 위쪽 여백 px확인
↳ #box(n)의 n을 변수처리

✳️ 스크롤 애니메이션 처리

↳ scrollTop:bTop-122

-122는 id=box1의 여백을 위에서 확인 후 그 값을 빼주면 box2,3,4,5 값이 top으로 고정된다.
300은 애니메이션의 실행속도 값

웹페이지 소스를 오픈하려면

↳ I로 시작하는 경로는 나만 볼 수 있다.

↳ 경로를 http:// 프로토콜로 시작해야 공개할 수 있다.

vscode 에서

live server 를 받으면 코딩을 하면 실시간으로 결과를 보여준다.
live server 설치
File → Open Folder → jQuery 폴더 선택
해당 파일 우클릭 → Open with Live Server

↳ liver server로 실행하게 되면 경로가 127.0.0.1로 시작하게 된다.

✅ 에러: 지금 이 페이지가 작동하지 않습니다.
웹페이지에 열리지 않을 경우
File → Preferenced → Settings → live server 검색
→ Live Server → Settings: Use Local lp 체크표시
Us Local IP as host

✅ 크롬으로 여는 방법
https://yongku.tistory.com/entry/vscode%EC%97%90%EC%84%9C-live-server-%ED%81%AC%EB%A1%AC%EC%9C%BC%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95