본문 바로가기
스터디/HTML & CSS

HTML DOCTYPE 및 기본 구조

by Baekee 2021. 9. 6.
HTML DOCTYPE 이란?

Doctype : 브라우저가 html의 결과물을 정확히 표현할 수 있도록 도와준다

              Ref. html 4.01 transitional ...flexible

                   => 문법상 버전이 안 맞을지라도 유연하게 허용하여 준다

 

                    xhtml 1.0 transitional ...strict

                   => 문법상 버전이 안 맞을 시, 엄격하여 ifram 등과 같은 특정요소를 사용할 수 없다

 

HTML 기본구조

<!DOCTYPE html> : HTML 버전 확인 가능                     
<html> : HTML 문서의 Root 요소 정의
  <head> : HTML 문서의 Metadata 정의

              * 메타데이터(Metadata) : HTML 문서에 대한 정보, 웹 브라우저에는 직접적으로 표현되지 않는 정보

                                              Ex) <title><style><meta><link><script><base> 등

    <meta charset="UTF-8">     
    <title></title> : HTML 문서의 제목 정의

                         - 웹 브라우저의 툴바에 표시

                         - 웹 브라우저의 즐겨찾기에 추가할 시, 즐겨찾기 제목이 됨

                         - 검색 엔진의 결과 페이지에 제목으로 표시
  </head>
  <body> : 웹 브라우저를 통해 보이는 내용(Content) 부분
  </body>
</html>

 

<!DOCTYPE html>                                          ☞     HTML5로 작성된 것을 의미
<html>
<head>
<meta charset="UTF-8">                                 ☞    Character set : 한글처리 (EUC-KR/UTF-8) 
<title>hello1</title>
</head>
<body>
안녕 HTML 나도 안녕 <br> 반       가워 <br> 
나도 줄바꿈 <br       />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 나도!<br>      ☞    &nbsp; : 한칸 띄어쓰기 표시
                                                                         Space bar 사용할 시, 축소되어 출력됨
                                                                         비 연속 빈칸은 인정 O / 연속 빈칸은 인정 X
<p>인사에 대해</p> 
<p>빈칸 한줄이 생기네</p>
</body>
</html>

[출력 결과]

 

HTML Tag

<br> or <br /> : 한 줄 줄 바꿈

                       Doctype이 XHTML일 경우, <br /> 사용(열림 및 닫힘 태그)

                       Ref. XML의 경우, 문법이 까다로움 But! 조직적, 구체화 -> 환경설정파일로 사용

<p></p> : Paragraph(문단단위)

              줄 바꿈이 한 번 더 포함

 

HTML 실행원리

 

    Java의 경우, jdk/jre를 통하여 컴파일 후, .class 파일 생성하여 메모리에 로드(load)하여 실행

    

    =>       .java → .class                 .html

 

출처 : TCPSCHOOL.com

'스터디 > HTML & CSS' 카테고리의 다른 글

HTML Tag 모음과 활용 예시3 - <input>  (0) 2021.09.07
HTML Tag 모음과 활용 예시2 - <form>  (0) 2021.09.07
HTML Tag 모음과 활용 예시 1  (0) 2021.09.06
Tomcat 설치 및 환경설정  (0) 2021.09.04
HTML 이란?  (0) 2021.09.04

댓글