- Riddle-Game : 율법언덕부터 해설자의 집 전까지 23년의 끝을 달리며, 질질 끌던 프로젝트를 종결해야겠다는 마음을 먹었다. 그 중 첫 번째, 천로역정을 주제로 한 미궁게임 Riddle-Game이다. 천로역정 : The Pilgrim's Progress 멸망도시를 떠나 천국도시로 향하는 크리스천의 이야기 riddle-game.github.io 원래는 좀 더 스토리가 있으나.. 갱브로와 나 모두 현생에 치여 정리할 수 없었다. 그나마 정리된 스토리 또한 갱브로가 초반에 정리해준 것..🥲 빠르게 만들기 위해 기존 Boot로 만든 프로젝트는 날리고.. jQuery와 Bootstrap를 중점적으로 이용하고 github로 웹 배포했다. (jQuery를 쓴 이유는 Bootstrap 테마와 fullpage..

- 글자 클릭하여 체크박스 체크하기 input 태그로 radio나 checkbox를 만들 경우, radio와 checkbox를 눌러야만 선택이 된다. 사과 바나나 한국어 영어 불어 HTML 삽입 미리보기할 수 없는 소스 원하는대로 만들어지긴 했으나, radio와 checkbox가 너무 작아 클릭이 어렵다. 글자를 눌러도 선택되게 할 수는 없을까? 태그를 활용하면 해결할 수 있다. 사과 바나나 한국어 영어 불어 HTML 삽입 미리보기할 수 없는 소스

- 태그의 다양한 속성 태그에는 폼을 좀 더 세련되게 만드는 기능들이 있다. - autofocus 속성 : 입력 커서 표시하기 autoocus를 사용하면 페이지를 불러오자마자 해당 태그에 마우스 커서를 표시할 수 있다. - placeholder 속성 : 힌트 표시하기 placeholder는 텍스트를 입력할 때 도움이 되도록 입력란에 힌트 내용을 표시한다. HTML 삽입 미리보기할 수 없는 소스 - readonly 속성 : 읽기 전용 필드 만들기 readonly는 사용자가 입력하지 못하게 입력란을 읽기 전용으로 만든다. HTML 삽입 미리보기할 수 없는 소스 - required 속성 : 필수 필드 지정하기 required 속성을 지정하면, submit 할 때 값이 비어있으면 에러메시지를 띄운다. - min..

- , , 활용하여 표 만들기 표를 만들기 위에서는 태그로 감싸고, 그 안에 행(row)인 태그, 그 안에 셀인 태그를 넣으면 된다. → 태그는 제목 셀로, 내용을 가운데 정렬하고 굵게 표시한다. 제목 셀 1행 2열 1행 3열 제목 셀 2행 2열 2행 3열 - 표 구조 정의하기 : , , 일부 표에서는 제목과 본문 외에도 아래쪽에 합계나 요약 내용을 표시하기도 한다. → 이런 표는 화면낭독기 사용 및 스타일 적용 등을 위해 내용에 따른 영역을 구분하는 게 좋다. : 제목 부분 : 본문 : 요약 부분 thead 1행 2열 1행 3열 tbody 2행 2열 2행 3열 tfoot 3행 2열 3행 3열 참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱

- , , 활용하여 목록 만들기 순서가 필요하지 않은 목록에는 태그(unordered list), 순서가 필요한 목록에는 태그(ordered list)를 사용한다. 1. 순서 없는 목록 만들기 : , 1번입니다. 2번입니다. 3번입니다. 2. 순서 목록 만들기 : , 1번입니다. 2번입니다. 3번입니다. 태그는 type 속성으로 숫자의 종류를 다양하게 조절할 수 있다. 1번입니다. 1번입니다. 1번입니다. 1번입니다. 또한, 태그에는 start와 reversed 라는 속성이 있다. 1번입니다. 2번입니다. 3번입니다. 1번입니다. 2번입니다. 3번입니다. 3. 설명 목록 만들기 : , , 태그는 description list의 줄임말로, '제목'과 '설명'이 한 쌍인 태그다. 올레 1코스 코스 : 시흥 ..