국비 22일차

JAY·2022년 10월 25일
1

국비 공부

목록 보기
22/86

sftp

sftp 확장 프로그램

local에 우클릭하면 sync 설정이 뜬다

local -> remote
remote -> local

자신에게 맞는 선택한 후 동기화 시켜서 작업하면 훨씬 편하다

JS

jQuery
$(document).ready(function(){}); 화면이 열리자마자 바로 실행 => 그래서 여러개 가능

Vanilla
window.onload(function(){}); 과 비슷하지만 onload는 한 번밖에 못 씀
화면이 다 준비됐을 때 돌기 때문

jQuery

e => event (e로 통용되는 중)
.depth a 중에서 click된 것 하나만 골라내서 function 작동

.preventDefault(); => 디폴트값 막는다
=> a 태그나 checkbox, input, form의 sumbit 등 제출/이동되는 인라인 태그들이 이 기능을 가질 수 있다 (이러한 것들을 막기 위해)
접근성 위해 a 태그로 처리해야 함 => 이동 후 그 페이지 설명이 들어감

attr => attribute (속성)
.depth1의 #sec1을 선택했을 때,
$(this).attr('href') => "#sec1" (typeof => string)
$($(this).attr('href')) => $("#sec1")

  • $('a').attr('href','#none')
    => 모든 a태그 속성 href에 #none을 넣어놓아라

  • $('a.navi').attr('href', $(a.gnb).attr('href'))
    => class가 navi인 a태그의 속성 href에 class가 gnb인 a태그의 href 값을 넣어라

  • $('a.navi').attr('href')
    => class가 navi인 a태그의 속성 href를 데려와라

  • $('img').attr('src', '/over.jpg')
    => 모든 img태그 속성 src에 over.jpg을 넣어놓아라

  • $('img:not(.logo)').attr('src', '/img/noimg.jpg')
    => class가 logo인 img태그를 제외한 모든 img태그 속성 src에 img 폴더 안 noimg.jpg을 넣어놓아라

  • $('[src$=".jpg"]').addClass('d-none')
    $ => 끝
    $= 끝이 같다!!
    src$=".jpg" src 속성 끝에 값이 .jpg와 같은 태그에 class="d-none"을 넣는다
    보통 img의 속성에 src와 .jpg/png 등이 있기 때문에 img를 생략해도 된다

  • $('[src$=".jpg"] + span').addClass('d-none')
    src 속성 끝에 값이 .jpg와 같은 태그 다음에 오는 span 태그에 class="d-none"을 넣는다
    속성은 [ ] 로 싸줘야 함!!

  • $('[href^=".jpg"]').attr('target','_blank')
    ^ => 시작
    href 속성 시작 부분에 값이 http와 같으면 속성 target_blank를 넣는다

  • $('[type="text"]')
    form태그 안 input : 장바구니 버튼, 회원가입 버튼, 로그인 버튼 => 값을 submit
    a태그: 회사소개 버튼

  • $('[type="radio"]')
    input태그의 radio

  • $('[type=button]') == $('button')

.offset().top => 상단 위치값
.offset(); 위치를 계산하는 함수, topleft(시작점) 값밖에 없다
그래서 targetPos에는 number가 들어가 있다

'scrollTop'에 상단 위치(targetPos)를 넣어주어 animate되도록 함
scroll에 bottom은 없다!! 가변적이므로 시작점인 top만 표현

.animate({'대상': 값},속도)
명확한 수치가 있는 것들만 애니메이션 됨

  • $('#pop').animate({'top':-50},400)
    => #pop을 가진 태그의 top 값을 -50하도록 0.4초 동안 애니메이션 해라~~

자바스크립트 최소한으로 => 태그로 조정할 수 있으면 태그로 한다

0개의 댓글