본문 바로가기
반응형

코딩13

[HTML/JS] 기본 이벤트 처리 다룰 이벤트 처리 Timing 이벤트 (매초마다, 시간이벤트) onclick 이벤트 (클릭시) onload/onunload 이벤트 (웹페이지 진입시) onchange (focus가 해제될시) onmouseover / onmouseout (마우스를 위에 올려놓을시) onmousedown / onmouseup (버튼을 누른 순간 / 누른 손을 뗀 순간) js를 이용한 이벤트 핸들러 Timing 이벤트 주어진 시간 주기에 따라 코드가 실행되도록 하는 함수입니다. 밀리초(milliseconds)는 천 분의 1초를 가리키는 말입니다. 1000milliseconds 가 1초겠죠?? window는 최상위 객체로 생략해도 됩니다! (java의 object격) 이벤트 처리에서 진짜 주의해야하는것은 함수를 인자로 받을때 .. 2022. 5. 2.
[HTML/JS] DOM(문서 객체 모델) 기초 목차 DOM이란? element 찾기 element 내용, 속성,CSS 변경 element 추가 및 삭제 DOM(Document Object Model) DOM은 HTML 문서의 계층적인 구조를 트리로 표현한 것 입니다. HTML을 구성하는 모든 요소들을 요소(element) , 속성 (attribute) , 문자(text)로 구분합니다. 태그들 -> element , 태그내의 속성 -> attribute , 태그안에 문자 -> text DOM은 트리구조이기 때문에 부모(parent)와 자식(child)로 구분할 수 있습니다. 부모에서 자식으로 접근을 할수 있는데요, firstchild , lastchild 등등으로 자식 노드로 접근 할 수 있습니다. 그리고 DOM의 함수를 이용해서 다음과 같은 기능을 .. 2022. 5. 2.
[HTML/JS] BOM(Browser Object Model) , window객체 브라우저 객체 모델 BOM이란? BOM은 웹브라우저의 객체들의 모음입니다. 최상위 객체는 window고, 그중 html에 해당하는 객체는 DOM(Document Object Model) 문서 객체 모델입니다. 밑의 사진에 노란색 부분이죠. 최상위 객체 , window window는 브라우저 하나의 윈도우를 표현하는 객제입니다. 모든 JS’s global objects, functions, variables는 window 객체의 멤버 중 하나입니다. window의 함수들 (상세내용X , 문법 요약) window.open(url, name, specs, replace); 새로운 윈도우를 엽니다. 반환값은 윈도우, 실패하면 null ex) window.open('http://www.google.com', '_.. 2022. 4. 18.
[HTML/JS] JS기초 : 행맨 게임 만들어보기! 기본 파일들이고 여기서 JS파일만 참고해서 작성해보시면 됩니다! 목표 New Game을 누르면 게임이 시작되면서 언더바가 쭉 나오고, 맞추면 해당되는 언더바들이 문자가 출력되고, 틀리면 행맨 그림이 바뀌면서 Guesses에 시도한 문자들이 출력되는 게임을 js으로 만들어 봅시다! HTML Prsee New Game to Play! Guess New Game id="hangmanpic" 행맨 이미지 id="clue" 언더바가 있는 부분 id="hguess" 퀴즈 문자 받는 입력창 id="guessbutton" 입력한 문자를 제출하는 버튼 id ="hguessstr" 현재 게임에서 지금까지 입력한 문자들 전역변수와 게임 시작 함수 newGame() //행맨 var POSSIBLE_WORDS = ["obdur.. 2022. 4. 17.
깃(git) pull과 fetch의 차이 (깃 풀과 페치의 차이) git pull(풀)과 fetch(페치)의 차이는 서버와 로컬의 병합을 자동처리하는지의 여부입니다. pull는 원격 서버에서 최신 커밋들을 내려받아서 현재 로컬 브랜치와 자동으로 병합합니다. 혼자 개발하는 프로젝트에서는 pull만 써도 상관 없겠지만 여러개발자와 협업할때는 pull의 자동병합은 문제가 될때가 많습니다. 풀로 자동병합을 하지 못할땐 페치 방식을 사용해야합니다. fetch는 원격저장소에서 커밋된 코드를 임시 브랜치로 다 내려받습니다. 그러나 내려받은후 현재 브랜치와 자동 병합하지 않고, 그렇기 때문에 워킹디렉터리도 변화가 없습니다. 그래서 merge 명령어를 이용해서 수동 병합해야합니다. 두 명령어 git pull 별칭 브랜치이름 : 원격저장소에 있는 내용을 한번에 내려받는다. 최신 커밋과 .. 2022. 4. 17.
JS 기초 : 난수 생성하기 - 숫자 맞추기 게임 실습 예) 1~100 사이의 난수 생성 Math.random()*100 +1 하시면 1.0~100.0까지의 실수를 반환하겠죠? 소수점을 자르고 정수로 만들고 싶으시다면 , ParseInt()나 Math.floor()를 쓰시면 되겠습니다! Math.floor(Math.random()*100 +1); 자바스크립트(JS)는 객체 기반의 스크립트 프로그래밍 언어로, 웹 브라우저 내에서 컴파일 돼서 사용됩니다.(node.js 제외) 일단 지금은 브라우저 없이 실습을 할 수 없으니까 html파일과 css파일을 미리 다운 받고, JS를 직접 작성해봅시다. HTML에서 외부 CSS , JS 파일을 참조하는 법 html head태그안에 css는 link , JS는 script태그를 만듭니다. CSS는 herf , JS는 sr.. 2022. 4. 15.
[html/CSS] div 가운데 정렬 하는법 자식 태그를 가운데 정렬하기 위해서는 부모와 자식 둘다 CSS 설정을 해야합니다. 우선 앞서 가시화 속성인 display 속성을 먼저 알아야하는데요, display 속성에는 block과 inline-block 속성이 있습니다. block display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. ex) div inline-block display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. ex) span 여러 엘리멘트를 한 부모안에 정렬하고 싶으면 inline-block을 써야겠죠?? 부모태그를 outer , 자식(정렬해야하는 태그)를 inner로 지정하고 할게요.. 2022. 4. 15.

티스토리툴바