Web/HTML CSS
[HTML] HTML이란 / HTML 기본구조
영보로그
2020. 8. 14. 18:51
반응형
# HTML(HyperText Markup Language)
# HTML 규칙
- XORMSMS < , > 를 구분
- 태그 소문자 사용 권장
- 여는 태그와 닫는 태그 정확히 입력하기
- 들여쓰기 권장
- 속성 값과 태그 같이 사용 가능
- 포함 관계는 명확하게
- 공백이 들어가면 따옴표 " "
# HTML 문서 기본 구조
- 예제1
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<head>
<meta charset=EUC-KR">
<title> HTML보단 HDMI로 영화보자</title>
</head>
<body>
<h1>Me and Kurt feel the same, too much pleasure is pain</h1>
<p> My girl spites me in vain, all I do is complain <br>
She needs something to change, need to take off the edge </p>
</body>
</html>
|
cs |
| <!DOCTYPE html> |
- 버전에 맞게 해석해서 사용 |
| <html> ~ </html> | - 웹 문서의 시작과 끝을 나타내는 태그 |
| <head> ~ </head> | - 웹 문서가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분 (웹 브라우저 화면에 따로 표시되진 않음) - <title> ~ </title>등 스타일 및 스크립트가 포함되기도 함 |
| <body> ~ </body> | 실제로 웹 브라우저 화면에 나타날 내용 |
| <h1> ~ </h1> | <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> - 글자 크기를 나타냄. 숫자가 클 수록 글자 크기는 줄어듬 |
| <p> ~ </p> | 단락 표시 |
<br> |
줄 바꿈 |
- 예제1 출력 화면
# 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h3>과정</h3>
<ul>
<li>JSP</li>
<li>SPRING</li>
<li>Kotiln</li>
</ul>
<h3>과정2</h3>
<ol>
<li>JSP</li>
<li>SPRING</li>
<li>Kotiln</li>
</ol>
<h3>과정3</h3>
<dl>
<dt>JSP</dt>
<dd>HTML</dd>
<dd>JAVA</dd>
<dd>ORACLE</dd>
<dt>Spring</dt>
<dd>XML</dd>
<dd>Annotation</dd>
<dt>Kotlin</dt>
<dd>Java</dd>
<dd>XML</dd>
</dl>
</body>
</html>
|
cs |
< 결과 화면 >
반응형