프론트엔드개발자가되는중

페이지가 실행되고 조그 특정 함수가 한 번만 실행되게 하고 싶었다. setInterval은 일정 시간을 간격으로 반복되는 함수이기에 적절하지 않은 것 같았다. 찾아보니 setTimeout이란게 있었다. 일정 시간 후에 함수를 한 번만 실행시켜주는 메소드다. setTimeout(실행함수, 밀리초); 실행함수 부분에는 익명함수를 입력하거나, 반복 사용될 수 있는 명령일 떈 함수로 지정하여 넣어 코드를 줄일 수 있다.

iframe으로 유튜브 영상을 가져올 때, 영상의 아이디 부분만 추출하고 싶었다. var video_attr = $('iframe').attr('src'); var id_start = video_attr.indexOf('embed/') +6; var id_end = video_attr.indexOf('?'); var id = video_attr.substring(id_start, id_end); ➜ 문자열에 특정 문자열 찾기 (indexOf) indexOf(시작점, 위치) var str = '자바스크립트'; //결과:'0' var indexOf1 = str.indexOf('자'); //결과:'1' var indexOf1 = str.indexOf('바'); //결과:'2' var indexOf1 = st..

n+가 부터, -n+가 까지 /*배수 선택 */ div:nth-child(2n){} /* 3번째부터 선택 */ div:nth-child(n+3) {} /* 5번째 까지 선택 */ div:nth-child(-n+5) {} /* 3번째부터 5번째 까지 선택 */ div:nth-child(n+3):nth-child(-n+5) {} /* 마지막에서부터 3번째 선택 */ div:nth-last-child(3) {}

크롬에서 개발자 도구를 열면 파비콘을 발견할 수 없다는 에러가 나타나는 경우가 있다. 개발에 영향을 미치지는 않는다고는 한다. 그러나 눈에 거슬리므로 파비콘 링크에 임시경로를 넣어 경고가 안보이게 할 수 있다. or

윈도우 스크롤이 어느 위치에 있든, 팝업창을 윈도우의 중간에 띄우는 방법 css에서 자식요소를 부모요소의 가운데에 정렬할 때, left: calc(50% - '정렬하고자 하는 요소 너비의 절반') 이런 식으로 쓰는걸 응용한 방식이다. var ww = $(window).width(); var wh = $(window).height(); var pw = $('#popup').width(); var ph = $('#popup').height(); $('#popup').css({'top': (wh/2) - (ph/2) + ($(window).scrollTop()), 'left':(ww/2) - (pw/2) + ($(window).scrollLeft())}); }); 윈도우에서 스크롤이 발생하지 않았다면, '윈도..

var reverse = $('정렬대상').prevAll(); $('정렬대상의 컨테이너').append(reverse); preAll()은 대상 요소를 기준으로 이전 형제들을 모두 선택하는 선택자이다. -------------------------------------------------- 1 2 3 -------------------------------------------------- 그래서 만약 위와같은 엘리먼트들이 있을 때, $('.on').prevAll(); 라고 하면, 1 2 를 불러온다. -------------------------------------------------- 그런데 이때 특정 엘리먼트를 선택하지 않고 $('li').prevAll(); 라고 하면, 가장 마지막 순서로 발..

반응형에서 창 크기 조절하면 새로고침 $(window).resize(function(){ location.reload(); });

아래와 같이 무한동작을 만들었더니, 'Maximum call stack size exceeded error' 경고가 떴다. function move (){ $('.ico').animate({'top':-115},500).animate({'top':-100},500); //애니메이션 1회 동작 함수 예시 move(); }; move(); ➜ 콜백함수를 써서 무한동작을 만들었더니, 경고가 사라졌다!!! function move (){ $('.ico').animate({'top':-115},500, function(){ $(this).animate({'top':-100},500, move) }); }; move(); 왜 이런 차이가 발생했을까? 그 이유는, 콜백함수는 앞의 내용이 종료된 후에 콜백함수 안의 내..

반응형 페이지를 만들 때, 윈도우 사이즈가 변할 때마다 윈도우(또는 html, body) 너비를 새로 측정하여 집어넣게 된다. 그런데 이렇게 하니, 제이쿼리의 이벤트 발생 구간과 미디어쿼리의 효과 적용 구간이 15px정도 오차가 생기는 것을 발견했다. (이렇게 되면 그 오차범위에 속하는 너비의 디바이스를 이용하면, css와 js의 효과가 서로 다른 구간의 것이 적용되므로 실패한 ux를 제공하게 될 수 있다!!!) 오차가 발생한 원인은 스크롤바의 너비였다. 미디어쿼리의 윈도우 너비는 스크롤바를 포함하여 측정되고, 제이쿼리에서 구한 윈도우(또는 html, body)의 width값은 스크롤바 너비를 제외하고 측정된다. 윈도우(또는 html, body)의 width값에 스크롤바 너비를 더하는것은 스크롤바의 너비..

HTML 엔티티(Entity)란? HTML 문서를 작성할 때 마크업과 충돌하는 것을 방지하고 브라우저가 문자열을 해석하는데 혼란을 막기 위해 특정 문자열을 예약어(reserved characters)로 지정한 문자셋을 말한다. 따서 태그와 혼용될 수 있는 아래와 같은 특수문자는 엔티티로 사용해야 한다. 그런데 이외에도 특수문자는 너무나도 많은데, 이들도 다 엔티티로 써야 할까?🤔 요즘에는 html에 특수문자를 그대로 입력하여도 깨진다거나 보이지 않거나 하지는 않는다고 한다. 그러나 특수문자를 그대로 작성하는 경우, W3C Validator는 해당 특수문자를 오류로 인식한다고 하니 엔티티로 사용하는 것을 지향하는것이 좋겠다. + 추가 엔티티가 생각보다 다양한데다가 입력과 편집도 수월하다보니 아이콘으로 사용..