[ 언어 ] : 정해진 규칙 및 기호의 집합
[ 언어와 언어 사이 ] : 번역이 필요하다. 컴파일 or 인터프리터 or 렌더링
[ HTML언어와 기계어 사이 ] 번역가 : 브라우저 (크롬, 엣지, 사파리)
[ HTML 언어 ]
1. H(Hyper : 이동) T(Text) M(Markup) L(Language) :
이동 가능한 텍스트를 제공하는 마크업 언어
2. 마크업? : 구조화된 표식
3. 언어 : 규칙/기호 집합
마크업 언어란 : 텍스트 앞 뒤에 마크 또는 덧붙인 언어
* 각 마크업에는 미리 정해진 기능들이 포함되어있음
ex) <h1>안녕</h1> // h는 제목을 의미.
4. 주석 : 메모지(번역하지 않은 구역)
HTML에서는 ex) <!-- 블라블라 -->
[ 마크업 ]
- HTML 언어를 만든 회사에서 미리 정의한 규칙 = 문법
방법 예시)
1. <마크업명> 내용물(Text) </마크업명>
- <h1> </h1>
2. <마크업명 />
- <img /> <input />
- 각 마크업은 서로 다른 속성(본질의 특징)을 갖는다.
1. <마크업명 속성명="값"> </마크업명>
- <나 name="최동진" gender="남성" glasses="true">
마크업을 객체라고 이해하면 된다.
HTML은 프로그래밍 언어일까? [X] 마크업 언어.
동작, 변화가 일어나지 않기 때문에 프로그래밍 언어가 아님.
HTML을 보완한 REACT는 동적 페이지를 만들 수 있는 JS프로그래밍 언어.
[ 마크업 종류 ]
* 마크업 작성 시 주의점 : 마크업 안에 포함되는 마크업 작성 시, 'TAB키로 들여쓰기'한다.(파이썬에서중요!)
타이틀의 부모는 헤드고 헤드의 부모는 html. (상속관계를_따져라)
ex)
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
1. <html> : HTML 모든 마크업 전체를 감싸는 마크업.
2. <head> : HTMl 문서의 옵션 정보 마크업을 감싼 마크업.
3. <title> : HTML 문서의 페이지 제목
4. <link href="CSS파일경로" rel="stylesheet" > : HTMl 문서의 CSS 포함
5. <script src="JS파일경로"> : HTML 문서의 JS 포함
6. <body> : HTML 문서의 본문
7. <h1> - <h6> : 제목(Head) 마크업, 글자크기/볼드/구역 의미.
8. <p> </p> : 문단(Paragraph) 마크업, 구역 의미.
9. <br /> : Brake rule, 줄바꿈 의미
10. <hr /> : horizontal rule, 가로선 의미
11. <ol> </ol> : order list, 순서(번호)있느 목록
12. <ul> </ul> : unorder list, 순서(번호)없는 목록
13. <li> </li> : ol 또는 li 마크업 안에 포함. 목록의 항목
14. <a> </a> : html/페이지 이동
<a href ="이동할경로"> 텍스트 </a>
<a href ="이동할경로" target="_blank"> 텍스트(새 탭 열기) </a>
15. <img /> : 이미지 마크업
16. <audio> </audio> : 오디오 마크업
17. <video> </video> : 비디오 마크업
15~17 공통 속성 : src="파일경로"
16~17 공통 속성 :
controls="controls" : 컨트롤러 제공
autoplay="autoplay" : 자동실행, 정책상 차단
muted="muted" : 음소거 autoplay + muted : 비디오 자동실행 가능
18. <input /> : 입력상자
- [주요 속성]
(1) type : 입력방법
type = "text" : 문자입력, type 생략 시 기본 값
type = "password" : 가려진 문자 입력
type = "file" : 첨부파일 입력 *multiple : 다중선택
type = "radio" : 단일선택 선택상자 *name 속성값 동일해야함
type = "checkbox" : 복수선택 선택상자
type = "number" : 숫자 입력
type = "date" : 날짜 선택
type = "datetime-local" : 날짜/시간 선택
type = "time" : 시간 선택
type = "month" : 월 선택
type = "week" : 주 선택
type = "range" : 범위 스크롤
type = "submit" : 폼 전송
type = "reset" : 폼 초기화
type = "button" : 일반버튼 vs <button type="button> </button>
(2) name : 동일한 마크업 간 식별이름
(3) value : 입력상자의 데이터
(4) disabled : 비활성화(사용금지)
(5) readonly : 수정불가능(수정금지)
(6) maxlength : 최대 글자수 제한
(7) autofocus : 지정한 입력상자에 포커스(커서) 설정
(8) placeholder : 입력상자의 가이드텍스트(입력 후 사라짐)
19. <button> : 버튼 마크업. 추후 JavaScript 함수 연동으로 사용
20. 표 만들기
<table> : 전체 표를 감싼 마크업 (게시판 만들 때 좋음)
<tr> : 테이블 행/가로
<th> : 테이블 제목(열/세로) 셀/칸
<td> : 테이블 데이터(열/세로) 셀/칸
속성
boarder = "1" : 테이블 테두리
style = "border-collapse : collapse;" : 이중 테두리를 하나의 테두리로 변경
rowspan = "행병합"
colspan = "열병합"
카테고리 없음
HTML 정리
반응형
반응형