어제 오늘 내일

지난번에는 div에 onclick 이벤트를 거는 방법, 그리고, div에 마우스 오버되었을 때 마우스 커서를 손가락 모양으로 변경하는 방법을 알아보았습니다. [Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법 [Javascript/HTML] div에 클릭 이벤트(onclick) 넣는 2가지 방법 는 원래 사용자가 클릭할 수 없는 객체입니다. 사용자가 div를 클릭하게 하려면, div에 onclick 이벤트를 걸어주어야 합니다. 여기서는 div에 onclick 이벤트를 거는 2가지 방법을 정리해 보았습니다. 1. hianna.tistory.com [HTML/CSS] div에 마우스 오버시 손가락 아이콘 나타내기 [HTML/CSS] div에 마우스 오버시 손가락 아이콘 나..

는 원래 사용자가 클릭할 수 없는 객체입니다. 사용자가 div를 클릭하게 하려면, div에 onclick 이벤트를 걸어주어야 합니다. 여기서는 div에 onclick 이벤트를 거는 2가지 방법을 정리해 보았습니다. 1. HTML, Javascript 사용하기 html과 Javascript를 이용하여 div에 onclick 이벤트를 추가하는 방법입니다. .my-div { width : 150px; height : 150px; background-color : blue; } function hello() { alert('안녕하세요'); } [JS] div 클릭시 실행될 hello() 함수를 정의하였습니다. div가 클릭되면, '안녕하세요' 메세지를 출력하는 alert 창을 띄웁니다. [HTML] onclic..

Javascript를 이용하여 DOM 객체를 다루는 방법을 알아보고 있습니다. [Javascript] 선택자, DOM 특정 요소(element) 찾기 [Javascript] class 추가/변경/삭제/읽기 (className, classList) [Javascript] innerHTML, innerText, textContent 차이점 이번에는 DOM의 CSS Style을 변경하고, 읽어오는 방법을 정리해 보도록 하겠습니다. 1. style 속성값 변경 (1) style 속성 사용하기 - css 속성 하나씩 추가하기 (2) style.cssText 사용하기 - css 속성 한번에 여러개 추가하기 (3) style, style.cssText 사용시 주의할 점 2. style 속성값 읽어오기 (1) styl..

Javascript에서 주석을 다는 방법은 2가지가 있습니다. 한줄 주석 달기 여러줄 주석 달기 한줄 주석 달기 ( // ) // id가 greeting인 element에 '안녕하세요~' 메제지를 추가합니다. document.getElementById('greeting').innerText += '안녕하세요~'; 간단하게 한줄짜리 주석을 달때 사용합니다. 여러줄 주석 달기 ( /* 주석내용 */ ) /* id가 greeting인 element에 '안녕하세요~' 메제지를 추가합니다. */ document.getElementById('greeting').innerText += '안녕하세요~'; 여러줄의 주석을 한번에 추가해야 할때 사용합니다. '/*'(주석 시작)와 '*/'(주석 종료) 표시가 항상 대꾸가 ..

React의 개발 환경을 구성하려면, 여러가지 도구들이 필요하고, 이 도구들에 대한 설정을 해 주어야 한다. 대표적으로 webpack + babel 설정을 해 주어야 한다. webpack : JavaScript의 static module bundler babel : JavaScript Compiler (Transpiler) babel babel은 Javascript의 compiler라고 할 수 있다. Java나 C의 컴파일러처럼, 소스코드를 바이너리 파일로 변환하는 것은 아니지만, 아래와 같이 React의 JSX문법을 Vanilla JavaScript로 변경하거나, 최신버전의 문법을 구 버전 문법으로 변환해 준다. JSX 를 Vanilla JavaScript로 변경해 준다. React에서는 JSX라는 R..

정규식을 이용하여 문자열의 마지막에 콤마가 있을 경우, 콤마를 제거하는 방법을 소개합니다. 문자열에서 마지막 콤마 제거하기 const str1 = "apple, banana"; const str2 = "apple, banana,"; const str3 = "apple, banana, "; str1과 같이 문자열의 끝에 콤마가 없을 경우, 문자열을 그대로 유지하고, str2와 같이 문자열의 끝에 콤마가 있을 경우, 문자열에서 콤마를 제거하고, str3과 같이 문자열의 끝에 콤마가 있고, 빈 공백이 이어진 경우, 문자열에서 콤마를 제거하는 방법을 소개합니다. const str1 = "apple, banana"; const str2 = "apple, banana,"; const str3 = "apple, ba..

배열 첫번째 값 가져오기 const arr = [1, 2, 3, 4, 5]; const firstValue = arr[0]; document.writeln(firstValue); const firstValue = arr[0]; 배열의 첫번째 값을 가져오기 위해서 배열의 0번째 index 값을 읽었습니다. (배열의 index는 0부터 시작합니다.) 배열 마지막 값 가져오기 const arr = [1, 2, 3, 4, 5]; const lastValue = arr[arr.length - 1]; document.writeln(lastValue); const lastValue = arr[arr.length - 1]; 배열의 마지막 값을 읽어오기 위해서 (배열의 길이 - 1) 번째 index 값을 읽었습니다. 위..

HTML에서 목록을 표현할 때, , , 를 사용합니다. [HTML] 순서없는 목록 만들기 [HTML] 순서있는 목록 만들기 이번에는 HTML에서 목록을 표현하는 , , 에 동적으로 목록을 추가하고 삭제할 수 있는 방법을 소개합니다. 에 동적으로 추가하기 function addList() { // 1. 추가할 값을 input창에서 읽어온다 const addValue = document.getElementById('addValue').value; // 2. 추가할 li element 생성 // 2-1. 추가할 li element 생성 const li = document.createElement("li"); // 2-2. li에 id 속성 추가 li.setAttribute('id',addValue); // 2..

지난번에는 테이블 안의 글자를 정렬하는 방법을 알아보았습니다. [HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬) [HTML/CSS] 테이블 글자 왼쪽, 오른쪽, 가운데, 위, 아래, 중앙 정렬하기 (가로, 세로 정렬) HTML과 CSS를 이용하여 테이블 안의 글자를 정렬하는 방법을 정리하였습니다. 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 2. 글자 위, 아래, 중간 정렬하기 (세로 정렬) 3. 정리 (가로 세로 모 hianna.tistory.com 이번에는, CSS를 사용해서 HTML 테이블을 가운데 정렬하는 방법입니다. 테이블 가운데 정렬하기 Product Price Apple 3000 Banana 2000 table { margi..

지난번에는 구구단을 출력하는 방법을 알아보았습니다. [Javascript] for문 이용해서 구구단 출력 [Javascript] for문 이용해서 구구단 출력 지난번에는 for문의 기본적인 사용방법을 알아보고, 별찍기 예제도 만들어 보았습니다. [Javascript] 반복문(1) - for [Javascript] for문을 이용해서 별찍기 이번에는 for문을 응용하여 구구단을 찍는 예제 hianna.tistory.com 이번에는 구구단을 테이블 형태로 만들어보겠습니다. 구구단 테이블 document.write(''); // header document.write(''); document.write(''); for(let i = 2; i