어제 오늘 내일

기본 테이블 그리기 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'으로 정의하였습니다. 이때..

CSS의 속성을 이용하여 div의 테두리를 그리는 방법을 정리하였습니다. 1. border 2. border-style, border-width, border-color 3. border-top, border-right, border-bottom, border-left 4. outline 5. outline과 border의 차이점 1. border border 속성 사용하기 1 안녕하세요? div { width : 100px; height: 100px; background-color: #f5d682; border: 1px solid red; } CSS의 border속성을 정의하여 div의 테두리를 그려주었습니다. border 속성 사용하기 2 dotted red solid 6px solid div { w..

Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다. 1. getElementById() 2. getElementsByClassName() 3. getElementByTagName() 4. querySelector() 5. querySelectorAll() 1. getElementById() Div1입니다. Div2입니다. function getDiv1() { const div1 = document.getElementById('div_1'); alert(div1.innerText); } document.getElementById(); 파라미터로 찾으려는 id를 전달하여, 해당 element를 찾을 수 있습니다. id는 유일한 값이므로, 하나의 element만 리턴합니다. ..

지난번에는 안의 내용을 추가, 변경, 삭제하고, 읽어오는 방법을 알아보았습니다. [Javascript] div 안의 내용 가져오기, 추가, 변경, 삭제 (text, html) 이번에는 태그를 생성하고, 삭제하고, 숨기는 방법을 정리해 보도록 하겠습니다. 1. element 생성하기 function createDiv() { // 1. element 만들기 const newDiv = document.createElement('div'); // 2. 에 들어갈 text node 만들기 const newText = document.createTextNode('안녕하세요'); // 3. 에 text node 붙이기 newDiv.appendChild(newText); // 4. 에 1에서 만든 element 붙이기..

지난 번에는 하이퍼링크(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) 링크 새탭/새창에서 열기 설정 구글 검색 결과 새탭에서 열기