Gentleman'study 젠틀맨

const circle3 = document.querySelector(".cursor").getBoundingClientRect(); // 모든 위치정보값 function follow(e){ gsap.to(".cursor", {duration: 0.3, left: e.pageX - (circle3.width / 2), top: e.pageY - (circle3.height / 2)}); //출력용 document.querySelector(".pageX").innerText = e.pageX; document.querySelector(".pageY").innerText = e.pageY; } window.addEventListener("mousemove", follow); 전체 사이트 보기 자바스크립트로 ..

const cursor = document.querySelector(".cursor");// 커서 const follower = document.querySelector(".cursor-follower");// 커서를 따라다니는 요소 window.addEventListener("mousemove", e => {// 화면에 마우스 오버했을 때 // cursor.style.left = (e.pageX - 5) + "px"// 커서 중앙에 요소가 오도록 위치값 조정 // cursor.style.top = (e.pageY - 5)+ "px" // follower.style.left = (e.pageX - 15) + "px" // follower.style.top = (e.pageY - 15) + "px" gsa..

window.addEventListener("mousemove", (e)=>{ document.querySelector(".clientX").innerText = e.clientX// 브라우저 기준 좌표값 document.querySelector(".clientY").innerText = e.clientY document.querySelector(".offsetX").innerText = e.offsetX// 요소 기준 좌표값 document.querySelector(".offsetY").innerText = e.offsetY document.querySelector(".pageX").innerText = e.pageX// 페이지 기준 좌표값 document.querySelector(".pageY").i..

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..

hljs.highlightAll();// 코드 나타낼때 쓰는 스크립트 const modal = function(){// modal 창 띄우는 함수 만들기. document.querySelector(".source-btn").addEventListener("click", () => {// 소스보기 버튼을 클릭하면 document.querySelector("#modal").classList.add("show");// 모달창 보여주기 document.querySelector("#modal").classList.remove("hide");// 껏다가 켰을때 한번더 작동하기 위해 hide 클래스 제거 }) document.querySelector(".close").addEventListener("click", (..

HTML 리스트 리스트(list)란 여러 요소들을 일렬로 나열한 목록이나 명단을 의미합니다. HTML에서는 이러한 리스트를 표현하기 위해 다음과 같은 리스트를 제공하고 있습니다. 순서가 없는 리스트(unordered list) 순서가 있는 리스트(ordered list) 정의 리스트(definition list) 순서가 없는 리스트(ul) 순서가 없는 리스트는 태그로 시작하며, 여기에 포함되는 각각의 리스트 요소는 태그로 시작합니다. 각각의 리스트 요소 앞에는 기본 마커(marker)로 검정색의 작은 원(bullet)이 위치합니다. 사과 멜론 바나나 CSS의 list-style-type 속성을 사용하면 리스트 요소 앞에 위치하는 마커(marker)를 다른 모양으로 변경할 수 있습니다. - disc : 검..

테이블 만들기 table 테이블(Table)이란 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표를 의미합니다. HTML에서는 태그를 사용하여 이러한 테이블을 작성할 수 있습니다. 태그는 다음과 같은 태그들로 구성됩니다. 1. 태그는 테이블에서 열을 구분해 줍니다. 2. 태그는각 열의 제목을 나타내며, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬이 됩니다. 3. 태그는 테이블의 열을 각각의 셀(cell)로 나누어 줍니다. 참치 고래 상어 문어 오징어 고등어 CSS의 CSS의 border 속성을 이용하여 테이블에 테두리를 표현할 수 있습니다. border 속성값을 따로 명시하지 않으면, 해당 테이블은 언제나 빈 테두리를 가지게 됩니다. 위의 예제에서 테이블의 테두리(border)가 두 줄씩..

HTML 요소의 타입 HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다. 대부분의 HTML 요소는 이러한 display 속성값으로 다음 두 가지 값 중 하나를 가지게 됩니다. 블록(block) 인라인(inline) 블록(block)타입의 요소 display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. p요소는 display 속성값이 블록인 요소입니다. , , , , , 요소는 display 속성값이 블록(block)인 대표적인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.요소는 주로 여러 요소들의 스타일을..