◎ HTML5+CSS3
[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코스 코스 : 시흥 ..
[HTML5] 블록 태그(block tag)와 인라인 태그(inline tag) [<h1>, <p>, <span> 등 텍스트 관련 태그들]
- 블록 태그(block tag)와 인라인 태그(inline tag) 1. 블록 태그(block tag) 블록 태그는 태그가 선택한 글자에만 적용되는 것이 아니라 텍스트가 포함된 블록 전체에 적용된다. - ~ 태그 태그는 제목 텍스트로, 일반 텍스트보다 굵고 진하게 표시된다. → 제목을 뜻하는 heading의 줄임말이며, 1부터 6까지 있다. HTML 삽입 미리보기할 수 없는 소스 안녕하세요! 안녕하세요! 안녕하세요! 안녕하세요! 안녕하세요! 안녕하세요! - 태그 태그는 텍스트를 표시할 때 가장 많이 사용하는 태그이다. → paragraph의 줄임말. 태그는 줄바꿈 없이 텍스트를 한 줄로 표시한다. HTML 삽입 미리보기할 수 없는 소스 단락입니다 만나서 반갑습니다 - 태그, 태그 태그는 줄 바꿈, 태그..
[HTML5] HTML 기본 문서 구조 [마크업과 태그, HTML 문서 기본 구조]
1. 마크업과 태그(tag) 마크업 : 어디가 이미지고 어디가 텍스트인지 표시하는 것 태그(tag) : 마크업 할 때 사용하는 약속된 표기법 - HTML 문서를 만들기 전 기억해야 할 것들 태그는 〈 와 〉를 이용해 구분한다. 이미지를 삽입할 때는 'image'의 약자인 라는 태그를 사용하고, 텍스트 문단을 삽입할 때는 'paragraph'의 약자인 라는 태그를 사용한다. 태그는 소문자로 쓴다. HTML 태그는 대·소문자를 구별하지 않지만, HTML5 표준 명세에서는 태그와 태그 안에 사용하는 속성들은 모두 소문자로 사용할 것을 권장한다. // // 여는 태그와 닫는 태그를 정확히 입력한다. 대부분의 태그는 ~ 이나 ~ 처럼 여는 태그와 닫는 태그가 하나의 쌍으로 이루어진다. * 웹 브라우저는 여는 태그..