본문 바로가기
반응형

Front-End (JS , jQuery)15

[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.
[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.
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.
[html/CSS] position , overflow 속성으로 레이아웃 배치 , float 사용시 주의사항 CSS3 position 속성 top, left, right, bottom 속성과 함께 사용합니다. 상대적 위치 좌표 사용 static : 기본값. 태그들을 위에서 아래로 차례대로 배치. float -> 옆으로 배치 relative : static으로 초기 위치가 정해진 곳에서 상하좌우로 추가 이동 절대적 위치 좌표 사용 absolute : 절대적 위치 '좌표' fixed : 화면을 기준으로 화면 상의 절대적 위치 좌표 설정 absolute 사용 시 주의사항 절대적인 좌표를 이용한 것이기 때문에 부모블럭과 겹치게 된다. => 부모태그가 영역을 차지하지 않는다. 해결책 부모에게 height속성을 입력한다. => 부모 태그가 영역을 차지합니다. 부모의 position속성을 relative 키워드로 적용한다... 2022. 4. 14.
[html/CSS] CSS3로 웹페이지 스타일 설정하기 결과 스크린샷! 첨부한 html 파일을 크롬브라우저로 열어보세요! 제 첨부파일을 에디터(sublime Text/VScode)로 열어보면 소스코드와 내용 다 볼 수 있습니다. 사진은 html파일과 같은 폴더에 있어야지 보일것입니다.(상대경로로 설정했기 때문!) 상단에 탭바에 있는 html5 , CSS3 , PHP 메뉴 위에 마우스를 올려보세요! 메뉴블럭이 검은색으로 변하고 글자색이 바뀔겁니다. (CSS3 위에 마우스를 올려놓은 상태) 카테고리, 최근 글등 사이드 바도 추가된게 보입니다. 잘봤나용?? CSS style이 없으면 밑에 사진처럼 나오겠죠?? 이 프로젝트는 CSS를 이용한 프로젝트니까 기초는 제 첫 포스트 먼저 보고 오세요!! CSS(Cascading Style Sheets)는 문서의 스타일을 지.. 2022. 4. 10.

티스토리툴바