[HTML & CSS] HTML 기본 문법

HTML (Hyper Text Markup Language)

웹사이트 콘텐츠를 설명하는데 사용되는 마크업 언어입니다.

좀 더 자세히 말씀드리자면 월드와이드웹(WWW)에서 하이퍼텍스트 문서를 만들기 위해 사용되는 기본 언어이며, 

인터넷 창을 통해 볼 수 있는 문서를 만들 때 사용되는 프로그래밍 언어입니다.

HTML은 구조 설계(Structure Design)를 목표로 합니다.

 

html은 태그라는 명령어를 통해 사용하며, 이 태그는 대소문자 구분이 없습니다.

확장자 → .html

 

<strong> 옆에 보신 것을 태그라고 부릅니다.

<strong>이라는 의미는 "뒤에 따라오는 문자들을 강조해라."라는 의미가 약속되어있습니다.

<strong>을 붙여주신 다음 <strong>이라는 태그가 다시 등장할 때까지 사이의 구간을 강조해주는 것입니다.

/ ← 저 기호가 없는 태그를 시작 태그라고 부르며,

/ ← 기호가 있는 태그를 닫히는 태그라고 부릅니다.

시작태그 <ㅡㅡㅡ> 닫히는 태그 사이의 구간을 강조해줍니다.

저 태그가 html문법의 가장 중요한 내용입니다.

 

 

위에 보신 것처럼 메모장에서는 오늘의 명언 다음에 줄바꿈을 해주었지만 웹 브라우저에서는 줄바꿈이 되지 않습니다.

html은 프로그래밍 언어이기 때문에 규칙에 따라 해주어야 합니다.

 

메모장처럼 바꾸어주고 싶다면,

 

 

<h1> heading1

heading=제목

웹브라우저에서 제목의 약속은 

굵고 큰 문자로 꾸며주고 줄바꿈을 해주는 것입니다. 

그래서 <h1>이라는 제목의 의미인 태그를 넣어주시면 위에 보신 것처럼 나옵니다.

 

위에 보신 오늘의 명언이라는 제목보다 조금 더 작은 제목으로 쓰고 싶다면 소제목이라는 것이 있습니다.

 

 

위에 보신 제목보다 조금 더 작아지신 것을 볼 수 있습니다.

 

 

◈    ◈    ◈

 

 

▶ HTML 구성

html : html 문서의 시작을 알리는 태그

head : 시작을 알리는 태그

title : 문서의 제목을 정의 (브라우저의 타이틀바에 표시가 됩니다.)

body : html 문서의 본문의 시작을 알리는 부분

/ : 문서의 끝을 알리는 태그

 

▶ 태그 종류

<h1> ~ <h6> 글자의 크기를 조절할 수 있는 태그입니다.

 

<p> 태그는 한 줄씩 단락으로 나눌 수 있습니다.

 

▶ 글자의 서식을 바꾸는 태그

<b> - 굵게

<i> - 기울임꼴

<ins> - 밑줄

<del> - 취소선

<sub> - 아래 첨자

<sup> - 위 첨자

<big> - 크게

<small> - 작게