어제 오늘 내일

지난번에는 node와 element의 차이에 대해서 정리해보았습니다. 이번에는 dom에서 부모, 자식, 형제 노드(node)와 요소(element)를 탐색하는 방법을 정리해 보도록 하겠습니다. node 탐색 부모(parent) 노드 자식(child) 노드 형제(sibling) 노드 element 탐색 부모(parent) 요소 자식(child) 요소 형제(sibling) 요소 1. node(노드) 탐색하기 dom은 node의 계층 구조로 이루어져 있습니다. 따라서, node에는 element, text, comment 등 여러 항목이 포함되어 있다는 것에 주의하세요. node의 부모, 형제, 자식은 아래 표와 같은 속성을 통해 접근할 수 있습니다. 부모(parent) 노드 탐색 parentNode : 부모..

Javascript에서 DOM을 다루다 보면 node와 element가 자주 등장합니다. 이 2가지를 다루는 방법이 조금 달라서 헷갈리는 경우가 많은데, 이번 포스팅에서는 node와 element의 차이점을 정리해 보도록 하겠습니다. node vs element DOM 문서는 node의 계층 구조로 이루어져 있습니다. 이 node는 여러 가지 다양한 유형이 존재합니다. 요소(element), 텍스트, 주석 등등... element는 이러한 node의 여러가지 유형 중 한 가지입니다. 위 그림과 같이 element는 여러 가지 node의 유형 중 한 타입입니다. 즉, node는 element의 상위 개념입니다. 좀 더 자세히 설명하면, element는 html 문서에서 , , 과 같은 태그를 사용해서 작성..

Javascript에서 문자열의 마지막 문자를 제거하는 4가지 방법을 정리하였습니다. slice() substring() substr() replace() slice() slice() 함수는 문자열의 일부를 잘라서 새로운 문자열을 리턴합니다. str.slice(startIndex[, endIndex]) 파라미터 startIndex (필수 입력값) 잘라낼 문자열의 시작 index입니다. 0부터 시작합니다. 만약, 이 값이 음수이면, [문자열 길이 + startIndex]로 계산되어 실행됩니다. 예를 들어, 위 예제에서 startIndex가 -3이면, 이것은 (4+(-3)), 즉, 1과 같습니다. endIndex (optional) 문자열을 잘라낼 종료 index입니다. 0부터 시작합니다. 문자열이 추출될 ..

반복문을 사용하여 배열의 값을 출력하는 방법을 정리해보았습니다. for forEach() for in for of for // 배열 선언 const arr = ['A', 'B', 'C']; // 배열 출력 (for 문) for(let i = 0; i < arr.length; i++) { document.write(arr[i] + ' '); } 가장 기본적인 반복문인 for문을 사용하여 배열의 값을 출력하였습니다. 배열은 0부터 순서대로 index가 증가하기 때문에, for문을 이용하여 index를 증가시키고, 이 index를 사용하여 배열에 순차적으로 접근하여 각각의 값을 출력하였습니다. forEach() // 배열 선언 const arr = ['A', 'B', 'C']; // 배열 출력 (forEach..

이번에는 CSS에서 색상을 지정하는 방법을 정리해 보도록 하겠습니다. 색상을 지정하는 방법은 여러가지가 있지만 여기서는 가장 많이 사용되는 4가지 방법을 정리하였습니다. 이름 16진수 RGB 또는 RGBA HSL 또는 HSLA 1. 이름 색상의 이름을 직접 써서 컬러를 지정할 수 있습니다. 브라우저가 인식할 수 있는 색상 이름은 대략 147개입니다. 이 방법은 쉽게 색상을 지정할 수 있는 장점이 있지만, 표현할 수 있는 색상의 한정적이고, 색상을 사용하려면 이름을 외우고 있어야 한다는 단점이 있습니다. div { height : 20px; width : 200px; } 색상의 이름을 직접 css의 속성값으로 지정해 주었습니다. 전체 색상 이름은 아래 링크의 페이지를 참조하세요. Color keywords..

