목록web/javascript (30)
Rainbow
1. 자바스크립트 소스코드를 웹브라우저에 사용하기 위해서 태그를 쓴다 2. 사용자와 상호작용하는 코드 event라고 부른다 onclick 속성으로 이벤트 20개를 정의한다 EX) 이벤트를 등록하는 방법 HTML onclick 입력하여 클릭 이벤트를 등록하는 방법 →
아코디언 메뉴(accordion menu)는 웹 또는 모바일 앱 디자인에서 사용되는 UI(사용자 인터페이스) 구성 요소 중 하나입니다 HTML, CSS, JavaScript 등을 사용하여 구현할 수 있습니다. 주로 웹 개발에서 사용되며, 사용자가 클릭하거나 터치하여 메뉴 항목을 펼치고 닫을 수 있습니다. (일반적으로 각 섹션을 접을 수 있고 펼칠 수 있다) 3개의 이미지가 접혀있는 아코디언 이미지 메뉴를 만들어 보겠습니다 이미지와 텍스트를 배치하고 스크립트에서 ' default ' 와 ' expand ' 클래스를 추가/제거 하여 메뉴에 커서를 올리면 펼쳐지고 영역을 벗어나면 접히는 기능입니다 결과 ::) See the Pen Untitled by kkang2469 (@kkang2469) on CodePe..
크로스 브라우징 : 브라우저마다 다르게 동작을 한다. - 웹 페이지 제작 시 모든 브라우저가 깨지지 않고 의도한 대로 나오게 작업한다. - 다양한 브라우저에서 동등하게 동작하는 것 Netscape (넷스케이프) - addEventListerener 사용 Ie (익스플로러) - attachEvent (어태치 이벤트) 사용 JavaScript - Navigator 객체 (2/3) : Navigator 객체 아래 명령을 통해 객체의 모든 프로퍼티를 열람할 수 있다. console.dir(navigator); appName : 웹 브라우저의 이름이다 IE 인터넷 익스플로러, 파이어폭스, 크롬은 넷스케이프로 표시한다. appVersion : 브라우저의 버전을 의미한다. 필자의 현재 브라우저 정보 아래와 같다 - ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/obSw2/btqV35EYgWA/ChvMlW9gDrr3aCAD16G3LK/img.png)
처음 웹페이지에 접속하면 브라우저는 서버로 요청을 보내 html, css, js 등의 파일을 다운로드 받고 파싱해서 화면에 보여준다. 이러한 브라우저 로딩과정은 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성 총 6단계로 나누어진다. 다운로드 유저가 브라우저에서 www.naver.com를 입력했을때, 브라우저는 naver의 서버로 html을 요청해서 응답을 받는다. 파싱 다운받은 html을 파싱한다. 파싱을 하면서 DOM Tree를 만들게 되는데, 파싱 도중에 link태그를 만나면 서버에서 CSS파일 다운로드하고 파싱해서 CSSOM Tree를 만든다. 스타일 HTML과 CSS의 파싱이 완료되면 DOM Tree와 CSSOM Tree를 합쳐서 Render Tree를 생성한다. DOM Tree에는 CSS로..
www.everdevel.com/JavaScript/js-for/ everdevel 웹 입문 사이트 에버디벨 - HTML, CSS, JavaScript, jQuery, ReactJs, MySQL ,PHP를 다룹니다. www.everdevel.com
브라우저 객체 모델 이란? - 웹 브라우저 전체를 객체로 관리 하는 것입니다. - window객체 창이 만들어지고 - 하위 객체는 웹 문서와 주소 표시줄 처럼 각각 또 다른 하위 객체를 가지고 있습니다. 브라우저 내장 객체 - window : 브라우저 창안에 존재 하는 최상위 객체 - document : 웹 문서의 정보를 가지고 있습니다. - History : 사용자가 창에서 방문 기록을 저장 하고 있는 객체 - Location : 페이지에 대한 URL정보를 가지고 있는 객체 - Navigator : 웹 브라우저 정보를 가지고 있는 객체 - Screen : 화면 정보를 다루는 객체 window객체의 속성 inner Width/inner height : 웹 사이트 내용 부분의 너비와 높이를 나타낸다. ou..