HTML 기본 구조, html 강좌2

Posted by 슈퍼너드 리보
2020. 8. 25. 11:49 프로그래밍/HTML
반응형

HTML 기본 구조는 다음과 같이 이뤄졌습니다. 먼저 코드 첫줄의 !DOCTYPE은 지금 쓰는 문서가 html 문서라고 선언을 해주며 어떤 버젼인지 알려주는 명령문입니다. HTML5의 이전버젼인 HTML4나 그보다 더 이전 버전들에선 독타입을 길게 썼습니다만 HTML5에선 심플하게 !DOCTYPE이라고 써줍니다. !DOCTYPE은 모든 html문서 처음에 옵니다. !DOCTYPE 앞과 뒤에 꺽쇠 기호가 붙어 있네요 이 2개를 묶은 <>을 태그라고 합니다. html문서는 <!DOCTYPE> 외에도 다양한 태그들로 이루어져있습니다. 때문에 <>만으론 모든 태그를 나타내고 부르는게 어렵죠. 그래서 꺽쇠 안에 태그명을 적고 태그명으로 태그를 부릅니다. 독타입 아랫줄에 html 태그가 있는데 이제 본격적으로 html 문서의 시작입니다. html 태그는 head와 body로 나눠졌습니다. head는 탭에 있는 조그만 정보들, 눈에 보이지 않는 글들 body에는 우리가 게시판에 우리가 쓰는 긴 글들 같은 수많은 정보들이 들어갑니다. head 안에 있는 <title>Hello</title> 코드를 봐봅시다. 이렇게 생긴것을 엘러멘트라고 부릅니다. <>태그명</> 형태로 표현합니다. 그런데 이것은 첫줄 코드와 달리 태그가 두개네요. 대다수 html 코드들은 이런식으로 이뤄졌고, 두 태그를 달리 부를 필요가 있습니다. 앞에 태그는 시작태그로 뒤에 태그는 끝태그로 부릅니다. 시작태그는 태그명만 적어주면 되지만 끝태그는 /를 붙여줘야 합니다. 이제 이 코드를 html 인터프리터 프로그램인 JSbin에서 한번 작성해봅시다.




코드 예제


<!DOCTYPE html> <html> <head> <title>html 강좌</title>

<meta name= "author content= 리보"> </head> <body> <h1>html1의 도입</h1>

<p>html의 역사</p> <h1>html1의 개념 </h1> <p>html의 태그 </p> </body> </html>



반응형