HTML ( Hypertext Transfer Markup Language )
- 용도 : 문서의 구조를 설정
- History
- 현재는 HTML5 를 사용
- 작성 도구
- Visual Studio Code 를 사용
***
플러그인 설치
- live server
- Auto Rename Tag ( 태그를 수정할시 자동적으로 바꿔줌 )
-
웹 컨텐츠 작성 시 고려할 점
- 웹 표준 ( 크로스 브라우징 )
- 웹 접근성
-
참조 사이트
-
ex)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
</body>
</html>-->
위의 코드를 불러오는 단축기 : !
문법 ( 주석, 기본구조 )
- 주석처리
<!-- 주석 내용 -->
- 태그의 기본 구조 --> element
- <열린태그>컨텐츠</닫힌태그>
- <열린태그 속성="값" 속성="값" ...>컨텐츠</닫힌태그>
- <열린태그></닫힌태그> // empty 태그
- <태그 /> // empty 태그- 문서 구조
<!DOCTYPE html>
<html>
<head> 다양한 메타정보나 선언부 </head>
<body> 화면에 보여질 본문 내용 </body>
</html>ex) test1.html
->
문법 (기본태그)
<head><title><meta>
- 문서의 전반적인 내용을 저장
ex) test2.html
-->
<meta http-equiv="refresh">--> 현재 이 문서를 새로고침<meta http-equiv="refresh" content="3">--> 3초뒤에 이 문서를 새로고침<meta http-equiv="refresh" content="3; url=https://www.naver.com">--> 3초뒤에 새로고침하여 네이버로 이동
문법 (글자 꾸미기)
<h>- <h숫자> </h숫자> : 숫자만큼 글자의 크기를 조절/ 줄바꿈 기능도 포함 / 굵은 글씨로 나타남
- 일반적으로
body> </body>안에 들어가는글자는<h4>와 크기가 비슷하다
<p>- 문단을 구별하는 태그
<b>- 글자를 두껍게 나타내는 태그
<u>- 글자에 밑줄을 나타낼 수 있다
<strike>- 글자 가운데 선을 나타낼 수 있다
<i>- 글자를 이탤릭체로 나타낼 수 있다
<ul>- 순서가 없는 리스트
- type을 지정할 수 X
<ol>- 순서가 있는 리스트
- type를 지정할 수 O
***
start 속성 (중간에 다른 내용 넣기)
(ex)
3번째까지 순서가 있는 리스트에 4번째부터 내용을 집어넣기
<ol type="i" start="4">
<li>키위</li>
<li>복숭아</li>
- 몇가지 entity
(= html에서 사용할 수 X 예약어)
표기법 : &entity명;
-  : 하나당 공백 1개
-<: '<' 출력
->: '>' 출력
-©: ©
-😃등 이모지 값 : 이모지사용
<pre>, <xmp>
(= 데이터 고정 즉, 화면에 입력한 그대로)<pre>: 글자 꾸미기 효과, 굵기나 글씨체 지정할 수 O<xmp>: 글자 꾸미기 효과, 굴기나 글씨체 지정할 수 X
ex) test3.html
-->
ex) test3-1.html
-->
ex) test3-2.html
-->
ex) test3_entity
-->
