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

반응형에서 창 크기 조절하면 새로고침 $(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는 해당 특수문자를 오류로 인식한다고 하니 엔티티로 사용하는 것을 지향하는것이 좋겠다. + 추가 엔티티가 생각보다 다양한데다가 입력과 편집도 수월하다보니 아이콘으로 사용..

(눈누, 구글폰트에서 웹폰트 소스 가져오는법은 내용 하단에 있음) ➜ 웹폰트를 삽입하는 법 @font-face, @import, 1. @font-face와 @import먼저 @font-face와 @import는 눈누나 구글폰트 등 웹폰트 검색 사이트에서 웹폰트 소스를 복사하여 css파일 상단에 붙여넣으면 바로 사용할 수 있다./* @import 예시 ------------------*/ @import url('https://fonts.googleapis.com/css2?family=Saira:wght@100&display=swap'); /* @font-face 예시 ------------------*/ @font-face { font-family: 'GmarketSansMedium'; src: url('..

우리가 일반적으로 사용하는 hex 속성값은 6자리로 이뤄져 있는데, 이 뒤에 투명도 값 2자리를 추가해주기만 하면 간단하게 투명도를 줄 수 있다. /* hex8 속성값 예시 */ .hex { color: #67A0FF33; } 아래는 각 Opecity에 해당하는 Alpha값이다. 100가지나 되는 두자리 값을 외워야 되나 걱정할 수 있지만, 아니다. 투명도 알파값도 앞의 여섯자리와 마찬가지로 당연히 Hexadecimal! 16진수로 이루어져 있기 때문이다. 00(투명) ~ FF(불투명)이란 것을 생각해서 대충 때려 넣다보면 금방 익숙하게 쓸 수 있을 것이다. 100% — FF 99% — FC 98% — FA 97% — F7 96% — F5 95% — F2 94% — F0 93% — ED 92% — EB ..

➜ 팝업 안에서 스크롤 할 때 AOS적용 되게 하기 페이지 내에서 팝업창을 열었을 때, 윈도우의 스크롤을 없애고 팝업창 내에서만 스크롤 되도록 하는 경우가 있는데, 이 때 팝업 창 내의 요소들에 AOS를 적용해도 실행되지 않는 것을 볼 수 있다. 이 때 AOS가 동작하게 하려면, 특정 요소 위에서 스크롤 이벤트 실행시 AOS 스크롤 기준점 변경을 변경해주면 된다. $('스크롤대상').on('scroll',AOS.refreshHard);

➜부모:has(자식) || 직계조상:has(자손) 예로들만한 것이 생각이 안나서;; 일단 간단한 예를 들어보자..음.... 이렇게 쓰는지는 모르겠지만 그냥 예로 드는거니까😛;; 위의 이미지와 같이 리스트를 만들 때, ' N 아이콘이 붙은 제목만 그린&볼드처리' 하고 싶다고 치자. 아래와 같이 새 글이 등록 되면 스크립트로 제목 내용 끝에 바로 N 를 붙이기로 했다. (= 제목안에 append(=뒤에 끼워넣기)하기로 했다.) 공지사항 제목 공지사항 제목 이 때, 해당 제목에만 스타일을 주기 위해 아래와 같이 선택자를 지정할 수 있다. /*를 자식으로 가지는 부모-----------------------------*/ .title:has(.new) { color: green; font-weight: bold..

➜모바일 네비를 만들 때, 네비 밖을 클릭하면 네비가 사라지게 하기 // 네비 이외 클릭하면(클릭한 곳이 .nav가 아니면) 네비 OFF $('.outside-of-nav').on('click', function(e){ if($('.nav').has(e.target).length === 0 ){ //네비가 사라지는 함수 입력 } //console.log($('.nav').has(e.target).length); //1 || 0 //console.log(e.target); //'.inside-of-nav' || '.outside-of-nav' }); 'html' 안을 클릭했을 때, '.nav'안에 그 클릭된 요소(e.target)의 길이가 0이면(=없으면) 함수를 실행해라. 여기서 (e.target)은 이..