어제 오늘 내일

Visual Studio Code (VSCode)의 에디터 창의 글자 크기를 조정하는 방법 2가지를 소개합니다. 1. 글자 크기 숫자로 지정하기 (1) 설정 메뉴에 들어갑니다. 다음 중 한가지 방법을 선택하여 설정 메뉴에 들어갑니다. File > Preperences > Settings 메뉴 이용 화면 왼쪽 하단의 톱니바퀴 모양의 '설정' 아이콘 이용 단축키 : Ctrl + , 이용 (2) User > Text Editor > Font > Font Size Font Size를 숫자로 지정합니다. 2. 마우스 휠로 조정하기 마우스 휠과 Ctrl키를 이용하여, 에디터 창의 글자 크기를 조정할 수도 있습니다. (1) Setting > User > Text Editor > Mouse Wheel Zoom (Mou..

정규식을 이용하여 문자열의 마지막에 콤마가 있을 경우, 콤마를 제거하는 방법을 소개합니다. 문자열에서 마지막 콤마 제거하기 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

지난번에는 테이블의 행을 삭제하고 추가하는 방법을 알아보았습니다. [Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭) [Javascript] 테이블에 행 추가, 삭제하기 (버튼 클릭) 이번에는 버튼을 클릭하여 테이블에 행을 추가하고 삭제하는 방법을 알아보도록 하겠습니다. 1. 테이블에 행 추가하기 - insertRow(), insertCell() 2. 테이블에 행 삭제하기 - deleteRow() 1. 테이블에 행 추 hianna.tistory.com 이번에는 버튼을 클릭 했을 때, 테이블의 행을 숨기거나, 보여주는 방법을 정리해 보겠습니다. display 스타일 속성 사용하여 행 숨기기/보이기 사과apple 오렌지orange 바나나banana function hideRow() { cons..

border-radius 30px 30% 30px, 10px 30px, 10px, 50px 10px, 20px, 30px, 40px #ex1 { background-color : green; border-radius: 30px; } #ex2 { background-color : red; border-radius: 30%; } #ex3 { background-color : gray; border-radius: 30px 10px; } #ex4 { background-color : lightpink; border-radius: 30px 10px 50px; } #ex5 { background-color : purple; border-radius: 10px 20px 30px 40px; } #ex1, #ex2, #..

HTML과 CSS를 이용하여 테이블 안의 글자를 정렬하는 방법을 정리하였습니다. 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 2. 글자 위, 아래, 중간 정렬하기 (세로 정렬) 3. 정리 (가로 세로 모두 가운데 정렬하기) 1. 글자 왼쪽, 오른쪽, 가운데 정렬하기 (가로 정렬) 테이블 안의 글자의 가로 방향 정렬은 CSS의 'text-align' 속성을 사용하고, 속성값으로 'left', 'right', 'center'가 올수 있습니다. 기본 Product Price Apple 3000 Banana 2000 table, td, th { border : 1px solid black; border-collapse : collapse; } table { width : 300px; height :..

기본 테이블 그리기 HTML에 아무런 스타일을 지정하지 않고, 태그만 사용해서 테이블을 그리면 테두리가 표시되지 않습니다. Product Price Apple 3000 Banana 2000 테이블에 테두리 표시하기 테이블의 테두리를 표시하기 위해서 HTML과 CSS의 border 속성을 사용할 수 있습니다. HTML의 border 속성 Product Price Apple 3000 Banana 2000 태그에 border 속성값을 1로 지정하였습니다. CSS의 border 속성 Product Price Apple 3000 Banana 2000 table, td, th { border : 1px solid black; }; CSS의 border 속성을 '1px solid black'으로 정의하였습니다. 이때..