## HTML이란
-HTML이란 Hyper Text Markup Language를 의미한다.
. Hyper Text : 하이퍼 링크를 통해서 어떤 문서에서 다른 문서로 접근할 수 있는 텍스트
. Markup : (콘텐츠를) 표시하다.
. Language : 언어 (브라우저와 사람 사이의 언어)
-우리가 웹사이트에서 특정 글자나 버튼을 눌러서 다른 사이트로 이동하게 되는데 이런 문서들을 Hyper Text라고 한다.
-HTML는 콘텐츠를 표시하는 방법으로 웹페이지를 만들게된다.
-사람과 웹브라우저 사이에서 사용하는 언어
-웹사이트를 만들기 위해서 개발자가 할 일은 HTML 코드로
웹페이지에 어떤 내용을 표기할지 HTML문서를 만드는 일이다.
-완성된 코드를 웹브라우저에서 로딩하게되면 웹페이지가 만들어 진다.
-HTML 코드가 웹브라우저를 통해서 해석되고 표현되는 과정을 렌더링이라고 한다.
# HTML 문서 만들기
-HTML 문서는 파일의 확장자가 html이다.
-HTML파일을 만들거나 수정하려면 텍스트 편집기를 사용해야 한다.
-대표적인 텍스트 편집기 : Brackets, VScode등...
-결과를 확인하기위해서는 웹브라우저를 사용해야 한다.
-대표적인 웹브라우저 : 크롬, 파이어폭스, 엣지, 사파리등...
# HTML은 언어이다.
-우리가 한국어, 영어 등으로 사람들과 소통하기위해서는 해당 언어의 문법에 맞는 표현을 사용해야 하듯
HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 사용해야 한다.
-HTML의 문법은 딱 한가지 태그(tag)만 기억하면 된다.
-태그란? : HTML코드에서 정보(컨텐츠)를 정의하는 형식
# tag (시작과 끝) - 가장 기본이 되는 태그다.
-태크는 <>과 </> 기호를 사용하여 컨텐츠의 시작과 끝을 표시한다.
-각 태그는 콘텐츠를 감싸며 태그명은 콘텐츠의 성격과 의미를 나타낸다.
EX)
<태그명>이곳에 콘텐츠를 기입한다.<태그명/>
# tag (단일 태그) - 일부 태그
-태크는 <>과 </> 기호를 사용하여 컨텐츠의 시작과 끝을 표시하지만
경우에 따라 시작과 끝을 구분할 필요가 없는 태그도 존재한다.
이를 단일태그라고 한다.
-단일 태그는 콘텐츠를 감쌀 필요가 없기 때문에 콘텐츠를 감쌀 필요가 없다.
EX)
<태그명/>
앤터 같이 하나로 묶어줄 필요가 없는 것은 단일 태그로 표기한다.
결론 tag는 두 종류다.
# tag (속성)
-속성은 태그의 부가적인 기능을 정의하는 것이다. (선택사항)
-속성은 시작 태그의 내부에서 정의한다. <태그명 속성> </>
-속성의 개수는 특별한 제한이 없다.
-태그명과 속성 또는 속성과 속성사이에는 공백(space)으로 구분하며 값은 큰따옴표안에 작성해야 한다.
EX)
<태그명 속성명="속성값" 속성명="속성값" 속성명="속성값" ></태그명>
<태그명 속성명="속성값" /> 단일태그도 가능하다.
<img src="/image/kakao.png" alt="카카오톡 사진" width="200" height="200">
# HTML (주석처리)
-주석은 사람에게는 보이지만 웹브라우저에게는 보이지 않는 코드이다.
-주로 코드에 대한 메모를 남기기 위한 용도로 사용된다.
EX)
<!-- 해당코드 안의 모든 코드는 처리되지 않는다. -->
자바에서는 코드는 단순하지만, 응용코드들이 많기 때문에 주석을 자주 사용하고, 남겨야 한다. (기억하기 위해서)
※ 경로에다가는 오류가 날 수 있기 때문에 웬만하면 한글을 넣지 않는다.
<!DOCTYPE html> //현재 최신 버전의 html을 사용하고 있습니다.
<html> // 여는 태그
<div>
</div>
</html> // 닫는 태그
들여쓰기 (tap)은 그 안에 코드가 종속이 되어있다 라는 의미이다. (항상 기본)
<head> // 브라우저에는 들어가지 않지만, 브라우저가 알아야 할 내용들을 넣어준다.
// 인코딩 방식이 다르게 되면 글자가 깨진다. (중국어와 한국어가 이상하게 표기될 때)
</head><!DOCTYPE html> <!-- 현재 최신 버전의 html을 사용하고 있습니다. -->
<html> <!-- 여는 태그 -->
<head> <!-- 브라우저에는 들어가지 않지만, 브라우저가 알아야 할 내용들을 넣어준다. -->
<!-- 인코딩 방식이 다르게 되면 글자가 깨진다. (중국어와 한국어가 이상하게 표기될 때) -->
<meta charset="UTF=8"> <!-- charset 한글을 인코딩 할 때 뭘 사용할거야?? UTF=8 3Byte -->
<meta charset="EUC-KR"> <!-- EUC-KR은 2Byte -->
<title>html을 공부합시다.</title>
</head>
<body> <!-- body안에 있는 내용들이 html에 나오게 된다. -->
오늘은 HTML을 공부하는날...
<!-- 실제 브라우저에 표시할 내용을 작성-->
<!-- 텍스트를 처리하는 태그, 이미지를 처리하는 태그, 각종 인터페이스를 처리하는 태그(버튼, 입력란, 다운로드 메뉴등...) -->
<!-- -->
<!-- 주석처리: 단축키 ctrl + / -->
</body>
</html> <!-- 닫는 태그 -->
코드 간단 축약
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF=8">
<title>html을 공부합시다.</title>
</head>
<body>
오늘은 HTML을 공부하는날...
<!-- 실제 브라우저에 표시할 내용을 작성-->
<!-- 텍스트를 처리하는 태그, 이미지를 처리하는 태그, 각종 인터페이스를 처리하는 태그(버튼, 입력란, 다운로드 메뉴등...) -->
</body>
</html>
<head>란에는 <title>과 <meta> 인코딩 지정이 들어간다.
<body>란에는 html에 출력이 되는 태그들을 입력하여 출력하게 만든다.
<html></html> html을 여는 코드와 닫는 코드
'HTML↗' 카테고리의 다른 글
| HTML 링크(link) <a>태그 (0) | 2024.04.05 |
|---|---|
| HTML 컨테이너 태그 / 전역 속성 (0) | 2024.04.04 |
| HTML 이미지 표시하기 (0) | 2024.04.04 |
| HTML 텍스트 표시 방법 (+한 줄 정리) (1) | 2024.04.04 |
| HTML 기본 구조 (0) | 2024.04.04 |