If at first you don't succeed, try again

프로그램을 만들기 전에 table, td, tr 요소의 관계를 생각해야 한다. td는 tr 요소에 속하며 tr요소는 table 요소에 속한다. 따라서 부모 노드와 자식 노드의 관계를 생각하면 될 것이다. 먼저 프로그램의 뼈대를 구성하는 CSS부터 작성한다. CSS를 작성했다면 화면을 표시하는 HTML을 작성한다. 행 열 작성 drawTable(); 뒤에 return false;를 써둔 이유는 drawTable()함수를 한번만 실행하기 위함이다. 그리고 value는 1로 초기화를 시켜준다. 이제 표를 그리기 위한 Javascript를 작성하기만 하면 프로그램은 완성이다. Javascript를 작성하기 위한 의사 코드는 다음과 같다. 1. table 요소 노드를 만든다. 2. 입력한 행의 개수만큼 반복하면서..

구분 설명 프로퍼티 altKey 이벤트가 발생할 때 Alt키를 눌렀는지 여부를 boolean값으로 반환합니다. button 마우스에서 누른 버튼의 키값을 반환합니다. charCode keypress 이벤트가 발생할 때 어떤 키를 눌렀는지 유니코드값으로 반환합니다. clientX 이벤트가 발생한 가로 위치를 반환합니다. clientY 이벤트가 발생한 세로 위치를 반환합니다. ctrlKey 이벤트가 발생했을 때 Ctrl키를 눌렀는지 여부를 boolean값으로 반환합니다. pageX 현재 문서 기준으로 이벤트가 발생한 가로 위치를 반환합니다. pageY 현재 문서 기준으로 이벤트가 발생한 세로 위치를 반환합니다. screenX 현재 화면 기준으로 이벤트가 발생한 가로 위치를 반환합니다. screenY 현재 화..

프로그램을 만들기 전에 먼저 무작위로 숫자를 추출하는 random() 메서드부터 알아보겠다. Math.random() 콘솔 창에 위의 코드를 입력하면 위와 같이 0 ~ 1사이의 숫자가 소수점 단위로 무작위 출력되는 것을 확인할 수 있다. 이번에는 1과 100 사이의 숫자를 무작위로 출력해보겠다. Math.random() * 100 + 1 Math.random() 메서드를 실행한 값에 100을 곱하면 대략 0.000 ~ 99.999사이의 값이 된다. 따라서 이 계산값에 1을 더해주면 1과 100 사이의 숫자가 출력될 것이다. 정상적으로 출력되는 것을 볼 수 있다. 만약에 무작위로 추출되는 숫자를 정수로만 나타내고 싶다면 Math 객체의 floor() 메서드를 사용해주면 된다. Math.floor(Math...

먼저 CSS를 통해 만들고자 하는 프로그램의 뼈대를 구축한다. 책 읽기 일 연속으로 책 읽기를 달성했군요. 축하합니다! 현재 이 코드를 실행시키게 되면 아래와 같은 결과가 나타난다. 이제 여기서 해야할건 '일' 글자 앞에 계산한 일수를 추가하는 것뿐이다. accent 클래스의 ID인 'result'를 document.querySelector를 통해 지정을 해준 후 계산된 일 수인 passedTime을 대입해주면 프로그램은 완성된다.

* 미디어 쿼리의 속성 종류 속성값 width, height 웹페이지의 가로 너비, 세로 높이 min-width, min-height 웹페이지의 최소 너비, 최소 높이 max-width, max-height 웹페이지의 최대 너비, 최대 높이 device-width, device-height 단말기의 가로 너비, 세로 높이 min-device-width, min-device-height 단말기의 최소 너비, 최소 높이 max-device-width, max-device-height 단말기의 최대 너비, 최대 높이 orientation : portrait 단말기의 세로 모드 orientation : landscape 단말기의 가로 모드 * 플렉스 박스 레이아웃의 속성 종류 설명 속성값 display 플렉스 ..

*변형 함수 translate() 함수 : 요소 이동하기 translate: translate(tx, ty) 지정한 크기만큼 x축과 y축으로 이동합니다. translate: translate(tx, ty, tz) 지정한 크기만큼 x축과 y축과 z축으로 이동합니다. translate: translateX(tx) 지정한 크기만큼 x축으로 이동합니다. translate: translateY(ty) 지정한 크기만큼 y축으로 이동합니다. translate: translateZ(tz) 지정한 크기만큼 z축으로 이동합니다. scale() 함수 : 요소 확대, 축소하기 transform: scale(sx, sy) 지정한 크기만큼 x축, y축으로 확대, 축소합니다. transform: scale(sx, sy, sz) 지..

종류 설명 :only-child 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택한다. A:only-type-of 부모 안에 A 요소가 하나뿐일 때 선택한다. :first-child 부모 안에 있는 모든 요소 중에서 첫 번째 자식 요소를 선택한다. :last-child 부모 안에 있는 모든 요소 중에서 마지막 자식 요소를 선택한다. A:first-of-type 부모 안에 있는 A 요소 중에서 첫 번째 자식 요소를 선택한다. A:last-of-type 부모 안에 있는 A 요소 중에서 마지막 자식 요소를 선택한다. :nth-child(n) 부모 안에 있는 모든 요소 중에서 n번째 자식 요소를 선택한다. :nth-last-child(n) 부모 안에 있는 모든 요소 중에서 끝에서 n번째 자식 요소를 선택한다..

종류 선택 요소 예시 [속성] 해당 속성이 있는 요소 [required] [속성 = 값] 지정한 속성값이 있는 요소 [target = _blank] [속성 ~= 값] 지정한 속성값이 포함된 요소(단어별) [class ~= button] [속성 |= 값] 지정한 속성값이 포함된 요소 (하이픈 포함, 단어별) [title |= us] [속성 ^= 값] 지정한 속성값으로 시작하는 요소 [title ^= eng] [속성 $= 값] 지정한 속성값으로 끝나는 요소 [href $= xls] [속성 *= 값] 지정한 속성값의 일부가 일치하는 요소 [href *= w3]