DH의 개발 공부로그 DH의 개발 공부로그

See the Pen js 시계 by Shape2ee (@shape2ee) on CodePen. 자바스크립트를 이용한 시계를 만들어보았습니다. 코드는 생각보다 아주 간단합니다. HTML 코드 00:00:00 요일 시간이 들어갈 부분을 기본값으로 00:00:00과 요일로 작성하였고 자바스크립트 코드로 넘어가겠습니다. JAVASCRIPT 변수선언 const clockTime = document.querySelector(".time"); const day = document.querySelector(".day"); let date = new Date(); 우선 자바스크립트로 수정해줄 h1과 h2를 상수로 선언하고 new Date() 함수를 이용하여 오늘 지금 시간을 변수에 저장합니다. 시간 변경 함수 func..

요즘 웹사이트를 돌아다녀 보면 자주 보이는 마우스를 따라다니는 도형들을 볼 수 있습니다. 그래서 그런 기능은 어떻게 구현할 수 있을지 공부하면서 구현을 해보았습니다. See the Pen Untitled by Shape2ee (@shape2ee) on CodePen. JavaScript 코드 1. 마우스 좌표 얻기 마우스의 좌표값을 구하는 javascript 프로퍼티에는 종류가 다양한 것으로 알고 있습니다. 대표적으로 clientX, offsetX, pageX, screenX 이렇게 있는데(X를 Y으로 변경하면 Y값 제어) 그중에서 clientX, clientY를 이용했습니다. 이유는 현재 보이는 브라우저의 x,y 좌표 값을 구할 수 있기 때문입니다. offset은 이벤트 대상 노드를 기준으로 좌표값을 ..

비교 연산자 비교 연산자는 왼쪽의 피연산자를 기준으로 두개의 값을 비교하는 연산자입니다. 주로 조건문에서 많이 사용되며 결과 값은 true(1)와 false(2)로 출력합니다. 자바스크립트에서는 boolean을 넣지 않아도 자동으로 값을 변환해 연산을 해줍니다. 비교 연산자 종류 1. 왼쪽 피연산자가 오른쪽 피연산자 보다 크다 i = 5 > 4;// ~보다 크다. 참 true == 13. = 4;// ~크거나 같다 true 비교 연산자는 숫자에서만 사용되지 않고, 두 피연산자가 문자열이어도 비교가 가능합니다. a = `hello` > `world`; // true b = `apple` > `append`; // true c = `bee` > `be`; // true문자열의 비교에서는 두 문자열의 문자 하..

1. DOM(Document Object Model) DOM이란? DOM은 구조화된 문서를 객체로 표현하는 형식을 말합니다. 2. 웹브라우저 동작 과정 웹서버로부터 html 파일을 가져옴 가져온 html 파일과 css정보를 파싱(parsing)하여 DOM tree 생성, CSSOM tree 생성 DOM / CSSOM tree를 기반으로 Render tree 생성 3. 웹브라우저 동작과정과 Javascript html 코드를 기반으로 DOM 트리를 구성하는데, javascript 코드인 를 내에 넣으면 DOM 트리가 구성하기 전에 태그를 만나면서 javascript 엔진에 제어권을 넘기게 됩니다. javascript 엔진에 제어권을 넘기게 되면 자바스크립트 엔진이 해당 js 코드 파일을 로드해서 실행하고,..

Javascript 란? 자바스크립트란 동적으로 요소를 변경하고 사용자 인터페이스를 지원하기 위해 고안된 스크립트 언어이며, 넷스케이프 커뮤니케이션 사에서 개발하였고, 본래 이름은 모카(Mocha), 그리고 라이브 스크립트 였으나, 당시 JAVA 언어가 인기를 끌어서 관련이 없었음에도 Javascript 라고 명명하였습니다. 표준화된 언어의 공식 이름은 ECMAScipt이고, 아직까지도 대외적으로 사용되는 이름은 Javascript이다. javascript 엔진 V8: 구글에서 만듬, 크롬이 먼저 채택, 이후 Electron, Node.js에서 사용, ms사에서도 기존 자체 엔진을 버리고 V8을 채택중 SpiderMonkey: FireFox 브라우저에서 사용 중 JavaSctiptCore: 오픈 소스로 ..

블록(block) 요소 안에 이미지를 넣었는데 하단 여백이 생기는 특이한 점을 발견하였습니다. 너무 궁금해서 찾아 본 결과 원인은 이러했습니다. 이미지 태그는 인라인(inline) 속성이고 인라인 속성의 텍스트, 또는 이미지 콘텐츠는 콘텐츠들이 정렬되는 기준 선이 있습니다. 인라인 요소의 기본 설정 기준선 값은 베이스라인(baseline) 입니다. 베이스라인은 문자(알파벳 기준)가 얹히는 기준 바닥을 말하며, 영어에서 g, j, p, q와 같은 꼬리가 있는 문자들은 베이스라인 밑으로 꼬리가 내려가 걸쳐집니다. 그러다 보니 베이스라인의 기준에서는 블록 요소 안에 이미지만 있더라도, 보이지 않는 문자를 대비하기 위해 위와 아래에 공간을 만들어 두는 것입니다. 이러한 문제의 해결방법은 다음과 같은 방법들이 있..

a 태그 'a' 태그는 anchor의 약자로 하이퍼링크를 설정하는 태그입니다. 인라인 요소이며, a 태그를 작성하면 링크를 의미하는 밑줄로 표기가 되며 그 기본 색상은 파란색입니다. 속성 설명 주요 값 href 하이퍼링크 URL 하이퍼링크 외 전화번호(tel), 이메일주소(mailto)도 기입이 가능하며, 대신 href의 값을 ""의 형태로 비워두지 않아야 하고 href="#"의 임시 링크 기호로 대체 표기 할 수 있습니다. target 링크된 URL 이동 방법 지정 - "self" : 현재의 브라우저에 열기 속성 값 - "blank" : 새창으로 열기 속성 값 a태그의 링크를 정확히 설정하려면 우선 절대 경로와 상대 경로를 알아야 합니다. 1. 절대 경로 절대 경로는 변하지 않는 주소로 쉽게 말해 우리..

ol, ul, li 리스트 태그 리스트를 표현할 수 있는 태그로, html 문서에 많이 사용되는 태그들 중에서도 많이 사용되는 태그라고 할 수 있습니다. 우선 'ol' 태그는 순서가 있는 리스트를 표현하는 태그이며, 'ul' 태그는 순서가 없는 리스트를 표현할 때 사용하는 태그입니다. 'li' 태그는 ol과 ul 내에 사용되는 태그로 항상 ol 또는 ul과 함께 사용돼야 하며, 둘 중 하나만 사용할 수는 없습니다. 그리고 ol과 li 또는 ul과 li 사이에는 다른 태그가 올 수 없지만 li 태그 안에는 다양한 다른 태그를 작성할 수 있습니다. 감자를 1/4 크기로 자른다. 부드러워질 때까지 15분~20분 동안 소금물에 서서히 끓인다. 감자의 물을 따라 내고 으깬다. 우유, 버터, 육두구를 데운다 우유 ..