web/html

[html] 4. 기본 태그 | head | body

jeri 2024. 4. 28. 09:10
반응형

1. 기본 태그

1) Markup Language 주석문

<!-- Markup Language 주석문 -->

2) HTML(Hyper Text Markup Language)

  • Markup Language : 태그이용 ex) XML , HTML ..
  • 태그(Tag)를 사용하여 웹문서를 구조적으로 표현하기 위한 언어
  • 브라우저 엔진에 의해 해석되어 실행(출력)되는 언어
    • 브라우저마다 해석 방법이 다름 : 크롬, 엣지, 사파리, ...
    • 왜? 브라우저 엔진 마다 해석 방법이 다르기 때문
    • webkit(웹킷)방식의 브라우저
    • Gecko(객코)방식의 브라우저
  • CSL( Client Script Language ) : HTML, CSS, JavaScript

3) HTML 특징

  • 태그를 사용하여 웹문서(HTML File) 작성 - 태그는 대소문자 미구분
  • 시작태그와 종료태그가 하나의 짝으로 구성
  • HTML 태그는 독립태그 존재
<br>
  • 다른 Markup Language( ex. XHTML, XML )는 시작태그있으면 종료태그도 반드시 필수
<br></br> 혹은
<br/>
  • HTML4.01 : 문법에 맞지 않으면 경고가 뜨더라도 출력이 됨!
  • XHTML1.0 : HTML이지만, 문법에 맞지 않으면 문법이 강력해서 아예 출력이 안됨!
  • HTML5 : HTML의 장점 + XHTML의 장점 : 문법이 강력하지 않지만, 문법에 맞지 않으면 출력이 안됨!
  • 시작태그와 종료태그 사이에 하위태그 또는 태그내용 표현
  • 시작태그는 속성과 속성값을 사용하여 태그를 다양하게 표현

4) DOCTYPE

  • 웹브라우저가 페이지를 어떻게 해석해야 하는지 알려줌
  • 웹문서의 종류를 표현
<!--HTML5를 이용하여 작성된 웹문서-->
<!DOCTYPE html> <!--HTML5로 작성할게요!-->

5) <html>

  • 웹문서(HTML File)을 작성하기 위해 사용하는 최상위 태그(RootTag)
  • HTML 문서의 시작과 끝을 표시
  • 페이지 전체의 컨텐츠를 감쌈
  • <html>의 하위태그
    • <head> : 웹문서(HTML File)에 대한 정보를 제공하기 위한 태그
    • <body> : 브라우저 출력영역(Document)에 박스모델(BoxModel)를 출력하기 위한 태그
<!DOCTYPE html>
<html>
	<head>
	</head>

	<body>
	</body>
</html>

6) <head>

  • 하위태그 : <meta> , <title> , <style> , <script> , <link> 등

 

 

 

2. <head>의 하위태그

1) <meta>

  • 웹문서에 대한 부가적인 정보(MetaData)를 태그 속성과 속성값으로 제공하는 태그

💜charset속성

  • 웹문서에 대한 문자형식(CharacterSet - 인코딩 : Encoding)을 속성값으로 설정
  • 브라우저가 웹문서를 해석할 때 사용하는 문자의 인코딩 방식을 제공
  • 인코딩 : 문자를 컴퓨터가 알아들을 수 있는 숫자로
  • 문자의 인코딩 방식
    • ISO-8859-1 (서유럽어) : 기본 속성값
    • euc-kr(완성형) : 한글 관련 인코딩 → 외국은 완성형 사용함..
      • 가 나 .. - 한글이 약 15000자 정도 만들어져있음
      • (단점) 해석할 때 시간 오래걸림
      • (단점) 정해진 것만 만들어져있으므로, 만들어지지 않는 문자들도 존재할 수 있음 힗
    • utf-8(조합형) : 한글 관련 인코딩 → 우리는 조합형 사용함..
      • ㄱ , ㄴ , ㅏ ..
      • (장점) 모든 한글을 표현할 수 있음

2) <title>

  • 웹문서의 제목을 설정하는 태그
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>

 

 

 

 

 

3. <body>의 하위태그

  • 하위태그 : <h1> , <div> , <p> , <img> , <span> , <form> 등

1) 박스모델 태그

  • 웹문서를 구성하는 박스모델 태그들

박스모델 태그 = 💚블럭 레벨 태그 + 💚인라인 레벨 태그

  • 💚블럭 레벨 태그 (Block Level Tag)
    • 하나의 태그가 하나의 라인을 모두 사용하는 태그
    • <div> , <h1> , <p> , <ol> , <ul> , <li> 등
  • 💚인라인 레벨 태그 (Inline Level Tag)
    • 하나의 태그가 라인 일부분을 사용하는 태그
    • <span> , <img> , <input> , <select> 등
  • 인라인 레벨 태그의 하위태그로 블럭 레벨 태그 사용 불가능

2) HTML 박스모델 확인

  • 웹사이트를 보자마자 눈에서 BOX가 그려져야 한다!!
  • BOX를 구상하는 방법은?

Document and website structure - Web 개발 학습하기 | MDN

반응형