💡 웹 문서는 보통 !DOCTYPE html로 시작해 html, head, body 라는 3개의 영역으로 구성되어 있다.
🧐 태그 - 웹 문서의 정보 저장
- 문자 세트를 비롯해 문서 정보가 들어 있는 meta 태그
- head 와 head 사이에는 meta charset과 title을 입력한다.
💡 meta viewport 태그는 반응형 웹을 만들 때 사용하는 것!- html 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱 태그라고 한다.
💡 시맨틱 태그를 사용하는 이유
1) 웹 브라우저가 html의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있다.
2) 다양한 화면에서 웹 문서를 표현하기가 쉽다.
3) 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
🧐 웹 문서 구조를 만드는 주요 시맨틱 태그
- main 태그
메인 콘텐츠가 들어있다. 웹 문서마다 다르게 보여주는 내용으로 구성한다.
❗ 웹 문서에서 한 번만 사용할 수 있다.- section 태그는 article 태그와 비슷해 보이기도 하지만 section 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, article 태그는 블로그의 포스트처럼 독립된 콘텐츠로 쓴다.
❗ 단순히 스타일을 적용하려고 콘텐츠를 묶으려면 section 태그 대신 div 태그 사용
🧐 웹 문서에 다양한 내용 입력하기
- 텍스트 단락을 만드는 p 태그
p와 p 태그 사이에 텍스트를 입력하면 텍스트 앞뒤로 빈 줄이 생기면서 텍스트 단락이 만들어진다. 이때 편집기에서 줄을 바꾸더라도 웹 브라우저에서는 한 줄로 표시된다.
내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄을 바꾼다.
❗ 원하는 위치에서 줄을 바꾸려면 br 태그 사용- 텍스트를 굵게 표시하려면 strong, b 태그
strong - 경고나 주의사항 처럼 중요한 내용
b - 단순히 글자만 굵게 표시 할 때- em 태그 - 문장에서 흐름상 특정 부분을 강조하고 싶을 때 사용
- i 태그 - 마음속의 생각이나 용어, 관용구 등에 사용
- 순서 있는 목록을 만드는 ol, li 태그
- 순서 없는 목록을 만드는 ul, li 태그
- 설명 목록을 만드는 di, dt, dd 태그
- 설명 목록이란 이름과 값의 형태로 된 목록
- 표를 만드는 table, caption 태그
❗ caption 태그를 사용하면 제목은 표의 위쪽 중앙에 표시된다.- 행을 합치는 rowspan, 열을 합치는 colspan
- image 태그
- alt 속성을 지정하면 이미지를 제대로 표시할 수 없는 경우에 이미지 텍스트가 나타난다.
- width나 height 중 1개만 지정해도 나머지 속성은 비율을 자동으로 계산하여 나타낸다.
- 픽셀을 사용할 때는 px 단위를 쓰지 않고 숫자만 입력한다.
- 다양한 멀티미디어 파일을 삽입할 때 쓰는 object, embed 태그
🧐 form 태그
- method :
- get -> 주소 표시줄에 사용자가 입력한 내용이 그대로 드러나는 단점이 있다. 데이터 길이 제한 o
- post -> 입력한 내용의 길이에 제한 x, 사용자가 입력한 내용도 드러나지 x
- autocomplete 속성의 기본값 on -> 개인정보나 일회성 정보일 경우 off 하기
- form
-- fieldset - > 영역 나누어 표시
---- legend -> 영역의 제목- label 요소를 사용하는 두가지 방법
1) 폼 요소의 앞뒤에 label 태그 붙이기
2) label 태그와 폼 요소를 따로 사용하고 label 태그의 for 속성과 폼 요소의 id 속성을 이용해 서로 연결하기- input type="number" -> 스핀 박스
input type="range" -> 슬라이드 막대- 날짜 입력
input type = "date" | "month" | "week"- 시간 입력
input type = "time" | "datetime" | "datetime-local"- 이미지 버튼
input type = "image"- 파일 선택
input type = "file"- 히든 필드 -> 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소
- readonly 속성 ->
1) readonly
2) readonly = "readonly"
3) readonly = "true"- required 속성 ->
1) required
2) required = "required"- option 태그에는 value 속성을 이용해 서버로 넘겨주는 값을 지정
- option 태그에 multiple 속성 사용 시 둘 이상의 항목 선택 가능
나아가기