dailyoon

>노드 생성 createElement(요소이름) :새로운 요소 노드 만들기 ---->1. 요소이름추가 2. 요소이름안에 내용넣기 3.추가메소드로 원하는 위치에 넣기 createAttribute(속성이름) :새로운 속성 노드 만들기 ---->1. 속성이름추가 2.속성안에 직접 속성값 주기 3.속성추가메소드쓰기. createTextNode(추가할 텍스트 내용) :새로운 텍스트 노드 만들기 ---->1.추가할 텍스트 내용추가 2.원하는 위치에 텍스트 추가 >노드 제거 removeChild() :자식 노드 리스트에서 특정 자식 노드를 제거 - 성공적으로 노드를 제거하면 제거되는 노드가 반환 - 노드가 제거될 때에는 제거되는 모든 자식들도 같이 제거됨. >노드 복제 cloneNode(true/false) :기존의..

1.prompt 사용하여 초기 비밀번호 설정하기 - let pw_input = prompt ("자동차 초기 비밀번호 입력"); 2.초기 이미지는 "출발전.png"로 설정 - 안 img src속성에 넣어주기. 3.textarea(status), img(img), button(on,off) ,input(pw)모두 style 변경 해주어야 하므로 모두 데려오기 let status = document.getElementById("status") let img = document.getElementById("img") let on = document.getElementById("on") let off = document.getElementById("off") let pwTag = document.getElemen..

