반응형
1. 기본 태그
1) Markup Language 주석문
<!-- Markup Language 주석문 -->2) HTML(Hyper Text Markup Language)
- Markup Language : 태그이용 ex) XML , HTML ..
- 태그(Tag)를 사용하여 웹문서를 구조적으로 표현하기 위한 언어
- 브라우저 엔진에 의해 해석되어 실행(출력)되는 언어
- 브라우저마다 해석 방법이 다름 : 크롬, 엣지, 사파리, ...
- 왜? 브라우저 엔진 마다 해석 방법이 다르기 때문
- webkit(웹킷)방식의 브라우저
- Gecko(객코)방식의 브라우저
- CSL( Client Script Language ) : HTML, CSS, JavaScript
3) HTML 특징
- 태그를 사용하여 웹문서(HTML File) 작성 - 태그는 대소문자 미구분
- 시작태그와 종료태그가 하나의 짝으로 구성
- HTML 태그는 독립태그 존재
<br>- 다른 Markup Language( ex. XHTML, XML )는 시작태그있으면 종료태그도 반드시 필수
<br></br> 혹은
<br/>- HTML4.01 : 문법에 맞지 않으면 경고가 뜨더라도 출력이 됨!
- XHTML1.0 : HTML이지만, 문법에 맞지 않으면 문법이 강력해서 아예 출력이 안됨!
- HTML5 : HTML의 장점 + XHTML의 장점 : 문법이 강력하지 않지만, 문법에 맞지 않으면 출력이 안됨!
- 시작태그와 종료태그 사이에 하위태그 또는 태그내용 표현
- 시작태그는 속성과 속성값을 사용하여 태그를 다양하게 표현
4) DOCTYPE
- 웹브라우저가 페이지를 어떻게 해석해야 하는지 알려줌
- 웹문서의 종류를 표현
<!--HTML5를 이용하여 작성된 웹문서-->
<!DOCTYPE html> <!--HTML5로 작성할게요!-->5) <html>
- 웹문서(HTML File)을 작성하기 위해 사용하는 최상위 태그(RootTag)
- HTML 문서의 시작과 끝을 표시
- 페이지 전체의 컨텐츠를 감쌈
- <html>의 하위태그
- <head> : 웹문서(HTML File)에 대한 정보를 제공하기 위한 태그
- <body> : 브라우저 출력영역(Document)에 박스모델(BoxModel)를 출력하기 위한 태그
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
6) <head>
- 하위태그 : <meta> , <title> , <style> , <script> , <link> 등
2. <head>의 하위태그
1) <meta>
- 웹문서에 대한 부가적인 정보(MetaData)를 태그 속성과 속성값으로 제공하는 태그
💜charset속성
- 웹문서에 대한 문자형식(CharacterSet - 인코딩 : Encoding)을 속성값으로 설정
- 브라우저가 웹문서를 해석할 때 사용하는 문자의 인코딩 방식을 제공
- 인코딩 : 문자를 컴퓨터가 알아들을 수 있는 숫자로
- 문자의 인코딩 방식
- ISO-8859-1 (서유럽어) : 기본 속성값
- euc-kr(완성형) : 한글 관련 인코딩 → 외국은 완성형 사용함..
- 가 나 .. - 한글이 약 15000자 정도 만들어져있음
- (단점) 해석할 때 시간 오래걸림
- (단점) 정해진 것만 만들어져있으므로, 만들어지지 않는 문자들도 존재할 수 있음 힗
- utf-8(조합형) : 한글 관련 인코딩 → 우리는 조합형 사용함..
- ㄱ , ㄴ , ㅏ ..
- (장점) 모든 한글을 표현할 수 있음
2) <title>
- 웹문서의 제목을 설정하는 태그
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
3. <body>의 하위태그
- 하위태그 : <h1> , <div> , <p> , <img> , <span> , <form> 등
1) 박스모델 태그
- 웹문서를 구성하는 박스모델 태그들
박스모델 태그 = 💚블럭 레벨 태그 + 💚인라인 레벨 태그
- 💚블럭 레벨 태그 (Block Level Tag)
- 하나의 태그가 하나의 라인을 모두 사용하는 태그
- <div> , <h1> , <p> , <ol> , <ul> , <li> 등
- 💚인라인 레벨 태그 (Inline Level Tag)
- 하나의 태그가 라인 일부분을 사용하는 태그
- <span> , <img> , <input> , <select> 등
- 인라인 레벨 태그의 하위태그로 블럭 레벨 태그 사용 불가능
2) HTML 박스모델 확인
- 웹사이트를 보자마자 눈에서 BOX가 그려져야 한다!!
- BOX를 구상하는 방법은?
반응형
'web > html' 카테고리의 다른 글
| [html] 6. 하이퍼링크 태그 | 기타 태그 | 문장강조 태그 | 인용문출력 태그 | 멀티미디어 태그 | 이미지설명제공 태그 (2) | 2024.04.29 |
|---|---|
| [html] 5. 시맨틱태그 | 텍스트태그 | entity | 박스태그 | 이미지태그 | 리스트태그 | 테이블태그 (0) | 2024.04.28 |
| [html] 3. 웹 통신 프로토콜 (HTTP/TCP/IP) (0) | 2024.04.27 |
| [html] 2. 이클립스에서 WAS 설치 및 사용법 (0) | 2024.04.27 |
| [html] 1. 웹프로그램의 개념 (0) | 2024.04.26 |
