어제 오늘 내일

지난번에는 버튼의 배경색을 변경하는 방법을 알아보았습니다. [HTML/CSS] 버튼 배경색 지정하기 버튼에 기본적으로 적용된 글자색은 검정입니다. 만약, 버튼의 배경색을 어두운 색으로 변경한다면, 버튼의 글씨가 잘 보이지 않게 됩니다. 이때는, 버튼의 글자를 밝은 색으로 변경해주어야 합니다. 버튼 글자색 변경하기 (color) 버튼 .my_btn { background-color: black; color: white; } color: white; CSS의 color 속성을 사용하여 버튼의 글자색을 흰색으로 변경하였습니다.

background-color 버튼의 배경색은 CSS의 background-color 속성으로 지정할 수 있습니다. 예제 Default 버튼 하늘색 오렌지색 보라색 .skyblue_btn { background-color: skyblue; } .orange_btn { background-color: #FFA500; } .purple_btn { background-color: rgb(128, 0, 128); } background-color 속성을 이용하여 버튼의 색깔을 변경하였습니다. 그런데, 배경색이 변경된 버튼은 기존의 버튼처럼, 마우스 오버가 되거나, 버튼이 클릭되었을 때 배경색이 변경되지 않아서, 마치 눌러지지 않는 버튼 처럼 보이고 있습니다. 다음 포스팅에서는 배경색이 변경된 버튼에 마우스 오버..

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

HTML에서 페이지를 이동할 때는 보통 태그를 사용하여 링크를 만듭니다. 그렇지만, 버튼을 클릭했을 때, 다른 페이지로 이동하고 싶다면 어떻게 해야할까요? 버튼 클릭시 페이지 이동하기 function newPage() { window.location.href = 'https://hianna.tistory.com' } window.location.href = 'https://hianna.tistory.com'; 버튼에 onclick 이벤트가 발생하면, newPage() 함수가 호출되고, 이 함수는 window.location.href 값을 새로운 페이지로 변경합니다. window.location.href는 현재 열려 있는 페이지 주소를 담고 있는 속성입니다. 여기서는 페이지를 이동하기 위해 이 값을 바꾸어..

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] 입력받은 데이터 서버로 전송하기 - submit 이번에는 입력 받은 데이터를 서버로 전송하지 않고, 다른 스크립트를 실행할 수 있는 버튼을 만드는 방법을 알아보도록 하겠습니다. 태그로 버튼(button) 생성하기지난번 포스팅에서 태그의 ‘type’ 속성에 들어가는 값들에 대해서 알아보았습니다.text 일반 텍스트를 입력받을 수 있습니다.password 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다.submit 태그 내에 입력된 데이터를 서버로 전달해 줍니다.button 버튼을 생성해 줍니다.checkbox 체크박스 형태의 입력을 받을 수 있습니다.radio 라디오 버튼 형..