영보의 SystemOut.log

[HTML] HTML이란 / HTML 기본구조 본문

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>

  - 버전에 맞게 해석해서 사용 
  - 현재 문서가 HTML5언어로 작성된 웹문서 라는 뜻
<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 출력 화면

 

포스트말론 - Goodbyes 가사

 

 

 

 

# 예제

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

 

 

< 결과 화면 >

 

반응형
저작자표시

'Web > HTML CSS' 카테고리의 다른 글

[HTML] href 태그 새창에서 열기  (0) 2021.08.10
[HTML] <select > <option> 셀렉트 박스 넣기  (0) 2020.10.30
[HTML/CSS] CSS기초 익히기  (0) 2020.09.19
[HTML] HTML의 기본 태그들 / HTML 기초  (2) 2020.08.18
'Web/HTML CSS' Related Articles more