안녕하세요.
Hynn입니다.
이 글에서는 HTML에서 주로 사용된 Elemenrt 를 정리하고, 각각의 사용방식에 대해서 정리해보려고 합니다.
다음글에서는 HTML과 CSS를 활용하는 연습을 하고자 합니다.
목차
1. HTML의 개념
2. Element 유형 정리
3. 종속 속성 정리
4. 기초작성 가이드
1. HTML의 개념 정리
HTML(Hyper Text Markup Language)는 가장 단순한 형태의 웹 언어입니다. 우리가 일반적으로 사용하는 브라우저(ex.Chorme, Edge, Safari)가 하는 일이 대표적으로 이 HTML로 작성된 페이지를 해석하여 우리가 보는 시각형태로 보여주는 역활을 합니다.
그래서 모든 언어를 입문하기 전 HTML로 개발자마인드라던지, 빠른 결과물을 확인할 수 있는 HTML로 많이 입문을 하고, 쉽게 접근을 하기 용이한 언어이기도 합니다.
물론 이쁘게[?]표현하려면 CSS라는 아이를 사용하여 추가작업이 이루어져야 하지만, 여기서는 HTML만 다루도록 하겠습니다.
2. Element 유형 정리
HTML의 Element 라는것은 "요소" 라고도 표현합니다.
가장 정확한 문서로는 MDN Reference 라는 커뮤니티에서 설명한 Technical Documenet 가 존재하지만, 혹시라도 이 글을 찾아보시는 분들이라면 이제 막 입문을 하는 단계이기때문에, 쉽게 참고할 수 있도록 가이드글을 작성했습니다.
만약 이 문서와 MDN Reference 문서의 다른점이 있다면 제 글보다 MDN 문서를 신뢰하시기를 강력하게 권장드리고 싶습니다.
MDN Reference 문서만을 정독하기에는, 시간적 제약이나, 기간이 효율적이지 못하는 점에 대해서는 말하지 않아도 잘 아시리라 생각이 됩니다.
HTML 학습의 경우, 주로 사용되는 Element 가 정해져 있기 때문에, 그 위주로 정리를 해보도록 하겠습니다.
2-1. 기본 구성 Element
1) <HTML>
HTML문서의 범위를 작성하는 Elemenet 입니다. 시작과 끝을 지정하는 Element 입니다.
예시
<html> <--이곳이 시작입니다.
</html> <-- 모든 html 문서가 작성되었다면, 표시된 Element 를 입력하여 문서의 종료범위를 정해야 합니다.2) <HEAD>
Head 는 기계가 식별가능한 문서 정보를 담습니다. 이는 일반적으로 유저들에게 보여지는 않은 것이고,
대표적으로 우리가 인지하는 것은 제목,스크립트,스타일 시트가 존재합니다.
또한 이 Head는 HTML문서의 첫번째 자식으로 배치가 되어야 합니다.
작성예시
이 Head 부터는 html 문서 내에 들어가야 합니다. 그러므로 아래와 같이 작성되어야 합니다.
<HTML>
<HEAD> <-- HTML문서 내의 HEAD를 시작합니다.
</HEAD> <-- HEAD의 모든 작성이 완료되면 이 명령어로 영역을 닫습니다.
</HTML>2-1) <Title>
Title은 우리가 브라우저에서 웹 페이지를 열때 나타나는 제목 표시줄
혹은 페이지 탭에서 보여주는 문서의 제목을 설정합니다. 이 항목은 Head 안에 종속되며, 2-x로 작성된 Element 는
Head 안에서 작성되어야 하는 항목입니다.
아래의 예시처럼 작성하면 페이지 제목 표시줄에는 아래의 작성한 내용이 그대로 표시됩니다.
작성예시
<html>
<head>
<title>나는 웹 사이트입니다</title>
<head>
<html>2-2)meta
Meta는 html 문서를 작성할때, 사실상 반드시 포함된다고 생각하는것이 가장 이해하기 쉽습니다.
위 항목은 Visual Studio Code 에서 단축키로 편하게 입력도 가능합니다.
일반적으로 !를 입력후 Enter를 하면 아래의 예시처럼 작성이 되는데
각 항목별로 간단하게 정의를 드리자면 아래와 같습니다.
1)Charset
문자인코딩의 방식입니다. 일반적으로 이 특성이 존재하는 경우,
반드시 문자열 "UTF-8"의 대소문자 구분이 없는 ASCII 표현이여야 합니다.
2)http-equiv
프래그마 지시문을 정의합니다. 이 항목은 규칙이 있어서, 규칙 위주로 정리하면 다음과 같습니다.
"X-UA-Compatible"로 정의할 경우 Content는 반드시 IE=edge 여야만 합니다.
Content-type 을 지정하는 경우, content 의 특성은 반드시 "text/html; charset=utf-8 이여야 합니다.
이외에도 몇가지 특성은 MDN Reference 를 참고하시면 도움이 됩니다.
3)Name
Name과 content 의 특성을 함께 사용하여 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다.
메타데이터의 이름이라고 생각하면 보다 쉽습니다.
!입력시 나타나는 meta 값
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>2-3) <STYLE>, <LINK>
HTML의 STYLE 을 지정할때 사용하는 설정값과, LINK를 같이 묶어서 설명하였습니다.
<Style> Element 는 CSS 정보를 설정하기 위해 입력합니다.
하지만, HTML 문서 하나에 CSS와 HTML이 같은 시트에 있다면 글자가 매우 방대하기에, 보통 CSS와 HTML파일을 나누어 사용합니다.
그를 위해서는 <LINK>를 같이 사용합니다.
이후에 CSS에서 외부 예제들을 사용할때도, 이를 이용하게 되는데, 같이 활용할 수 있도록 예제를 작성해보았습니다.
먼저 작성의 경우, 보통은 <Head> 안에 <Style>이 작성됩니다.
하지만 위에서 언급했듯이, CSS의 작성과, Body의 작성이 하나의 시트에서 이루어지면 매우 양이 방대해지고,
결과적으로 가독성의 영향을 미치기때문에, 파일을 분리하여 작성하는 방식을 예제로 설명했습니다.
Link 이후에 아래의 3가지의 속성이 반드시 작성되어야 합니다.
1) href = 파일의 경로 혹은 URL를 입력합니다
2) type = 링크된 컨텐츠의 타입을 정의합니다. 특성의 값은 MIME 타입으로
일반적으로 "text/css" 혹은 "text/html"이 가장 흔합니다.
3) rel = Relationship 의 약자로 표기되며, 연결된 파일과의 관계를 뜻합니다. 예시에서는
CSS, 즉 스타일시트를 연결했기 때문에 Stylesheet로 표기됩니다.
<html lang="en">
<head>
<link href="경로작성" type="text/css" rel="stylesheet">
</head>
3) <BODY>
위의 설명된 Head와 다르게 실제 보여지는 HTML문서의 내용을 담는 요소입니다.
당연하게도 두번째로 배치되어야 하며, 일반적으로 Head 다음으로 배치되는 요소입니다.
실질적으로 대부분의 작성이 이 Body 내에서 작성된다고 생각하면 더 이해하기 쉽습니다. 말 그대로 몸통이죠.
아래부터는 예시의 설명을 생략하겠습니다.
작성예시
<HTML>
<Head>
</Head>
<Body>
</Body>
<HTML>
4) <TAG>
Tag는 개발자에게만 보여지는 항목입니다. 일반적으로 작성한 Element 나 속성을 일시적으로 사용하지 않고,
개발자들만 보도록 설정하거나, 문서의 가독성을 위해 사용하기도 합니다.
이는 단축키가 존재하며,
제가 사용하는 Visual Studio Code 에서는 Command+/ (Windows : Control:/) 입니다.
만약 아래와 같이 작성한HTML 열에서 아래와 같이 표기가 됩니다,
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
위와 같이 작성한 항목을 변경하면,
<!-- <ul>
<li>1</li>
<li>2</li>
<li>3</li> -->
으로 변경됩니다.
물론 이와 다르게 별도의 주석을 넣고자 하시는분들은 <!-- 으로 시작하여 --> 으로 닫으면 되겠습니다.
'개발공부일지 > HTML' 카테고리의 다른 글
| HTML/CSS - Table 을 사용하여 표 만들기 (0) | 2022.11.21 |
|---|---|
| HTML/CSS - Display Flex 에 관하여 (0) | 2022.10.28 |
| HTML HTML 기본 개념 정리 및 가이드 - Inline Element (0) | 2022.10.21 |
| HTML HTML 기본 개념 정리 및 가이드 - Block Element (0) | 2022.10.21 |
| HTML 기본 개념 정리 및 가이드 - Block, Inline 알아보기 (0) | 2022.10.20 |
댓글