2021. 7. 15. 13:07ㆍHTML
* HTML
- Hyper Text Markup Language 약어로 웹사이트를 만드는 기초가 되는 언어이다.
- 확장자는 *.html(또는 *.htm)로 문서를 저장해야 한다.
- 텍스트뿐만 아니라 이미지, 링크 등 여러 요소들을 다루고 표시할 수 있어야 한다.
- 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어
* 웹 문서란?
- 웹 페이지 안에 보여지는 문서들
- HTML은 웹 문서를 이루는 기본이 되는 언어
*웹 표준이란?
- 웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것
- 웹 표준을 지켜 사이트를 제작하면 장소나 브라우저와 상관없이 쉽게 웹 사이트를 볼 수 있다.
- 웹 표준으로 문서 하나를 만들면 어떤 기기에서나 볼 수 있기 때문에 웹 개발자와 디자이너의 시간 절약
- HTML5로 문서를 만드는 것 = 웹 표준을 지킨 문서를 만드는 것
* HTML, CSS, JavaScript (jQuery -> JavaScript기반의 프레임워크)
- HTML은 틀로써 웹문서의 기준이 된다
- CSS는 HTML의 폰트크기, 간격, 위치, 배경 등을 변경하여 꾸며주는 존재이다
- JavaScript는 웹의 동작(로직)을 구현할 수 있다.
* 렌더링이란?
- HTML, CSS, JavaScript등 개발자가 작성한 문서를 브라우저에서 사용자가 보기 편한 그래픽으로 출력하는 과정
* HTML 기본 구조
*작성법
- 태그는 < 와 > 를 이용해 구분한다
- 태그는 소문자로 쓴다
예) <img src="maltese.jpg">
- 여는 태그와 닫는 태그를 정확히 입력한다 (<>, </>) (닫는 태그가 없는 태그도 있다)
예) <h1> HTML 제목 </h1>
- 태그가 많아 구분하기 어려움으로 들여쓰기를 통해 개발하는게 좋다
- 태그는 속성과 함께 사용할 수 있다
예) <img src="maltese.jpg" width="150" height="160">
- 주석 (<!– 내용 -->) [ctrl+shift+c]
예) <!-- <h1> HTML 제목2 <h2> -->
*<!DOCTYPE html>
<!doctype>
- 웹 브라우저에게 ‘이제부터 처리할 문서는 HTML5 문서이고 어떤 유형을 사용 했으니 그 버전에 맞는 방법으로 해석하라.’라고 알려주는 것
- <!DOCTYPE html> 또는<!doctype html>
<html> 태그 – 웹 문서 시작을 알리는 태그
- 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그
- lang이라는 속성을 사용해 문서에서 사용할 언어 지정 가능
- 문서 정보를 지정하는 <head> 부분과 실제 화면에 보이는 문서 내용을 입력하는 <body> 부분
브라우저에게 정보를 주는 <head> 태그
- 웹 브라우저 화면에는 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들 입력
- 문서에서 사용할 외부 파일들 링크 (CSS, Javascript 등)
- <title> 태그 : 브라우저의 제목 표시줄에 표시되는 내용.
<title> 문서 제목 </title>
문서의 몸통 <body> 태그
- 실제 브라우저에 표시될 내용 입력
- 대부분의 태그가 <body> 태그와 </body> 태그 사이에서 사용하는 태그들
