HTML 6

[HTML] 표 만들기

* 표를 만드는 , 태그 표의 시작과 끝을 알려주는 과 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다. 표에 제목을 붙이고 싶다면 태그 바로 아랫줄에 태그를 사용한다. - 기본형 표 제목 * 행을 만드는 태그와 셀을 만드는 , 태그 태그는 행을 만들고 태그는 행 안에 있는 셀을 만들기 때문에 태그 안에 , 태그가 모두 모여야 하나의 셀을 만들 수 있다. - 기본형 1행 1열 1행 2열 2행 1열 2행 2열 * 표의 구조를 지정하는 , , 태그 제목은 , 본문은 , 요약은 태그에 해당한다. (...생략..) 상품 구성 선물용 상품 구성 용도 중량 개수 가격 선물용 3kg 11 ~ 16과 35,000원 선물용 5kg 18 ~ 26과 52,000원 (...생략...) 해당 코드를 실행하면 다음과 ..

[HTML] 텍스트 입력하기

* 제목을 나타내는 태그 제목 스타일을 미리 태그 형태로 만든 것이 바로 제목 태그이다. - 기본형 : 제목 (...생략...) HTML이란? HTML은 웹 문서를 만들기 위하여 사용하는 웹 언어의 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다. 우리 모두 HTML을 공부합시다. (...생략...) 태그에서 h는 제목을 뜻하는 heading을 줄인 말이다. n의 자리에는 1~6의 숫자가 들어가며 제목 텍스트를 크기별로 표시할 수 있다. 이 가장 큰 제목이고 , ... 의 순서로 크기가 작아진다. * 인용할 때 쓰는 태그 - 기본형 : 인용문 (...생략...) 비타민C와 비타민P는 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다. (...생략...) * 텍스트를 굵게 표시하는 , 태그 - 기본형 :..

[Javascript] 행(row)과 열(column)을 그리는 프로그램

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

[Javascript] event 객체의 프로퍼티와 메서드

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

[Javascript] 날짜 계산하는 프로그램 만들기

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