HTML 기본문법

화면구현/html

HTML 기본문법

빵으니 2020. 3. 30. 18:15

1. HTML 5

HTML (Hyper Text Markup Language)은 웹페이지를 기술하기 위한 마크업 언어.

웹페이지의 내용(content)과 구조(structure)을 담당하는 언어로써 HTML 태그를 통해 정보를 구조화(**계층적 구조)하는 것.

- HTML (Makrup Language) → Content

- CSS (Style sheet Language) → Presentation

- JS (Programming Language) → Behavior

2. HTML 기본 틀

- HTML 5 문서는 반드시 <!DOCTYPE html>로 시작 / document type을 HTML5로 지정

- 실제적인 HTML document는 2행부터 시작 / <html>과 </html>사이에 기술

- <head>와 </head> 사이에는 document title, 외부파일 참조, 메타데이터의 설정 등이 위치. 이 정보는 브라우저에 표시되지 않는다

- 웹브라우저에 출력되는 모든 요소는 <body>와 </body> 사이에 위치

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
        <h1>금요일금요일금요일</h1>
    </center>
</body>
</html>

▶ 대표적인 HTML editor/ IDE

- Visual Studio Code ← 저는 요거 사용!

- WebStorm

- Atom

- Brackets

- Sublime text

3. HTML5의 기본 문법

1) 요소 (Element)

- HTML 요소는 시작태그(start tag)와 종료 태그(end tag), 그리고 태그 사이에에 위치한 content로 구성

- HTML document는 요소들의 집합

2) 요소의 중첩 (Nested Element)

- 요소들은 얼마든지 중첩될 수 있다.

- 중첩관계로 웹페이지의 구조(structure) 표현

3) 빈 요소 (Empty Element)

- 빈 요소는 content를 갖지 않으며, 어트리뷰트(attribute)만 가질 수 있다

▶어트리뷰트(attribute 속성)란 요소의 성질, 특징을 정의한다. 어트리뷰트는 요소에 추가적 정보(이미지 파일의 경 로, 크기 등)를 제공 / 어트리뷰트는 시작 태그에 위치하고, 이름과 값이 쌍을 이룸

예시) <img src="html.png">

어트리뷰트명 / 어트리뷰트값

▶ 대표적 어트리뷰트

Attribute	Description
id	찾아주는 역할! / 유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다.
class	묶어주는 역할! / 스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
hidden	css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
lang	지정된 요소의 언어를 지정한다. 검색엔진의 크롤링 시 웹페이지의 언어를 인식할 수 있게 한다.
style	요소에 인라인 스타일을 지정한다.
tabindex	사용자가 키보드로 페이지를 내비게이션 시 이동 순서를 지정한다.
title	요소에 관한 제목을 지정한다.

- 대표적인 빈 요소

<br> : 탭 인덱스

<hr> : 구분선 생성

<img>

<input>

<link>

<meta>

4) 주석(Comments)

- HTML에서 주석은 화면에 표시되지 않지만 소스에는 표시된다!!

HTML 이론 공부는 아래 링크에서 참고하였습니다.

https://poiemaweb.com/

웹 프로그래밍 튜토리얼 | PoiemaWeb

Front-end Development Tutorial

poiemaweb.com