이번 포스팅에서는 Javascript에서 숫자를 배열로 바꾸는 2가지 방법을 소개합니다. Array.from() split(), map() 1. Array.from() Array.from(arrayLike[, mapFn[, thisArg]]) Array.from() 함수는 유사배열객체(array like object)나 반복가능한객체(iterable object)를 얕은 복사(shallow-copy)하여 새로운 Array 객체를 만들어서 리턴합니다. 파라미터 arrayLike 필수 입력값 배열로 변환하고자 하는 객체(array like object 또는 iterable object)를 입력합니다. mapFn 배열의 요소(element)들에 호출할 맵핑 함수. thisArg mapFn 내에서 this로 사..

Javascript에서 Number()와 parseInt()는 문자열을 숫자로 변환할 때 주로 사용됩니다. 이번에는 두 함수의 차이점을 정리해보도록 하겠습니다. Number() Number 객체는 숫자를 표현하는 wrapper 객체입니다. Number 객체는 Java나 C#에서의 double과 비슷합니다. 즉, Number 객체는 소수점 이하 17자리를 표현할 수 있습니다. Number()는 Number 객체의 Constructor로, Number 객체를 생성합니다. parseInt() parseInt()에 대한 설명은 이전의 포스팅을 참조하세요. [Javascript] 문자열 숫자로 변환하기 (1) - parseInt() 지난번에는 문자열이 숫자인지 아닌지 체크하는 방법을 알아보았습니다. [Javasc..

CSS를 적용하는 3가지 방법 HTML에 CSS를 적용하는 방법은 3가지가 있습니다. 인라인 (Inline CSS) 내부 (Embedded CSS) 외부 (External CSS) 인라인 (Inline CSS) 안녕하세요? 스타일을 적용하고자 하는 HTML 위치에 'style' 속성을 정의하여 HTML에 직접 스타일을 정의할 수 있습니다. 내부 (Embedded CSS) 안녕하세요? CSS 속성을 HTML의 태그 사이에 을 배치하는 방법입니다. 이 때는, HTML의 어느 항목에 CSS를 적용해야 하는지를 나타내기 위해 CSS 선택자를 사용해야 합니다. 위 예제에서는 태그 안의 'p'가 선택자(CSS Selector)입니다. 이것은 HTML의 'p' 태그를 선택하여 스타일을 적용하도록 합니다. 외부 (Ex..

밑줄 긋기 CSS를 사용하여 텍스트에 밑줄을 긋기 위해서는 다음과 같이 코드를 작성하였습니다. text-decoration: underline; 취소선 긋기 취소선을 그을 때는 밑줄 긋기와 마찬가지로 text-decoration 속성을 지정해줍니다. 다만, 속성값은 'line-through'로 지정해줍니다. text-decoration: line-through; 예제 다음은 밑줄과 취소선을 긋는 예제입니다. 밑줄 취소선 .underline { text-decoration: underline; } .strike-through { text-decoration: line-through; } 취소선 스타일링 취소선의 색깔, 굵기, 모양 등을 변경하는 것은 밑줄을 스타일링 하는 방법과 같습니다. 취소선의 스타일링..

이번 포스팅에서는 사용자가 체크박스를 선택했을 때, 텍스트 박스를 활성화하고 체크박스 선택을 해제했을 때, 텍스트 박스를 비활성화 하는 방법을 정리해보도록 하겠습니다. 체크박스 선택 시, 텍스트박스 활성화/비활성화 하기 다음 예제는 아래와 같이 동작합니다. 체크박스 선택 했을 때 텍스트 박스 활성화 텍스트 박스에 포커스 체크박스 선택해제 했을 때 텍스트 박스 비활성화 텍스트 박스 입력값 초기화 기타 의견 입력 function toggleTextbox(checkbox) { // 1. 텍스트 박스 element 찾기 const textbox_elem = document.getElementById('my_text'); // 2-1. 체크박스 선택여부 체크 // 2-2. 체크박스 선택여부에 따라 텍스트박스 활성..