[HTML] html

Study/HTML CSS JS

[HTML] html

hong- 2022. 11. 21. 17:05

🙏🏻 HTML

HTML은 웹 사이트의 모습을 기술하기 위한 마크업 언어라고 할 수 있습니다.

프로그래밍 언어가 아니라 마크업 정보를 포함하는 마크업 언어로, 문서의 내용 이외의 문서의 구조나 서식 같은 것을 포함합니다.

📍 기본 태그

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
    <title> 제목입니다 </title>
    <body>
    	내용입니다
    </body>
</html>

① <!DOCTYPE html> : 웹 문서의 유형을 html로 지정

② <html lang="ko"> : 문서를 html로 시작하며 언어를 한국어로 지정

③ <head> : 주로 브라우저의 정보를 입력하는 곳

④ <meta> : 웹 서버와 웹 브라우저 간에 교환되는 정보 정의

⑤ <title> : 문서 제목

⑥ <body> : 문서 내용 입력

📍 문서 구조 태그

1) <header> : 머리글 영역

- 주로 <form> 태그를 사용하여 검색 창을 넣거나 <nav> 태그를 사용하여 사이트 메뉴를 넣음

2) <nav> : 내비게이션 영역

- 문서를 연결하는 내비게이션 링크로 동일한 사이트 내 문서나 다른 사이트 문서로 연결하는 링크 모음

3) <section> : 내용 영역

- 문서에서 콘텐츠 영역을 나타냄

- 문맥 흐름 중에서 콘텐츠를 주제별로 묶을 때 사용하며 그 안에는 섹션 제목을 나타내는 제목태그<h..>가 함께 사용

- <section>태그 안에 다른 <section>태그를 넣을 수 있음

4) <article> : 독립적인 세부 영역

- 태그를 적용한 부분을 떼어내 독립저긍로 배포하거나 재사용하더라도 완전히 하나의 콘텐츠가 되는 경우 사용

- 보통 <section>태그와 <article>태그를 혼동하지만 <section> 태그는 문맥 흐름 중 콘텐츠를 주제별로 묶을때 사용

- <article>태그 안에 <section> 태그를 넣을 수 있음

5) <aside> : 사이드 영역

- 배너 등 본문 이외의 내용을 표시할 때 사용

- 필수 요소가 아니므로 광고나 링크 모음 등 문서의 메인 내용에 영향을 미치지 않는 내용들을 넣을 때만 사용

6) <footer> : 꼬리말

- 사이트 제작 정보, 저작권 정보 표시

📍 <span> 태그

- 주로 <div>, <p> 태그와 함께 웹 페이지 일부분에 스타일을 적용시키기 위해 사용

- <span> 태그 안에 아무런 컨텐츠가 없다면 해당 부분에 아무런 변화가 없지만

태그 내부에 객체가 들어가면 그 객체 크기만큼 공간이 할당됨

- <div>와 비슷하지만 두 태그의 차이는 [줄바꿈]

👉🏻 <div>는 자동으로 줄바꿈됨

👉🏻 <span>은 자동으로 줄바꿈 되지 않음

📍 텍스트 관련 태그들

✔️ 텍스트를 덩어리로 묶어 주는 태그

▪️ <hn> : 제목 표시 → <h1> <h2> ... <h6>

▪️ <p> : 단락 만들기

▪️ <br> : 줄 바꾸기

▪️ <hr> : 분위기 전환을 위한 수평줄 넣기

▪️ <blockquote> : 인용문 넣기 - 블록 레벨 태그로 줄바꿈 o

▪️ <pre> : 입력하는 그대로 화면에 표시하기

✔️ 텍스트를 한 줄로 표시하는 태그

▪️ <strong> : 굵게, 진하게 = 경고나 주의사항 처럼 중요 내용이어 강조할 때 사용

▪️ <b> : 굵게, 진하게 = 문서 키워드 처럼 단순히 굵게 표시할 때 사용

▪️ <em> : 이탤릭체 = 문장에서 흐름 상 특정 부분 강조

▪️ <i> : 이탤릭체 = 마음 속 생각, 꿈, 기술적 용어, 다른 언어 관용구 등에 사용

▪️ <q> : 인용내용 표시 - 인라인 레벨 태그로 줄바꿈 x

▪️ <mark> : 형광펜 효과

▪️ <span> : 줄바꿈 없이 영역 묶기

▪️ <ruby> : 동아시아 글자 표시하기

