어제 오늘 내일

지난 번에는 하이퍼링크(a href)의 밑줄을 없애는 방법을 알아보았습니다. [HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기 [HTML/CSS] 링크(a href)의 밑줄 없애기, 점선, 색깔 바꾸기 HTML에서 다른 페이지로 이동할 수 있는 링크를 생성하면 기본적으로 아래에 밑줄이 표시됩니다. 블로그 메인으로 가기 CSS를 적용해서 이 밑줄을 없애는 방법을 알아보겠습니다. 밑줄 없애기 (tex hianna.tistory.com 기본 하이퍼링크는 사용자가 링크를 클릭하기 전과 후의 링크 색깔이 다릅니다. 이번에는 하이버링크의 색깔을 바꾸는 방법에 대해서 정리합니다. 하이퍼링크 글자색 바꾸기 블로그 홈으로 이동하기 a:link { color : pink; } a:visited {..

버튼에 강제 클릭 이벤트 발생 시키기 (click()) function handleInputOnkeyup() { document.getElementById('my_btn').click(); } function handleButtonOnclick() { alert('버튼이 클릭되었습니다!!'); } 위 예제는 사용자가 input 창에 키보드로 값을 입력했을 때 강제로 '확인'버튼의 이벤트를 발생시키는 예제입니다. 조금 이상하지만, 특정 이벤트가 발생했을 때 버튼을 강제로 클릭시키는 것을 보여주기 위해 이렇게 만들었습니다. 먼저 '확인' 버튼을 눌러보세요. '확인' 버튼을 클릭하면, '버튼이 클릭되었습니다!!' 라는 alert 창이 뜹니다. input 창에 키보드로 아무거나 타이핑을 해보세요. input 창..

innerText와 innerHTML은 단순한 텍스트만 다룰 경우에는 차이가 없어 보입니다. 이 두 속성은 다루는 값이 text element인지, html element인지에 따라 차이가 납니다. 값 가져오기 (innerText vs innerHTML) A B function getInnerText() { const element = document.getElementById('content'); // A // B alert(element.innerText); } function getInnerHTML() { const element = document.getElementById('content'); // A // B alert(element.innerHTML); } element.innerText; ..

Javascript에서 버튼을 활성화/비활성화 하는 방법을 알아봅니다. input 태그의 disabled 속성 HTML의 태그를 사용한 버튼을 활성화/비활성화 할때는 disabled 속성을 이용합니다. 기본적으로 input 태그에 disabled 속성을 따로 명시해 주지 않으면, 버튼은 활성화됩니다. input 태그에 disabled 속성을 명시해 주면, 버튼이 비활성화 됩니다. disabled 속성에 어떤 값을 주면, 버튼은 활성화되게 됩니다. 따라서, disabled 속성에 값을 주면서, 버튼을 비활성화 하고 싶다면 'disabled'라고 명시해 주어야 합니다. 버튼 클릭하여 활성화/비활성화 하기 '활성화' 또는 '비활성화' 버튼을 클릭하세요 function btnActive() { const tar..

브라우저에서 버튼을 클릭했을 때, 숫자를 증가/감소 시키는 코드입니다. 버튼 클릭시 숫자 증가/감소 시키기 0 function count(type) { // 결과를 표시할 element const resultElement = document.getElementById('result'); // 현재 화면에 표시된 값 let number = resultElement.innerText; // 더하기/빼기 if(type === 'plus') { number = parseInt(number) + 1; }else if(type === 'minus') { number = parseInt(number) - 1; } // 결과 출력 resultElement.innerText = number; } HTML onclick=..

HTML에서 링크된 페이지를 새창 또는 새탭으로 여는 방법입니다. 블로그 새창에서 열기 태그로 링크된 페이지를 새창 또는 새탭으로 열기 위해서는 target 속성을 추가하고, 그 값을 '_blank'로 지정해야합니다. 하지만, 아쉽게도 '새창'에서 열 것이냐, '새탭'에서 열 것이냐는 HTML로 지정할 수 없습니다. 그것은 사용자 브라우저의 설정을 따릅니다. 인터넷 익스플로러(IE) 링크 새탭/새창에서 열기 설정 구글 검색 결과 새탭에서 열기

이번에는 버튼을 클릭하여 테이블에 행을 추가하고 삭제하는 방법을 알아보도록 하겠습니다. 1. 테이블에 행 추가하기 - insertRow(), insertCell() 2. 테이블에 행 삭제하기 - deleteRow() 1. 테이블에 행 추가하기 - insertRow(), insertCell() insertRow(), insertCell() 함수 테이블에 행(Row)를 추가하기 위해서는 insertRow(), insertCell() 함수를 사용합니다. insertRow() var newRow = HTMLTableElement.insertRow(index); table element에 새로운 행을 추가해 줍니다. 파라미터 index 새로 생성된 행(row)가 테이블에 들어갈 위치 index를 넣어줍니다. 파라..

HTML에서 테이블을 표현하고, 테이블의 셀을 병합하는 방법을 알아보도록 하겠습니다. 먼저, HTML로 테이블을 그리는 방법을 모른다면 지난 포스팅을 참조하세요. [HTML] 기본 테이블(표, Table) 그리기 (table, tr, td, th) [HTML] 테이블 제목 지정하기, caption tag 아래 예제 테이블을 가지고 가로, 세로 셀 병합을 해 보도록 하겠습니다. 학년 반 1 1 1 2 2 1 세로 셀 병합하기 (rowspan) 학년 반 1 1 2 2 1 위 코드는 2개의 '1학년' 항목이 2 row가 병합되었습니다. 2개의 row가 병합되었으므로, 결국 세로 방향으로 합쳐진 셀이 만들어진 것입니다. 여러줄의 row를 병합 할때는 위의 예시처럼 병합을 시작하려는 cell에 rowspan을 정..

체크박스를 클릭하여 선택할 때마다, 총 몇개가 선택되었는지, 체크된 항목의 개수를 구하는 예제입니다. 체크박스에 체크된 항목 개수 구하기 개 고양이 토끼 function getCheckedCnt() { // 선택된 목록 가져오기 const query = 'input[name="animal"]:checked'; const selectedElements = document.querySelectorAll(query); // 선택된 목록의 갯수 세기 const selectedElementsCnt = selectedElements.length; // 출력 document.getElementById('result').innerText = selectedElementsCnt; } (HTML, JS 탭을 클릭하여 두 ..

사용자에게 input 창에 입력을 받을 때, 사용자 키보드의 Caps Lock 키가 활성화 되어 있는지 확인하여, Caps Lock이 활성화 되어 있으면 메시지를 보여주는 방법을 소개합니다. Caps Lock 키 활성화 여부 체크하기 function checkCapsLock(event) { if (event.getModifierState("CapsLock")) { document.getElementById("message").innerText = "Caps Lock이 켜져 있습니다." }else { document.getElementById("message").innerText = "" } } 위 예제는 입력창에 뭔가가 입력되면, 사용자의 키보드에 Caps Lock 키가 활성화 되어 있을 경우, 입력창 ..