Frontend/HTML

01. HTML 기본문법

개발개발빈이 2022. 3. 22. 22:43

○ HTML 문서

    - Hyper Text Markup Langauge의 약자

    - 웹페이지를 작성할 때 사용하는 문법

    - 확장명 .html 로 저장

    - HTML문서는 웹브라우저(크롬, 엣지, 파이어폭스 등)에서 출력

 

○ HTML 태그(Tag)

    - HTML 명령어를 Tag라 한다

    - Tag는 대소문자를 구분하지 않는다 (단, 소문자 사용에 권장됨)

    - <> 안에 명령어를 쓴다

    - 여는 태그와 닫는 태그로 구성되어 있다

 <h1>너무 아름다운다운다운다운 뷰</h1>
 <p>더 보여줘 다음다음다음다음 뷰</p>

    - 단, 여는 태그와 닫는 태그가 동시에 있거나 닫는 태그가 없는 경우도 있다

<meta/>
<link/>
<img> 
<br>

    - 엔터(줄바꿈)을 허용하지 않는다

    - 공백은 1칸만 허용한다(여러 칸을 띄어도 1칸만 띄어쓰기됨)

    - 주석문은 <!-- --> 안에 넣는다

 <!--  주석내용, 웹 브라우저에 출력 되지 않는다   -->

 

○ HTML 문서 기본 구조

<!DOCTYPE html>
 <html lang="ko">                    
     <head>                          
         <title>환영합니다</title>
     </head>
     <body>                          


         <!--  주석문(보충설명)   -->


     </body>
 </html>

    ① <!DOCTYPE html> 

        - 문서 유형 지정

        - HTML5 구조타입 

 

    ② <html lang="ko"> </html>   

        - <html lang="ko"> : HTML 문서 시작, 한국어 구성

        - </html>              : HTML 문서 끝 

 

    ③ <head> </head>

        - <head></head>   : 머리말의 시작과 끝

        - <title></title>      : 제목표시 (예를 들어 크롬에서는 탭의 이름으로 나온다)

        - 그 외 화면에는 보이지 않지만 웹 브라우저가 알아야 할 정보들은 <head> 부분에 입력

 

    ④ <body> </body> 

        - <body></body>  : 본문의 시작과 끝

        - 실제 브라우저에 표시될 내용들을 입력