옛날 블로그

//body안에 새로운 거 넣기 var newDiv = $("").text("새롭게추가한내용") .css("border","3px solid red") .mouseover(function() { $(this).css("background-color","pink"); }) .mouseleave(function() { $(this).css("background-color","white"); }) $("body").append(newDiv);

function removeNode(){/* var page = document.getElementById("sample_page"); page.removeChild(document.getElementById("content")); */ var content = document.getElementById("content"); content.parentNode.removeChild(content); } 이런식으로 첫번째놈은 부모가 뭔지 아는거고,뒤에쪽은 content의 부모의 이름이나 그런걸 모를 때, 자신의 ID를 얻어와서부모를 찾아서 다시 자기를 거시기 한다.

단적인 예로, 노드를 탐색해 색깔을 바꾸는 코드를 작성한다고 해보자 //자바스크립트 var divs=document.getElementsByTagName("div"); for(var i=0; i

page.innerHTML = " 안녕하세요"; 이러면 내용을 전체를 저 한문장으로 바꿔버린다; page.innerHTML = " 안녕하세요" + page.innerHTML; 따라서 이렇게 한다. 글 가운데에는 넣기가 좀 어려울것이다

function copyNode(){ var page = document.getElementById("sample_page"); var copyHeaderNode = document.getElementById("header").cloneNode(true); copyHeaderNode.style.backgroundColor = "pink"; page.appendChild(copyHeaderNode); } 노드복사하기..근데 이러면 ID도 복사되기 때문에 다시 바꿔줄 필요가 있겠다 copyHeaderNode.setAttribute("id","myHeader"); 이렇게 바꿔주자

function moveNode(){ var page = document.getElementById("sample_page"); page.appendChild(document.getElementById("header")); } 이렇게 하면 다른 노드가 하나 더 생기는게 아니라 그냥 옮겨가진다. 이렇게 간단하게 옮길수 있음!!

function findChildNode(){ //텍스트 노드는 자식을 가질수 없다. var page = document.getElementById("sample_page"); var children = page.childNodes; console.log("child갯수 : " + children.length); for(var i = 0 ; i

function addTextNode(){ var content = document.getElementById("content"); var newTextNode = document.createTextNode("추가내용"); content.appendChild(newTextNode); //글자에는 못꾸민다. 꾸미려면 elementNode에만 그런거 추가가능 } 얘는 그냥 데이타다 꾸미려고 착각하지 마 function updateTextNode(){ var header = document.getElementById("header"); header.firstChild.nodeValue = "hi"; } 텍스트 바꾸는건 일단 부모를 찾는다. 바로 접근하는건 어렵기 때문. 따라서 그놈의 엘리먼트를 찾아서 첫번째놈..

function addElementNodeByTextNode(){ var h2 = document.createElement("h2"); // h2.appendChild(document.createTextNode("안녕?"));//안녕하세요 var page = document.getElementById("sample_page"); page.insertBefore(h2, page.firstChild); //여기 h2에 스타일 주면 된다! 텍스트노드가 아니니까 } Jquery도 좋지만, 자바스크립트도 모두 할수있는 기능이다

@media screen and (max-width: 767px) { html { background: red; color: white; font-weight: bold; } } @media screen and (min-width: 768px) and (max-width: 979px) { html { background: green; color: white; font-weight: bold; } } @media screen and (min-width: 980px) { html { background: blue; color: white; font-weight: bold; } } 모바일의 경우는 가로, 세로도 설정해주어야 할 필요가 있껬다. @media screen and (orientation: portr..