브라우저가 해석할 수 있는 3가지
1. HTML - 전체적인 틀을 만든다.
2. CSS - 전체적인 틀을 HTML을 만들고 CSS가 디자인을 한다.
3. JavaScript - 동적으로 움직이면서 움직이는 형식을 디자인한다.
HTML(Hyper Text Markup Language)이란?
"HyperText(웹 페이지에서 다른 페이지로 이동할 수 있는 문장) 기능을 가진 문서를 만드는 언어"를 뜻한다.
HTML의 형식
<html> (여는 태그)
<head>(머리)
</head>
<body>(몸통)
</body>
</html> (닫는 태그)HTML의 특징
- HTML 문서는 확장명을 .html로 저장
- 대소문자를 구별하지 않음
- 문서를 작성할 수 있는 에디터라면 HTML 문서를 작성할 수 있음
- 띄어쓰기, 줄바꿈을 구별하지 않음
- 명령어(태그) 형태로 괄호를 사용하여 표현
<명령어> </명령어>
- 대부분의 태그는 시작태그와 종료태그로 구성되어 있음
HTML의 특수태그
< : %lt;
> : %gt;
%lt를 써야지 >, %gt를 써야지 < 가 나온다.
(공백) :
<br> : 다음줄로 개행
주석 : <!-- 주석을 넣음 -->
라이브서버 설치
1. VScode를 실행한다.
ㄴ확장칸을 눌러서 live server를 입력 후 첫번째꺼를 다운로드 한다.
사용법 : 자신이 만든 html파일을 클릭 후 "command + L + O"를 입력하면 localhost:5500포트를 사용하여 웹페이지를 올려준다.
자신의 디렉토리 경로를 이용하여 올려주는것이 아니라 localhost:5500/파일명을 이용하여 올려주기 때문에 좀더 간편하게 올릴수 있다.
2. Auto Rename Tag
위처럼 확장칸을 눌러서 auto rename tag를 입력해서 첫번재꺼를 다운로드 한다.
사용법 : 프로그램을 vscode에서 자동적으로 h1, h2, h3등 숫자를 바꿀때 굉장히 편리하게 변경이 된다.
'Study > HTML' 카테고리의 다른 글
| [HTML] Day3 (0) | 2023.10.10 |
|---|---|
| [HTML] Day2-1 (1) | 2023.10.10 |
| [HTML] Day2 (0) | 2023.10.10 |
| [HTML] Day1 (0) | 2023.09.25 |
| HTML을 의한 VScode 설치 (0) | 2023.09.25 |