본문 바로가기
반응형

전체 글134

[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.
JS 배열 (Array) - 자바스크립트 배열이란? 하나의 변수 이름에 여러 데이터 값을 저장할 수 있는 자료구조입니다. 배열 생성하는 방법엔 두가지가 있습니다. 1. 리터럴로 선언 var array = [item1, item2, ...]; js 같은 경우 배열 원소의 자료형이 서로 달라도 허용합니다. 객체, 함수, 배열 등도 배열의 원소가 될수 있습니다. 2. Array 객체로 배열 생성 var fruits=new Array(“apple",“banana",“orange“); Array 객체 Array 객체의 속성에는 length가 있습니다. array.length 하면 배열의 size를 반환합니다. - 가장 큰 인덱스의 +1 Array 객체의 함수 push/pop , unshift/shift가 있고 각각 배열의 맨 뒤에서, 맨 앞에서 조작하는.. 2022. 4. 18.
깃(git) 브랜치 (branch)와 업스트림 (upstream)(-u , --set-upstream) 명령어 요약 git branch 브랜치이름 현재 커밋을 분기점으로 브랜치를 생성합니다. git branch 브랜치이름 커밋ID 지정된 커밋에 개발분기점으로 잡아 브랜치를 하나 생성합니다. '깃 커밋 포스트에 있듯이, git log 를 입력해서 나오는 id에서 7자리까지가 id입니다.' git rev-parse 브랜치이름 그 브랜치가 어떤 커밋에 있는지(긴 id로 출력)를 알수있습니다 git branch -v 가지고 있는 모든 브랜치와 그 브랜치의 커밋ID를 볼 수 있습니다. git branch -r 원격 서버의 모든 브랜치를 볼 수 있습니다. git checkout 브랜치이름 그 브랜치로 이동(현재브랜치에서 커밋을 해야 이동할 수 있습니다! git status로 확인) git checkout - (이동취.. 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.
github 이용하기 - remote , push , pull (깃(git) 원격저장소) 주요 명령어 요약! git remote add 원격저장소별칭 원격저장소URL : 원격저장소 연결. 초기에만 설정해주면 됩니다. ex) git remote add origin https://github.com/계정이름/레포지토리이름 : origin은 대표적 별칭입니다. https://github.com/계정이름/레포지토리이름 : 깃허브 레포지토리에 들어가고, 주소 복붙!! git remote -v : 원격저장소 목록 확인 (연결 잘 됐는지 확인하기) git push 원격저장소별칭 브랜치이름 : github에 로컬 깃 저장소에 커밋단위의 내용을 업로드한다. ex) git push origin master : master는 기본 브랜치입니다. git clone 원격저장소URL : 원격 서버에 있는 내용을 내 .. 2022. 4. 15.
깃(git) 커밋 - add, commit 중요 명령어 요약! ('git 기초' 포스트를 보고 기초 개념을 알아야 이해할 수 있습니다!) git add 파일이름 : 특정 파일을 스테이지에 올리는 명령어 git add . : 현재 폴더에 모든 파일을 track 시켜주고 stage 시켜주기 위한 명령어 입니다. 수정된 파일이 있으면 무조건 add 시켜주고 커밋해야합니다! git status로 수정된 파일이 있는지 수시로 확인 "" 필수!! git commit -m "커밋이름" : stage에 올라간 파일을 커밋 git commit -am "커밋이름" : 수정돼서 unstaged 된 파일을 다시 stage 시켜주면서 동시에 커밋하는 명령어 주의 할것은 git commit -am 을 한다고 해서 새로 생성된 파일을 add 시켜주진 않습니다. 이미 tra.. 2022. 4. 14.
[html/CSS] position , overflow 속성으로 레이아웃 배치 , float 사용시 주의사항 CSS3 position 속성 top, left, right, bottom 속성과 함께 사용합니다. 상대적 위치 좌표 사용 static : 기본값. 태그들을 위에서 아래로 차례대로 배치. float -> 옆으로 배치 relative : static으로 초기 위치가 정해진 곳에서 상하좌우로 추가 이동 절대적 위치 좌표 사용 absolute : 절대적 위치 '좌표' fixed : 화면을 기준으로 화면 상의 절대적 위치 좌표 설정 absolute 사용 시 주의사항 절대적인 좌표를 이용한 것이기 때문에 부모블럭과 겹치게 된다. => 부모태그가 영역을 차지하지 않는다. 해결책 부모에게 height속성을 입력한다. => 부모 태그가 영역을 차지합니다. 부모의 position속성을 relative 키워드로 적용한다... 2022. 4. 14.

티스토리툴바