어제 오늘 내일

동적 HTML 요소 추가하기 다음은 버튼이 클릭되면 container div에 동적으로 div text 요소가 추가되는 예제입니다. 텍스트 추가 function addText() { // 추가할 요소 생성 const newElement = document.createElement('div'); // 요소 안에 html 요소 추가 newElement.innerHTML = '텍스트가 추가되었습니다.'; // 생성된 요소를 추가할 부모요소(container div) 선택 const container = document.getElementById('container'); // 생성된 요소를 기존의 container div에 자식 요소로 추가 container.appendChild(newElement); } 위 ..

tree tree 명령어는 CMD에서 디렉토리 구조를 트리 형태로 표시해 주는 명령어입니다. 다음과 같이 사용할 수 있습니다. tree 경로 /f /a /f : 폴더 안의 파일명을 보여줍니다. /a : 폴더 트리를 그릴 때, 그래픽 문자 대신 텍스트 문자로 트리구조를 보여줍니다. 예제 1. tree 현재 폴더의 폴더구조를 보여줍니다. 예제 2. tree ./src 주어진 경로(./src)의 폴더 구조를 보여줍니다. 예제 3. tree ./src /f /f 옵션을 추가하면, 폴더 하위의 파일명까지 표시됩니다. 예제 4. tree ./src /f /a /a 옵션을 추가하면, 트리를 구성하는 선이 그래픽 문자가 아니라, 텍스트 문자로 표시됩니다.

1. inline-block .parent { border: 1px solid black; margin: 1px; padding: 10px; text-align: center; } .child { display: inline-block; width: 100px; height: 100px; background-color: skyblue; border: 1px solid black; } 는 기본적으로 'block' 요소입니다. block 요소는 항상 새로운 줄에 표시되고, 가로폭 전체를 차지합니다. 따라서, 요소는 항상 수직으로 배치되어 쌓이게 됩니다. display: inline-block; 를 가로로 배치하기 위해서 inline-block 속성을 지정하였습니다. inline-block은 inline과 b..

CMD 창에서 디렉토리를 삭제하는 명령어는 rmdir 입니다. (remove directory) rmdir 삭제할디렉토리경로 /s /q /s : 지정한 디렉토리 하위의 모든 디렉토리를 삭제합니다. /q : 지정한 디렉토리 하위에 디렉토리가 더 있을 경우 확인 메시지를 내보내지 않습니다. 예제 1. rmdir 프로젝트 경로 지정한 디렉토리 하위에 파일이 있으면 '디렉터리가 비어 있지 않습니다.'라는 메시지를 보여주고, 디렉토리 삭제를 중지합니다. 예제 2. rmdir 프로젝트 경로 /s /s 옵션을 주면 지정한 디렉토리 하위에 다른 디렉토리나 파일이 있을 경우, 하위 디렉토리와 파일을 모두 삭제합니다. 단, 삭제하기 전에 확인 메시지를 한번 보여 줍니다. 예제 3. rmdir 프로젝트 경로 /s /q /q..

Javascript에서 소수점 2번째 자리에서 올림, 내림, 반올림, 버림 하는 방법은 다음과 같습니다. 올림 (ceil()) ceil()은 주어진 숫자 이상의 가장 작은 정수로 값을 올리는 함수입니다. function ceilTest(number) { return Math.ceil(number * 100) / 100; } // 예제 document.write(ceilTest(10.123)); // 10.13 document.write(' '); document.write(ceilTest(5.6781)); // 5.68 입력값이 10.123인 경우를 예로 들어 설명하겠습니다. number * 100; 주어진 숫자 10.123에 100을 곱하면 1012.3입니다. Math.ceil(number * 100)..

Windows의 파워쉘에서 현재 경로를 확인하기 위해서 다음 2가지 명령어를 이용할 수 있습니다. pwd get-location pwd 'PWD'는 'Print Working Directory'의 약자입니다. get-location

CSS로 스크롤바를 항상 보이게 표시하려면 'overflow' 속성을 사용합니다. overflow, overflow-x, overflow-y 다음은 영역에 강제로 스크롤바를 생성한 예제입니다. 전체 scroll 가로 scroll 세로 scroll .mydiv1 { overflow: scroll; } .mydiv2 { overflow-x: scroll; } .mydiv3 { overflow-y: scroll; } div { width: 200px; height: 100px; background-color: skyblue; margin: 10px; border: 1px solid black; text-align: center; } overflow: scroll; 요소의 크기에 상관없이, 가로 세로 방향 스크..

Javascript에서 현재 날짜를 yyyymmddhhmmss 형식으로 표현하려면, 먼저 Date 객체를 활용하여 현재 날짜, 현재 시간을 구하고, 년, 월, 일, 시, 분, 초 정보를 읽어서 yyyymmddhhmmss 형식에 맞게 조합하여 줍니다. 먼저, 현재 날짜, 시간 구하는 방법이나, Javascript에서 날짜, 시간을 다루는 구체적인 방법은 아래 링크의 지난 포스팅을 참조하세요. [Javascript] 현재 날짜, 시간 구하기 [Javascript] Date 객체로 원하는 날짜, 시간 표현하기 [Javascript] 날짜 계산하기 (년/월/일 더하기, 빼기) [Javascript] 월의 마지막 날짜 계산하기 [Javascript] 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기 ..

경우에 따라 input 항목에 자동으로 포커스를 이동시켜서 사용자 편의를 증가시킬 수 있습니다. 다음은, 버튼 클릭 시 input 항목에 focus를 이동시키는 예제입니다. focus() 클릭하세요 function btnClick() { const myinput = document.getElementById('my-input'); myinput.focus(); } HTML 버튼 클릭 시, btnClick() 함수를 호출합니다. JAVASCRIPT document.getElementById('my-input'); getElementById() 함수를 이용하여, 포커스를 이동시킬 input 요소를 선택합니다. myinput.focus(); focus() 함수를 이용하여, 포커스를 input 요소로 이동시킵니..

Javascript를 이용하여 버튼 클릭 시 input form의 값(value)을 변경하는 예제입니다. 버튼 클릭 시, input 값 변경하기 클릭하세요 function btnClick() { const myinput = document.getElementById('my-input'); myinput.value = "안녕하세요"; } HTML 버튼을 클릭하면, btnClick() 함수를 호출합니다. JAVASCRIPT document.getElementById('my-input'); getElementById() 함수를 이용하여, id가 my-input인 input form 요소를 선택합니다. myinput.value = '안녕하세요'; 선택한 input form 요소의 value를 '안녕하세요'로 변..