어제 오늘 내일

지난번에는 테이블 안의 글자를 정렬하는 방법을 알아보았습니다. [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'으로 정의하였습니다. 이때..

Javascript에서 좌표를 나타내는 값인 다음 값들에 대해서 정리해 보겠습니다. 그리고, 마우스를 클릭했을 때 좌표값을 보여주는 코드도 작성해 보겠습니다. 1. screenX, screenY 2. pageX, pageY 3. clientX, clientY 4. offsetX, offsetY 1. screenX, screenY 사용자 모니터 화면을 기준으로 한 좌표를 표시합니다. 사용자 모니터의 왼쪽 상단 모서리가 (0, 0)이 됩니다. 2. pageX, pageY 전체 문서를 기준으로 한 좌표를 표시합니다. 위 그림과 같이, 만약 문서를 표현할 때 스크롤이 생긴다면, 특정 지점의 pageY 좌표값은 페이지가 스크롤 될때마다 변경 될 것입니다. 3. clientX, clientY 브라우저에서 사용자에게..

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에서 처리할 수 있는 키보드 이벤트의 종류를 정리하였습니다. 1. 키보드 이벤트의 종류 keydown - 사용자가 키보드의 키를 눌렀을 때 발생합니다. keyup - 사용자가 키보드의 키를 눌렀다가 떼었을 때 발생합니다. keypress - 사용자가 키보드를 눌렀을 때 발생합니다. - Alt, Ctrl, Shift, Esc 키등 몇 가지 키에서는 이 이벤트를 발생시키지 않습니다. - 이 이벤트는 사용을 권장하지 않습니다. 2. keydown, keyup, keypress 예제 const my_input = document.getElementById('my_input'); const clear_btn = document.getElementById('clear'); const result_..

Javascript에서 이벤트가 한번만 실행되도록 하는 방법을 정리합니다. 등록된 이벤트가 한번만 실행되도록 하기 위해서는 addEventListener() 함수를 사용하여 이벤트를 등록할 때 once 옵션을 추가해 줍니다. addEventListener()의 once 옵션 사용하기 const my_btn = document.getElementById('my_btn'); my_btn.addEventListener('click', () => { alert('안녕하세요!!'); }, { once : true}); 버튼을 클릭했을 때, 한번만 동작하도록 하기 위해 addEventListener() 메소드의 3번째 파라미터로 { once : true } 인 객체를 전달하였습니다.