Gentleman'study 젠틀맨

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", (..

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", (..

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", (..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 구간 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 const sliderBtn = document.querySelector(".slider__btn"); // next,prev 버튼 const sliderDot = document.querySelector(".slider__..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 구간 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 const sliderBtn = document.querySelector(".slider__btn"); // 버튼 const sliderBtnPrev = sliderBtn.querySelector(".prev"); // pr..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 구간 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 let currentIndex = 0; let sliderCount = slider.length; // 이미지 갯수 let sliderHegiht = sliderImg.offsetHegiht // sliderImg의 heig..

비디오(video) 요소 HTML5 이전에는 웹 페이지에서 비디오(video)를 보여주기 위한 표준안이 없었습니다. 따라서 비디오를 삽입하기 위해서는 플래시(flash)와 같은 외부 플러그인(plug-in)에 의존해야만 했습니다. 하지만 HTML5에서는 태그를 이용하여 웹 페이지에 비디오를 삽입하는 표준화된 방식을 제공합니다. 비디오 요소의 속성 예제 control 속성은 재생, 정지 및 소리의 조절 등 비디오의 기본적인 동작을 조절할 수 있는 패널을 생성합니다. 또한, height와 width 속성을 이용하여 웹 브라우저에 삽입되는 비디오의 크기를 명시할 수 있습니다. 웹 브라우저는 여러 개의 태그 중 위쪽에서부터 순서대로 가장 먼저 인식되는 파일의 타입과 주소를 사용합니다. 태그 사이에 존재하는 텍스..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 구간 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 let currentIndex = 0; let sliderCount = slider.length; // 이미지 갯수 let sliderWidth = sliderImg.offsetWidth // sliderImg의 width ..

const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 이미지 보이는 영역 const sliderInner = document.querySelector(".slider__inner"); // 이미지 움직이는 구간 const slider = document.querySelectorAll(".slider"); // 5개의 이미지 let currentIndex = -1; // 첫 번째 이미지(현재 보이는 이미지) let sliderCount = slider.length; // 이미지 갯수 setInterval(()=>{ // currentIndex =..

마진(Margin) margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다. 이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않습니다. CSS를 사용하면 마진 영역의 크기를 방향별로 따로 설정할 수 있습니다. 마진(margin) 속성 CSS에서는 HTML 요소의 마진 영역을 설정하기 위해 다음과 같은 속성을 제공합니다. 1. margin-top 2. margin-right 3. margin-bottom 4. margin-left margin 속성값을 음수로 설정하여 해당 요소를 다른 요소의 위에 겹치게 할 수도 있습니다. margin 속성값을 inherit로 설정하면, 부모(parent) 요소의 m..

자바스크립트 출력 자바스크립트는 여러 방법을 통해 결과물을 HTML 페이지에 출력할 수 있습니다. 자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다. 1. window.alert() 메소드 2. HTML DOM 요소를 이용한 innerHTML 프로퍼티 3. document.write() 메소드 4. console.log() 메소드 메소드(method)와 프로퍼티(property)에 대한 더 자세한 사항은 자바스크립트 객체의 개념 수업에서 확인할 수 있습니다. window.alert() 메소드 자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법은 window.alert() 메소드를 이용하는 것입니다. window.alert() 메소드는 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데..

패딩(padding) padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다. 패딩(padding) 속성 CSS에서는 HTML 요소의 패딩 영역을 설정하기 위해 다음과 같은 속성을 제공합니다. 1. padding-top 2. padding-right 3. padding-bottom 4. padding-left 패딩 축약 표현(padding shorthand) 모든 padding 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다. 예제 4개의 padding 속성값을 가질 때는 t..

HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어(reserved characters)라고 부릅니다. 이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석합니다. 따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티(entity)라고 합니다. 엔티티(entity)의 이름은 대소문자를 구분합니다. HTML에서 제공하는 대표적인 엔티티(entity)는 다음과 같습니다. 엔티티 문자엔티티 이름16진수 엔티티 숫자설명 줄 바꿈 없는 공백 > > 보다 큰 & & & AND 기호 " " " 큰따옴표 ' ' ' 작은따옴표 발음 구별 부호(diacritical marks) 발음을 나타내..

const sliderWrap = document.querySelector(".slider__wrap");// 이미지 전체 박스 const sliderImg = document.querySelector(".slider__img");// 이미지 박스 const slider = document.querySelectorAll(".slider");// 슬라이더 할 이미지들 let currentIndex = 0; // 현재 보이는 이미지 let sliderCount = slider.length; // 이미지 갯수 setInterval(() => {// 정해진 시간뒤에 반복해서 실행한다 let nextIndex = (currentIndex + 1) % 5;// 5로 나눈 나머지값(0~4)으로 표현 slider[cu..

JavaScript / 반복문 / while, do - while 자바스크립트 반복문에는 while, do - while, for 세가지가 있습니다. while 문 기본 문법 var i = 0; while ( i < 10 ) { // do something i++; } i의 값이 0부터 9일 때까지 실행되고 i의 값이 10이면 실행되지 않고 다음으로 넘어갑니다. i의 값을 증가시키는 i++을 꼭 넣어야 한다는 것에 주의해야 합니다. 만약 i++이 없으면 i의 값이 계속 0이므로 무한 반복을 하게 됩니다. do - while과 for도 마찬가지입니다. while을 이용하여 1부터 10까지 출력하는 예제입니다. do while 문 기본 문법 var i = 0; do { // do something i++; ..

const cssProperty = [ {num: 5, name: "all", desc: "all 속성은 CSS 속성을 재설정하는 데 사용할 수 있는 약식 속성입니다."}, {num: 2, name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다."}, {num: 3, name: "animation-delay", desc: "animation-delay 속성은 애니메이션이 시작되는 시간을 설정합니다."}, {num: 9, name: "animation-direction", desc: "animation-direction 속성은 애니메이션이 움직이는 방향을 설정합니다."}, {num: 1, name: "animation-duration", de..

그리드 시스템이란? 그리드 시스템(Grid System)에서 ‘Grid’는 격자나 바둑판 모양의 눈금을 뜻하며 일반적으로는 수직과 수평으로 면이 분할된 것을 의미합니다. 1970년대 중반부터 본격적으로 사용된 그리드 시스템은 디자인의 레이아웃에 규칙을 부여하는 수단입니다. 편집디자인(인쇄물)에서 시작해 현재 웹 개발 분야에도 적용하여 웹 페이지를 제작하는 기초 단계에서 그리드 시스템을 사용하면 제작을 쉽고 빠르게 진행할 수 있습니다. 그리드 시스템의 장점 디자인 레이아웃은 모든 측정값이 동일한 규칙을 따르면 자동으로보다 일관된 UI를 얻게 됩니다. 그리드 시스템은 균일한 요소와 간격을 사용하여 플랫폼, 환경 및 화면 크기에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 도와줍니다. 또한 협업의 목적으로..