🌊 html의 기본

개인프로젝트를 진행하게 되면서, html을 처음부터 차근차근 공부를 해야겠다는 생각이 들었다. 마크다운도 잘 못하는데 🤦‍♀️
원래 그냥 읽으면서 공부하려 했는데, 어차피 타이핑도 칠 겸, 손가락에 익힐 겸 … 포스팅도 할 겸! 겸사겸사 적으면 나중에 까먹었을 때가 되더라도 도움이 되겠구나 싶어서 .. .

☁️ HTML의 구성요소

요소 (Elements)
HTML에서 시작 태그와 종료 태그로 이루어진 모든 명령어들을 의미한다.

태그 (Tag)
요소(Elements)의 일부로 시작 태그와 종료 태그 두 종류가 있다.
시작 태그는 요소를 시작하며, 종료 태그는 요소를 끝내는 기능을 가지고 있다. 일부 태그 중에는 종료 태그가 없는 것도 있다.

<p>요소</p>
<p align = "center">태그에 속성을 부여하면 태그의 성격을 좀 더 구체화 시킬 수 있다.</p>

<p>태그 안에 align이라는 속성(attributes, 애트리뷰트)를 사용한다면, 문단 안의 정렬을 설정할 수 있다.

변수(Arguments)
속성과 관련 된 값으로, 위의 코드에서처럼 align 이라는 속성의 center 라는 변수를 지정하였다.

🌩 HTML의 기본구성

HTML문서는 기본적으로 HEAD, BODY로 구분된다.
HEAD안의 내용은 화면에 직접적으로 출력되지는 않지만, 웹브라우저가 알아야 할 중요한 정보가 포함되어 있다.
BODY안의 내용은 화면에 직접 출력되는 부분이다.

<HTML> ... </HTML>

이는 HTML문서의 시작과 끝을 의미하는 태그로서, 작성된 문서가 HTML을 사용한 문서임을 나타낸다.

시작태그인 <HTML>은 앞쪽에, 종료태그인 </HTML>은 문서의 마지막에 두어 소스 전체를 감싸주어야 한다. 즉, <HTML>태그 안에 <HEAD>와 <BODY>태그가 차례로 위치하여야 한다.

<HEAD> ... </HEAD>

<HEAD>는 HTML문서에 관한 기본 정보를 포함하고 있는 부분으로, 주로 문서의 제목, 제작자, 문서정보 등이 포함될 수 있다.

<TITLE> - 문서 상단의 제목 설정
<META> - 문서 정보 설정
<script> - javascript 언어 등을 사용한 다양한 프로그램이 위치하는 공간이기도 하다.
<Style> - 문서의 장식

위와 같은 태그를 적어주더라도 실제 화면 상에서는 아무런 내용이 출력되지 않는다.
그렇다면, 왜 이런 태그를 적어야 할까?
이는 HTML태그를 읽는 웹브라우저에게 필요한 내용을 알려주는 역할을 하는 태그들이다.
예를들어 <TITLE>과 같은 경우에는 화면에는 출력되지 않으나, 웹브라우저의 제목 표시줄에 출력이된다.

<BODY> ... </BODY>

HTML 문서의 본문에 해당하는 곳으로, 실제 화면에 나타나는 내용을 태그 사이에 기술한다. 즉, 사용자가 웹브라우저 상에 표현하고자 하는 내용들을 다양한 태그를 사용하여 구성하는 부분으로, 웹문서의 대부분을 차지하게 된다.

⛈ HTML 문서의 본문을 의미하는 BODY 태그

<BODY>와 <BODY> 태그 사이에 본문이 위치한다. 태그의 주요 속성으로는 bgcolor, leftmargin, topmargin이 있다.

bgcolor

본문의 배경색을 지정한다.

<body bgcolor = "gray">

leftmargin

본문의 왼쪽 여백을 지정한다.

<body leftmargin = "100">

topmargin

본문의 상단 여백을 지정한다.

<body topmargin = "100">

🌧 주석(Comment)

HTML에서 주석을 사용하려면  사이에 내용을 넣으면 된다.

<!-- 주석 내용 -->

이 글의 출처로!👇

홈짱닷컴

☁️ HTML의 구성요소
🌩 HTML의 기본구성
⛈ HTML 문서의 본문을 의미하는 BODY 태그
🌧 주석(Comment)