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

(눈누, 구글폰트에서 웹폰트 소스 가져오는법은 내용 하단에 있음) ➜ 웹폰트를 삽입하는 법 @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)은 이..