HTML - HTML 문서의 범위와 정보 및 구조 :: 프로그램 탐험가의 개발 세계 탐험기

HTML - HTML 문서의 범위와 정보 및 구조

2020. 7. 29. 23:17

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

● HTML 문서의 범위

<!DOCTYPE html>
<html>
  <head>
    문서의 정보
  </head>
  <body>
    문서의 구조
  </body>
</html>

<!DOCTYPE html>

DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의한다.
이는 웹 브라우저에 우리가 제공할 HTML 문서를 어떤 HTML 버전의 해석 방식으로 구조화하면 되는지를 알려준다.

현재의 표준 버전은 HTML5이다.

2. <html> 태그

3. <head> 태그

웹 브라우저가 해석해야 할 HTML 문서의 정보 범위를 지정한다.
여기서 말하는 정보에는 웹 페이지의 제목, 웹 페이지의 문자 인코딩 방식, 연결할 외부 파일의 위치, 웹 페이지를 구조화하기 위한 기본 세팅 값 같은 것들을 말한다.
다르게는 ‘화면을 구성하기 위한 기본 설정’이라고 표현할 수 있다.

4. <body> 태그

웹 브라우저가 해석해야 할 HTML 문서의 구조 범위를 지정한다.
구조는 사용자가 화면을 통해서 볼 수 있는 내용(콘텐츠)의 형태나 레이아웃 등을 의미하며 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 입력창, 팝업, 광고 등 보이는 모든 것들이 구조에 해당한다.
구조는 BODY 범위 안에서만 생성한다.

● HTML 문서의 정보

<head>태그안에서 사용하는 태그들은 문서의 정보를 가지고 있다.

1.<title > 태그

<head>
  <title>티스토리</title>
</head>

<TITLE> 태그는 웹페이지의 제목을 표시할때 사용한다.

웹 브라우저의 각 사이트 탭에 표시된다.

2.<meta> 태그

<head>
  <meta charset="UTF-8"> <!-- 문자 인코딩 방식 -->
  <meta name="author" content="프로그램 탐험가"> <!-- 사이트 제작자 -->
  <meta name="description" content="프로그램 탐험가의 블로그"> <!-- 사이트 설명 -->
</head>

3.<link>태그

<head>
  <link rel="stylesheet" href="./css/main.css">
  <!--  관계="CSS"         문서경로="./css/main.css" -->
  
  <link rel="icon" href="./favicon.png">
  <!-- 관계="사이트 대표 아이콘 문서경로="./favicon.png" -->
</head>

4.<style> 태그

<style>
  img {
    width: 100px;
    height: 200px;
  }
  p {
    font-size: 20px;
    font-weight: bold;
  }
</style>

5.<script> 태그

<!-- 불러오기 -->
<script src="./js/main.js"></script>

<!-- 작성하기 -->
<script>
<!-- 자바스크립트 코드 -->
  function windowOnClickHandler(event) {
    console.log(event);
  }
  window.addEventListener('click', windowOnClickHandler);
  <!-- 자바스크립트 코드 -->
</script>

● HTML 문서의 구조

<body> 태그 안에서 사용하는 태그들은 HTML문서의 구조를 나타낸다.

1. <div> 태그

<body>
  <div>
    <p></p>
  </div>
  <div>
    <div>
      <h1></h1>
      <p></p>
    </div>
  </div>
</body>

<div>태그는 아무 의미가 없는 태그이며 ‘div’는 ‘division’으로 약자로 ‘분할’을 뜻하고 ‘문서의 부분이나 섹션을 정의’한다.
명확한 의미를 가지지 않기 때문에 정말 많은 경우 단순히 특정 범위를 묶는(wrap) 용도로 사용한다.
보통 이렇게 묶인 부분들에 CSS나 JS를 적용하게

된다.

2. <img>태그

<body>
  <img src="./dog.png" alt="개">
</body>

<img>태그는 이미지를 삽입할때 쓰는 태그이다.

src속성의 값으로는 이미지 파일의 경로를 써주어야 하며 alt속성의 값으로는 이미지 파일이 화면에 출력되지 않을 경우를 대비하여 대체하는 텍스트를 써주어야한다.

그리고 두 속성의 경우에는 <img>태그를 사용할때 반드시 포함되어야 하는 필수 속성이기 때문에

꼭 써주어야한다.

이를 지키지 않으면 웹 표준에 어긋나기 때문이다.

'개발 공부한 내용 정리 > HTML & CSS' 카테고리의 다른 글

CSS- 선택자 (0)	2020.08.03
CSS기초- 선언 방식 (0)	2020.08.03
CSS기초-기본 문법 (0)	2020.08.03
부모 요소와 자식 요소 (0)	2020.07.29
HTML- 기본문법 (0)	2020.07.29

프로그램 탐험가의 개발 세계 탐험기