>함수 - 자바스크립트에서는 함수도 하나의 타입이다.따라서 함수를 변수에 대입할 수 있다. : 다른 함수 내에 중첩되어 정의할 수도 있다. function 함수이름(매개변수1, 매개변수2,...){ 실행할 문장 return 리턴값; } 1. 함수의 선언과 호출 1) 함수의 선언 function count() { for (let i= 0; i디폴트 매개변수 - 매개변수를 정하지 않으면 기본값을 대신 변수에 저장한다. fuction 함수이름(매개변수1, 매개변수2=값,...){ 실행할 문장 return 리턴값; } >나머지 매개변수 - 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정할 수 있다. - 함수 선언문 위에 함수를 호출할 수 있다. function 함수이름(매개변수..

>자바스크립트(Javascript)의 역사 넷스케이프에서의 시작 최초 웹인 www(Nexus)의 창시자가 더 발전된 브라우저를 만들기 위해 웹의 오픈소스를 개방을 했다. 이를 통해 최초로 대중적인 그래픽 웹 브라우저인 모자이크를 출시하게 되었다. 또한 이 회사의 한 직원이 회사를 설립하여 또 다른 브라우저를 내게 되었는데 그것이 nescape browser이다. 이 회사는 웹이 더 동적으로 변화할 필요가 있음을 실감하여 이미지,플러그인 등의 요소를 쉽게 조합할 수 있는 글루 언어가 필요했다고 믿었다. 1995년에는 스킴 프로그래밍 언어를 넷스케이프 내비게이터에 임베디드하기 위해 브렌든 아이크를 영입하였다.그는 무려 10일만에 언어를 완성했다. 이름은 mocha -> livescript 를 거쳐서 Java..

>상대크기 em, rem 1. em 단위는 상위 요소 크기의 몇 배인지로 크기를 설정 ex) 2em 상위요소 글자크기 : 16px 현재요소 글자크기 : 32px 2. rem 단위는 문서의 최상위 요소, 즉 html 태그 크기의 몇 배인지로 크기를 설정 ex) 2rem 요소 글자크기: 16px(기준) 상위 요소 글자크기: 32px 현재 요소 글자크기: 32px >CSS 2D transform - 이차원 좌표에서 요소를 변형시키는 속성 - 이동(translate), 확대(scale), 축소(scale), 회전(rotate), 경사(screw) 등을 만들 수 있음 * transform 과 position의 차이 -transform 은 눈에 보이는것을 이동한다. 그러나 실제 위치가 변하지는 않는다. but, p..

>다단 레이아웃 - 텍스트 단을 column 속성으로 다단으로 생성 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count :단의 개수를 설정 column-rule :단과 단 사이의 구분선, 구분의 모양, 두께 색상을 설정 column-gap :단과 단 사이의 여백을 설정 column-span :안의 포함된 요소에서 주면 해당 요소는 다단편집에서 해제 >플렉서블 레이아웃(flex) - 대부분의 웹사이트는 수직 구성 - 레이아웃을 구성할 때 가장 많이 사용되는 요소들이 대부분 블록개념으로 표기 - 수직 구성은 쉽게 구성할 수 있으나, 수평 구성은 구현하기 쉽지 않음 - 과거에는 수평구성을 , float속성, inline-block 형태로 구성했다. - 좀 더 쉽게 수평구성을 ..

>CSS display - 웹 페이지의 레이아웃을 결정하는 속성 1. block : display 속성이 블록인 요소는 새로운 라인에서 시작하고 해당 라인의 모든 너비를 차지, width, height 적용 2. inline : display 속성이 인라인인 요소는 같은 라인에서 시작하고 line-height가 적용 3. inline-block : block 성질과 inline 성질을 둘 다 적용 : width, height, margin, padding, line-height 모두 적용 : 요소를 가로로 나열 4. none : 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라짐. : 둘다 수행하면 보이지 않는것은 동일 -visibility: 해당하는 요소의 영역이 보이지 않을 뿐 빈공간으로 유..

>CSS의 배경 1. background-color HTML 요소의 배경색을 설정 2. background-image HTML 요소의 배경으로 나타날 배경 이미지로 설정 배경 이미지는 기본 설정으로 반복(바둑판 형식)되어 나타남 background-image : url('배경이미지 경로'); 3. background-repeat 배경 이미지를 수평이나 수직 방향으로 반복하도록 설정 repeat, repeat-x, repeat-y, no-repeat 4. background-position 반복되지 않는 배경 이미지의 상대 위치를 설정 %나 px을 사용해서 상대위치를 직접 설정할 수 있음 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단 left top center top right top left ce..

10. 속성 선택자 HTML요소의 여러 속성들(src, href,type,class,...)을 이용해서 선택자로 사용하고 스타일을 적용 [속성명]{ 스타일 적용 } [속성명 = 값]{ 스타일 적용 } [속성명 ~= 값] : 속성값이 완벽히 일치하는 문자를 가지는 요소를 선택 ex) css / css funny / funny css (공백으로 나눠져 있어야 인식한다) [속성명 *= 값] : 속성값이 포함된 모든 문자를 가지는 요소를 선택 *공백 또는 하이픈으로 나뉘든 어떤 경우든 속성값이 포함되면 선택된다. ex) css/css funny /funny css / css-funny / css_funny / cssfunny ..... [속성명 |= 값] : 속성값이 접두사로 시작되는 문자중에서 완벽하게 일치하..

>CSS(Cascading Style Sheets) -HTML 문서를 시각적으로 꾸며주는 역할을 하는 언어 >CSS 의 기본 문법 - HTML 문서 태그 안에 에 CSS문법을 작성 선택자 { 속성명: 속성값; 속성명: 속성값; } * { } 영역을 선언부 라고 한다. - HTML 문서의 각 태그 안에 style 속성 안에 CSS문법을 작성 style= "속성명: 속성값;, 속성명: 속성값;..." >CSS의 주석 /* 사이에 주석내용을 입력 */ >>CSS를 적용하는 방법 1. 인라인 스타일 HTML 요소 내부에 style 속성을 사용하여 적용하는 방법 그 style 속성이 적혀있는 요소에만 스타일을 적용 2. 내부 스타일 HTML 문서에 요소 안에 태그를 사용하여 적용하는 방법 해당 문서에만 스타일을 ..