밀 종합 ٩(`╹ω╹´)و

See the Pen [CSS] 는 transform이 적용되지 않는다. by mill (@millfeel) on CodePen. 는 inline 속성이기 때문에 transform이 적용되지 않는다. 를 display: block, inline-block으로 설정하면 사용 가능하다. [공부좌표] Transform CSS property doesn't work with element [duplicate]

이메일 주소 연결 mailto: 이메일 보내기 전화번호 연결 tel: 1234-5678 전화걸기 [공부좌표]

:nth-child 태그의 종류에 상관없이 형제 순서로 선택을 한다. See the Pen [CSS3] :nth-child by mill (@millfeel) on CodePen. out item1 - div inner item1 - li 2 3 4 inner item2 - li out item2 - p out item3 - div .item:nth-child(1) { color: red; } .item:nth-child(2) { color: blue; } *out item1 - div는 의 첫번째 자식이고, inner item1 - li는 의 첫번째 자식이다. *.item:nth-child(2) { color: blue; }가 적용되지 않은 이유는 기준 두번째 자식은 이고, 기준 두번째 자식은 2인데,..

[참고한 사이트] https://www.navercorp.com/ Naver Corporation 네이버(주) 회사 소개, 주요 서비스, 투자 및 채용 정보 제공 www.navercorp.com PC인 경우 - background-size는 이미지의 크기와 동일하게 설정한다. - background-position은 포토샵 좌표 값과 동일하다. - width, height는 이미지와 1:1 비율이다. 모바일인 경우 모바일 레티나 디스플레이는 해상도가 2배이기 때문에 (원본 이미지 크기 / 2)를 해서 background-size를 설정한다. background-position도 (원본 이미지 크기 / 2) width, height도 (원본 이미지 크기 / 2) SVG도 가능하다 https://a11y.g..

const value = $('선택자').css('margin-top').replace(/[^-\d\.]/g, '');

See the Pen [JS] scrollY() / scrollTo() / scrollBy() by mill (@millfeel) on CodePen. scrollY() (=window.pageYOffset) Window 인터페이스의 scrollY 읽기 전용 속성은 문서가 수직으로 얼마나 스크롤됐는지 픽셀 단위로 반환한다. var y = window.scrollY Q. window.pageYOffset과 window.scrollY의 차이는? - 호환성에서 차이가 있다. - window.pageYOffset가 호환성이 약간 더 좋다. - 공통으로 IE8은 지원하지 않는다. scrollBy() 기존 스크롤 값에 설정한 값만큼 + / - 된다. // 대상이 window window.scrollBy(x, y);..

See the Pen [jQuery] .scrollTop() by mill (@millfeel) on CodePen. 화면을 스크롤할 때 현재 사용자가 스크롤한 만큼의 거리를 계산해주거나, 스크롤 위치를 이동한다. // 간격 값 반환 $('선택자').scrollTop(); // 스크롤 위치 이동 $(window).scrollTop(숫자); [JS와 비교하기] // JS const $value = document.querySelector('.value'); const $topBtn = document.querySelector('.topBtn'); window.addEventListener('scroll', function () { const scrollValue = window.scrollY; if (sc..

pageX => clientX / pageY => clientY와 비슷하다. See the Pen [jQuery] e.pageX / e.pageY by mill (@millfeel) on CodePen. 브라우저상에서의 현재 마우스 커서의 위치 값을 구할 수 있다. // 브라우저상 마우스 커서의 x축 좌표 e.pageX // 브라우저상 마우스 커서의 y축 좌표 e.pageY [JS와 비교하기] // JS window.addEventListener('mousemove', function (e) { const x = e.clientX; const y = e.clientY; document.querySelector('.posX').textContent = x; document.querySelector('.po..

.text() => textContent와 비슷 / .html() => innerHTML과 비슷 .text() See the Pen [jQuery] .text() by mill (@millfeel) on CodePen. // 문자 가져오기 $('선택자').text(); // 문자 변경하기 $('선택자').text('변경할 문자열'); [JS와 비교하기] // JS const $bl_palette = document.querySelector('.bl_palette'); const $el_box = document.querySelector('.el_box'); $bl_palette.addEventListener('click', function (e) { const target = e.target; if (!..

See the Pen [jQuery] .addClass() .removeClass() by mill (@millfeel) on CodePen. 특정 요소에 클래스를 추가하고 제거하는 구문이다. // 클래스 추가하기 $('선택자').addClass('추가할 클래스명'); // 클래스 제거하기 $('선택자').removeClass('제거할 클래스명'); [JS와 비교하기] // JS const $box = document.querySelector('.box'); $box.addEventListener('mouseover', function () { this.classList.add('box__circle'); }); $box.addEventListener('mouseout', function () { thi..