✔️ 목록을 만드는 태그

▪️ <ul>, <li> : 순서 없는 목록

▪️ <ol>, <i> : 순서 있는 목록

▪️ <dl>, <dt>, <dd> : 설명 목록

✔️ 표를 만드는 태그

▪️ <table>, <tr>, <td>, <th> : 기본적인 표 만들기

(1) <table> 태그를 이용하여 표 전체 윤곽을 잡음

(2) <tr> 태그를 통해 행(row)를 먼저 만듦

(3) <td> 태그를 통해 각 행마다 몇 개의 셀(cell)이 들어갈지 결정

(4) <th> 태그를 통해 표에 제목 셀 만들 수 있음

▪️ <caption>, <figcaption> : 표에 제목 붙이기

▪️ <thead>, <tbody>, <tfoot> : 표 구조 정의하기 (제목부분, 본문, 요약부분)

▪️ <col>, <colgroup> : 여러 열 묶어 스타일 지정하기

- <col>은 한 열에 있는 모든 셀에 같은 스타일 적용

- <colgroup>으로 <col>을 묶을 수 있음

▪️ <colspan>, <rowspan> : 열 또는 행 합치기

✔️ 기타 텍스트 관련 태그

▪️ <abbr> : abbreviation의 약자로 title 속성을 함께 사용 가능

▪️ <cite> : 웹 문서나 포스트에서 참고 내용 표시

▪️ <code> : 컴퓨터 인식을 위한 소스 코드

▪️ <kbd> : keyboard text의 약자로 키보드 입력이나 음성 명령 같은 사용자 입력 내용

▪️ <small> : 부가 정보처럼 작게 표시해도 되는 텍스트

▪️ <sub> : subscript, 아래첨자

▪️ <sup> : superscript, 윗 첨자

▪️ <s> : strikethrough, 취소선

▪️ <u> : underline, 밑줄

📍 폼 관련 태그들

✔️ 폼 만들기

▪️ <form> : 폼 만들기

- method 속성 : 사용자가 입력한 내용들을 서버쪽으로 어떻게 넘겨줄지 지정

- name 속성 : 폼의 이름 지정

- action 속성 : 폼 태그 안의 내용들을 처리해줄 서버 상의 프로그램 지정

- target 속성 : <action> 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 지정

- autocomplete 속성 : 자동 완성 기능

▪️ <label> : 폼 요소에 레이블 붙이기

▪️ <fieldset>, <legend> : 폼 요소 그룹으로 묶기

✔️ 사용자 입력을 위한 input 태그

▪️ type="hidden" : 사용자에게 숨기기

▪️ type="text" : 텍스트 입력 필드

▪️ type="password" : 비밀번호 입력란

▪️ type="search", type="url", type="email", type="tel" : 분화된 텍스트 필드 (검색란, URL입력란, 메일입력란, 번호입력란)

▪️ type="number" : 숫자 입력하기

▪️ type="range" : 슬라이드 막대로 숫자 지정하기

▪️ type="radio", type="checkbox" : 라디오 버튼, 체크박스 넣기

▪️ type="color" : 색상 선택 상자 표시하기 (16진수)

▪️ type="date", type="month", type="week" : 날짜 표시하기 (yyyy-mm-dd, yyyy-mm, yyyy-w번째)

▪️ type="submit", type="reset" : 서버 전송, 리셋버튼

▪️ type="time", type="datetime", type="datetime-local" : 시간 정하기

▪️ type="image" : 이미지 버튼 넣기

▪️ type="button" : 버튼 넣기

▪️ type="file" : 파일 첨부하기

✔️ input 태그의 다양한 속성

▪️ autofocus 속성 : 입력 커서 표시하기

▪️ placeholder : 입력 힌트 표시

▪️ readonly : 읽기 전용 필드

▪️ required : 필수 필드 지정

▪️ min, max, step

▪️ size, minlength, maxlength : 길이, 최소길이, 최대길이

✔️ 여러 데이터 나열하여 보여주기

▪️ <select>, <optgroup>, <option> : 드롭다운 목록 만들기

▪️ <datalist>, <option> : 데이터 목록 중 값 선택

▪️ <textarea> : 여러 줄 입력하는 텍스트 영역 만들기

✔️ 기타 다양한 폼 요소

▪️ <button> : 버튼 넣기

▪️ <output> : 계산 결과

▪️ <progress> : 진행상태 보여주기

▪️ <meter> : 값이 차지하는 크기 표시하기