코딩/HTML

html 문서의 기본 구조 2단계

moodyblues 2021. 4. 5. 11:04
반응형

1. 크게 다음과 같다.

( 1,2,3은 요식행위, 실제 구조는 4,5의 두 단계이다)

 

1) <!DOCTYPE html>

2)  <html></html>

3)  <meta charset="UTF-8">

4)  <head> </head>

5)  <body> </body>

 

2. 에디터 입력 모습

 

<!DOCTYPE html>

   <html>
   <head>
   <meta charset="UTF-8">
 
   <title>html 문서의 기본 구조</title>
   </head>
   <body>
   <h1>tag란</h1>
   <p>태그(tag)= 꼬리표; 정가표; = 꼬리표, 즉 설명<br/>
태그는 꺽쇠(angle bracket)로 감싸기로 약속<br/>
(다시 다른 태그로 감싸 중첩하여 사용 가능)</p>

   <p>태그는 꺽쇠와 슬러쉬 꺽쇠의 한쌍으로 표현한다 <br/>
(그러나, 단독사용 가능한 태그도 있다; img, br/ 등) <br/>
주로 많이 쓰는 태그: 약 30개 </p>

   </body>
   </html>

 

3. 크롬 브라우저 출력 모습

1) tytle의 내용은 크롬 창 상단에 문서 제목으로 나타난다.(아래 그림)

2) body 속의 내용이 크롬 창 안에 나타난다.(아래 그림)

 

 

 

크롬 브라우저에 표현된 모습

4. 결론 : html은 너무나 간단한 문서 구조이다.

 

코드 이미지

 

반응형

'코딩 > HTML' 카테고리의 다른 글

잊어야 할 태그(tag)들  (0) 2021.04.08
속성(attributes)과 요소  (0) 2021.04.07
요소(element)의 요소 5가지  (0) 2021.04.07
DOCTYPE html은 생략해도 될까?  (0) 2021.04.06
html 문서 구조의 시각화  (0) 2021.04.06