◎ HTML5+CSS3/HTML5📝
[HTML5] 글자 클릭하여 체크박스 체크하기 [<label> 태그 활용하여 체크박스 만들기]
- 글자 클릭하여 체크박스 체크하기 input 태그로 radio나 checkbox를 만들 경우, radio와 checkbox를 눌러야만 선택이 된다. 사과 바나나 한국어 영어 불어 HTML 삽입 미리보기할 수 없는 소스 원하는대로 만들어지긴 했으나, radio와 checkbox가 너무 작아 클릭이 어렵다. 글자를 눌러도 선택되게 할 수는 없을까? 태그를 활용하면 해결할 수 있다. 사과 바나나 한국어 영어 불어 HTML 삽입 미리보기할 수 없는 소스
[HTML5] <input> 태그의 다양한 속성 [autofocus, readonly, required 등]
- 태그의 다양한 속성 태그에는 폼을 좀 더 세련되게 만드는 기능들이 있다. - autofocus 속성 : 입력 커서 표시하기 autoocus를 사용하면 페이지를 불러오자마자 해당 태그에 마우스 커서를 표시할 수 있다. - placeholder 속성 : 힌트 표시하기 placeholder는 텍스트를 입력할 때 도움이 되도록 입력란에 힌트 내용을 표시한다. HTML 삽입 미리보기할 수 없는 소스 - readonly 속성 : 읽기 전용 필드 만들기 readonly는 사용자가 입력하지 못하게 입력란을 읽기 전용으로 만든다. HTML 삽입 미리보기할 수 없는 소스 - required 속성 : 필수 필드 지정하기 required 속성을 지정하면, submit 할 때 값이 비어있으면 에러메시지를 띄운다. - min..
[HTML5] <input> 태그 type 알아보기 [hidden, text, password, checkbox 등]
- 태그 type 알아보기 태그는 폼에서 사용자의 입력을 받기 위한 태그이다. 해당 태그는 다양한 형태가 있는데, 자주 사용하는 거 위주로 알아보려고 한다. - type="text" : 텍스트 필드 만들기 (기본값) text는 한 줄짜리 일반 텍스트를 입력하는 필드이다. → 아이디나 이름, 주소 등 텍스트를 입력할 때 가장 많이 사용. HTML 삽입 미리보기할 수 없는 소스 - type="hidden" : 히든 필드 만들기 사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가진다. → name과 value를 꼭 써줘야 한다. - type="password" : 비밀번호 입력란 만들기 password는 입력 내용이 '＊' 등으로 변경되어 표시된다. → 내용이 가려지는 거 외에는 text와 동일하다. HTML..
[HTML5] <tr>, <td>, <th> 활용하여 표 만들기 [표를 만드는 태그 사용하기]
- , , 활용하여 표 만들기 표를 만들기 위에서는 태그로 감싸고, 그 안에 행(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 웹 표준의 정석, 이지스 퍼블리싱
[HTML5] <ul>, <ol>, <li> 활용하여 목록 만들기 [목록을 만드는 태그 사용하기]
- , , 활용하여 목록 만들기 순서가 필요하지 않은 목록에는 태그(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코스 코스 : 시흥 ..