1. mouseenter 시 display가 block이 되는 함수 실행, mouseleave 시 display가 none이 되는 함수 실행 // #listWrap에 mousenter시 // .list의 .css() "display"를 block으로 // mouseleave시 display 속성을 none으로 바꾸게 // 이벤트를 2개 설정 $("#listWrap").mouseenter(function() { // 메뉴 펼쳐지게 $(".list1").css("display","block"); }); $("#listWrap").mouseleave(function() { // 메뉴 접혀지게 $(".list1").css("display","none"); }); 2. .hover(함수1{}, 함수2{})로 작성..

안에 넣기 js 파일이 크고, 인터넷이 느릴 시 웹사이트를 노출하기까지 많은 시간이 걸린다. 안에 넣기 js에 의존적인 컨텐츠라면 사용자가 정상적인 페이지를 보기 전까지, 서버에서 자바스크립트를 보내고 받아오는 시간을 오래 기다려야 한다. 안에 넣고 asyn라는 속성 이용하기 asyn(boolean, default:true)를 사용하게 되면 html 다운로드 전에 js 파일이 실행되게 된다. html 파싱과 js의 다운로드를 병렬로 처리하기 때문에 바디 끝에 사용하는 것보다는 다운로드 받는 시간을 절약할수 있지만, html 다운 전에 js가 실행되기 때문에 dom 조작 시점에 html이 정의되어있지 않을 수 있다. [실행 순서] 1) 브라우저가 html을 순차적으로 파싱 2) 순차적으로 파싱하다가 asy..

1. HTML 작성 ◀ ▶ 2. CSS 작성 3. JavaScript 작성 이미지 슬라이딩을 위한 function 작성 : 변수 num을 선언한 뒤, 조건문을 사용하여 변수값을 변경하였다. 변경한 변수값은 document.getElementById로 불러온 요소의 이미지 주소(파일명)에 사용되었다. 파일명이 img0, img1, img2 이므로 존재하지 않는 파일명이 생성되는 것에 대응하기 위한 분기 처리를 하였다. 변수값이 3이될 경우 0, 변수값이 0보다 작아질 경우 2로 작성하여 loop될 수 있게 하였다. 함수 안에 return false;를 선언하여 a태그의 링크 기능인 href의 실행을 막았다. var num = 0; function next() { num ++ if(num === 3) { n..

document.createElement() script 부분에서 메서드를 이용해 DOM에 마크업 요소를 추가할 수 있다. 이렇게 만든 요소는 따로 추가하는 작업을 거치지 않는다면 DOM에 추가되지 않고 메모리에만 존재한다. parent.appendChild(element); 만들어진 element는 appendChild 메서드를 통해 DOM에 추가를 해줘야 한다. 또, DOM 요소 생성 시 태그 뿐 아니라 텍스트 노드도 생성이 가능하며 마찬가지로 appendChild를 통해 부모 태그에 넣어줄 수 있다. onclick = function() { // 1. #h1space 변수 저장 (저장 위치) var click1 = document.getElementById("h1space"); // 2. #crea..

부모 개체에게 display : flex를 선언해주면 float처럼 다른 박스들의 흐름을 해치지 않고도 자식 요소에게 동일하게 적용되는 수직/수평 정렬을 쉽게 구현할 수 있다. flex-direction : row, row-reverse, column, column-reverse flex-wrap : nowrap, wrap, wrap-reverse order : 플렉스 아이템에 적용, 0보다 작은 값을 지정할 경우 제일 첫번째로 위치할 수 있다. * { box-sizing: border-box; /* 박스 사이즈를 width와 height 기준이 아닌 border 기준으로 설정 */ margin: 0; } body { font-family: "Roboto", sans-serif; letter-spacin..

HTML 웹 페이지는 일종의 문서다. 여러가지 프로그래밍 언어가 접근할 수 있게 만든 문서 인터페이스를 DOM이라고 부르는데, DOM이란 문서 객체 모델(Document Object Model)의 준말이다. HTML,CSS,JavaScript를 통해 DOM 구조에 접근하여 문서 구조, 스타일, 내용을 변경한다. 선택자 원거리 선택자 getElementById getElementByTagName 근거리 선택자 parentNode childNode children firstChild previousibling nextSibling DOM이 없다면 스크립트 언어는 웹 페이지에 대한 정보를 갖지 못하게 된다. 자바스크립트에서는 를 작성하여 문서 자체를 조작하거나 window elements를 위한 API를 사용..