[HTML] 목록 만들기 * 순서 있는 목록을 만드는 , 태그 - 기본형 항목1 항목2 - 태그의 type, start 속성 종류 설명 type = "1" 숫자(기본값) type = "a" 영문 소문자 type = "A" 영문 대문자 type = "i" 로마 숫자 소문자 type = "I" 로마 숫자 대문자 * 순서 없는 목록을 만드는 , 태그 - 기본형 항목1 항목2 * 설명 목록을 만드는 , , 태그 - 기본형 이름 값 HTML, CSS, Javascript 2021.08.27
[HTML] 텍스트 입력하기 * 제목을 나타내는 태그 제목 스타일을 미리 태그 형태로 만든 것이 바로 제목 태그이다. - 기본형 : 제목 (...생략...) HTML이란? HTML은 웹 문서를 만들기 위하여 사용하는 웹 언어의 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다. 우리 모두 HTML을 공부합시다. (...생략...) 태그에서 h는 제목을 뜻하는 heading을 줄인 말이다. n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다. 이 가장 큰 제목이고 , ... 의 순서로 크기가 작아진다. * 인용할 때 쓰는 태그 - 기본형 : 인용문 (...생략...) 비타민C와 비타민P는 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다. (...생략...) * 텍스트를 굵게 표시하는 , 태그 - 기본형 :.. HTML, CSS, Javascript 2021.08.27
[Javascript] 행(row)과 열(column)을 그리는 프로그램 프로그램을 만들기 전에 table, td, tr 요소의 관계를 생각해야 한다. td는 tr 요소에 속하며 tr요소는 table 요소에 속한다. 따라서 부모 노드와 자식 노드의 관계를 생각하면 될 것이다. 먼저 프로그램의 뼈대를 구성하는 CSS부터 작성한다. CSS를 작성했다면 화면을 표시하는 HTML을 작성한다. 행 열 작성 drawTable(); 뒤에 return false;를 써둔 이유는 drawTable()함수를 한번만 실행하기 위함이다. 그리고 value는 1로 초기화를 시켜준다. 이제 표를 그리기 위한 Javascript를 작성하기만 하면 프로그램은 완성이다. Javascript를 작성하기 위한 의사 코드는 다음과 같다. 1. table 요소 노드를 만든다. 2. 입력한 행의 개수만큼 반복하면서.. HTML, CSS, Javascript 2021.08.24
[Javascript] DOM에서 노드 삭제하기 노드를 삭제할 때 먼저 기억해둬야 할 것은 부모 노드에서 자식 노드를 삭제해야 한다는 것이다. 즉, 삭제해야 할 노드가 있다면 반드시 부모 노드부터 찾아야 한다는 뜻이다. * parentNode 프로퍼티 parentNode 프로퍼티는 현재 노드의 부모 노드에 접근해서 부모 노드의 요소 노드를 반환한다. - 기본형 : 노드.parentNode 예를 들어 li 노드의 2번째 요소의 부모 노드를 알고 싶다고 하면 document.querySelectorAll("li")[1].parentNode; 다음과 같은 코드로 부모 노드를 찾을 수 있다. * removeChild() 메서드 removeChild() 메서드는 자식 노드를 삭제하는 역할을 한다. 부모 노드만 찾는다면 removeChild() 메서드를 사용하는.. HTML, CSS, Javascript 2021.08.23
[Javascript] DOM에서 노드 추가하기 * 요소 노드 만들기 - createElement() 메서드 DOM에 새로운 요소를 추가할 때 가장 먼저 할 일은 요소 노드를 만드는 것이다. 이 때 사용하는 메서드는 createElement()인데 괄호 안에 해당하는 요소 노드를 만들면 된다. - 기본형 : document.createElement(노드명) var newP = document.createElement("p"); // p 요소 노드 만들기 하지만 createElement() 메서드는 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것은 아니다. 이제 태그의 내용에 해당하는 텍스트 노드도 만들어야 한다. * 텍스트 노드 만들기 - createTextNode() 메서드 새로운 요소 노드를 만들었다면 그 다음은 내용을 담는 텍스트.. HTML, CSS, Javascript 2021.08.23