NULL

opacity로 불투명도를 조절할 수 있습니다. opacity : 0 // 불투명도 100% opacity : 0.5 // 불투명도 50% opacity : 1 // 불투명도 0%

CSS background-attachment: fixed을 사용해서 파라렉스 디자인기법을 이용해서 웹사이트를 구현할 수 있다. https://opentutorials.org/course/2473/13856 Parallax(시차를 이용한 효과) - 생활코딩 수업소개 parallax는 시차라는 뜻으로 천문학에서 사용하는 용어입니다. 즉 멀리 있는 물체는 천천히 움직이고, 가까이 있는 물체는 빨리 움직이는 현상을 의미하죠. 이 현상을 이용하면 입체감, opentutorials.org

1 2 3 1 2 3 div p:first-child { font-size: 20px; } div p:first-of-type { font-size: 20px; } 구조 가상 셀렉터인 first-of-type는 div안의 p기준으로 p의 부모태그인 div안에 있는 첫번째 p를 선택한다. 반면 first-child는 div안에 있는 p기준으로 첫번째 p만 선택한다.

div 태그로 만든 Layer를 안보이게 하는 두가지 방법 1. display:none block 아예 사라지게 하는것. 보이지도 않고 해당 공간도 존재하지 않게 됨 2. visibility:hidden visible 보이지만 않고 해당 공간은 존재. width와 height값을 주었다면 그만큼 공간은 존재하게 됨 3. display = "" 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline div 태그 안에 있으면 block 가 쓰여지게 된다.

콜백함수는 함수에 파라미터로 들어가는 함수다. 순차적으로 실행하고 싶을 때 쓴다. function callback(){ console.log("callback function is called"); } setTimeout(callback, 3000); // ( 최초 1회만 ) 3초 뒤에 callback함수를 실행 setInterval( callback, 3000 ); // 3초마다 callback함수를 실행 setinterval을 종료시키려면 clearTimeout()을 해주면 종료된다. 사진에서 setInterval( callback, 3000 )을 실행시켰을 때 140의 값이 반환되었는데 그 값을 clearTimeout()안에 넣어주고 실행하게 되면 해당 함수가 종료된다.

.createElement()를 사용하면 해당 엘리먼트태그가 생성되서 반환된다. hr이라는 변수에 .createElement()를 이용하여 hr태그를 넣어서 사용해보겠다. hr = document.createElement("hr"); // hr변수 = hr태그 생성 그리고 hr변수로 예제들을 실행 해보겠다. document.body.appendChild(hr); // 해당요소 맨 마지막에 추가됨 원하는 곳에 넣으려면 document.body.insertBefore를 사용한다. document.body.insertBefore( hr, document.body.children[0]); // ( 넣을 값, 해당요소.위치 입력); 엘리먼트를 복사하고 싶을땐 .cloneNode()를 사용한다. hr2 = hr.c..

document.querySelector는 css형태로 선언한다. 선언법 document.querySelector("tag"); // 일반 태그 document.querySelector("#id"); // 아이디 document.querySelector(".class"); // 클래스 보기와 같이 선언하면 되며, 배열형식은 document.querySelectorAll을 선언하면 된다. document.querySelectorAll("h1, h2"); 보기와 같이 입력하면 h1, h2가 모두 선택된다.

document.getElementsByTagName("p") // 해당태그가 배열형태로 반환됨 document.getElementsByClassName("top"); // 해당클래스를 가진 태그들을 배열형태로 반환함 document.getElementsByClassName("top"); // 해당네임을 가진 태그들을 배열형태로 반환함 네임속성은 주로 input태그에 사용하며 a = document.getElementsByName("author")[0] // input태그 첫번째 값 a.value // 값을 불러옴 a.value = "가나다라"; // 값을 변경함 input태그의 경우 getAttribute메서드를 이용해서 값을 불러오면 input 입력 값은 실제 html속성으로 동기화가 되지않아서 값이..

이미지태그에 대해서는 api가 소스 프로퍼티, 소스속성을 동기화해주지만 src getAttribute가 정의되지 않은 태그는 비동기화되서 src 어트리뷰트가 정의 되지않는 태그는 getAttribute, setAttribute를 이와 같은 문제를 해결할 수 있다. 해당 엘리먼트.getAttribute("src"); 해당 엘리먼트.setAttribute("src", "변경 할 값 입력");

DOM이란? DOM탐색방법 document.children[0].children[1].parentNode document안에 children(자식).0번째 children(자식). parentNode(부모) 접근한다. children은 자식속성에 접근할 수 있다. parentNode는 부모속성에 접근할 수 있다. 이외에도 접근가능한 속성들이 존재한다. head = document.children[0].children[0] 위와 같이 head 기준으로 보자면 head.firstElementChild는 태그 head.lastElementChild는 태그 head.nextElementSibling는 head의 다음 형제를 가리킨다. = 태그 head.previousElementSibling는 head의 이전 ..