HTML5 배우기

2022년 9월월 02일2022년 9월월 04일 deuckhwan

HTML5 Coding

HTML이란?

HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는 프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.

이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다. HTML은 Elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다.

tags 는 웹 상의 다른 페이지로 이동하게 하는 하이퍼링크 내용들을 생성하거나, 단어를 강조하는 등의 역할을 합니다. 예를들어, 다음의 내용을 봅시다.

HTML 요소(Element의 기본 구조)

1.여는 태그(OpeningTag)와 닫는 태그를 정확히 입력합니다. 대부분의 태그는 <p>와</p>처럼 여는 태그와 닫는 태그가 하나의 쌍으로 이루어져 있습니다.

2.닫는 태그(Closing Tag): 이것은 요소의 이름 앞에 슬래쉬(/)가 있는것을 제외하면 여는 태그와 같습니다.이것은 요소의 끝 (이 경우 단락의 부분)에 위치합니다.닫는 태그를 적어주지 않은 것은 흔한 초심자의 오류이며,이것은 이상한 결과를 초래합니다.

3.내용(Content): 요소의 내용이면, 이 경우 단순한 텍스트입니다.

4.요소(Element): 여는 태그 닫는 태그 내용을 통틀어 요소라고 합니다.

5.적당히 들여쓰기 합니다. HTML 태그는 기본 속성상 여러 번 띄어쓰기를 하더라도 한 칸의 공백으로 인식합니다. 따라서 HTML 소스를 작성할 때 태그 사이의 포함 관계에 따라 단계별로 들여쓰기라도 웹 브라우저에서는 단지 한칸으로 인식합니다.

좋은 예

나쁜 예

<ul>

</ul>

<ul>

</ul>

6.태그는 속성과 함계 사용됩니다. HTML 태그는 단순히 태그 하나만 사용되는 것이 아니라, 태그에 여러 기능을 추가해 주는 속성과 함께 사용됩니다. 즉 <태그 속성 = “속성 값” 속성 = “속성 값”……..> 형태로 사용할 수 있습니다.

예를 들어, 웹 문서에 이미지를 삽입할 경우 <img>태그를 사용하는데</img>태그에는 이미지 파일의 경로를 알려주는 src 속성과 이미지의 크기를 알려주는 width 속성, height 속성, 이미지에 보조 설명를 붙여주는 alt 속성 등 여러 가지 속성들과 함께 사용됩니다.

7.인코딩 방식은 UTF-8로 합니다. <mata charset=”UTF-8″>

8.특수 기호 입력 및 사용하기

HTML 문서에는 한글이나 영문, 숫자 등 사용자가 이볅하는 텍스트를 화면에 보여주지만, 지금부터 설명하는 방법을 이용하면 키보드에 없는 특수 기호를 입력할 수 있습니다. HTML 문서에는 특수 문자를 사용하려면 키보드에서 한글 자음을 누른 후 한자모양를 누르면 마우스 커서 바로 아래 흑은 화면 오른쪽 구석에 특수 문자가 표시됩니다.

한 자

HTML 문서의 특성상 여러 개의 공백 문자, 즉 띄어쓰기를 입력하더라도 한 칸만 인식하기 때문에, 여러 개의 공백을 나타내려면 공백을 나타내는 특수 기호를 여러 개 입력합니다. 또한 따옴표를 화면에 표시하려고 할 경우, 소스 창에 그대로 따옴표를 입력하면 <img src=”bg.jpg”>에서 사용하는 속성 값의 따옴표 처럼 인식해 버리기 때문에 그대로 따옴표를 입력하면 안 되고 따옴표를 대신하는 특수 기호를 사용해야합니다.'<‘ 같은 꺽쇠 괄호를 화면에 표시할 때에도 그대로 입력하면 태그로 인식 하므로 태그가 아닐 경우 특수 기호로 입력합니다.

9. 기본 구조와 HTML 문서 만들기

HTML 편집기(Edit) Brackets(download)사용하여 기본 구조 편집

<! docpype html>

<head>

</head>

<body>

</body>

</html>

10.HTML 문서와 DOCTYPE

웹 문서의 시작을 알려주는 <html> 태그보다 먼저 사용하는 것이 ‘문서 유형(document type)’을 지정하는 <!doctype>입니다. 문서 유형은 웹 브라우저에서 “이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라”고 알려주는 것입니다.

11.언제나 시작은 <html></html> 태그

문서의 유형을 선언 후에 실제 문서 정보와 내용이 시작되고 끝나는 것을 표시하는 태그가 <html> 태그입니다. <html> 태그는 웹 문서가 시작된다는 뜻이고 </html> 태그는 웹 문서가 끝났다는 뜻입니다.<html> 태그에서는 lang이라는 속성을 사용해 문서에 사용할 언어를 지정할 수 있습니다. 예를들어 한국어라면 korea의 약자인 ko를 사용하면 됩니다.

국가별 언어 코드는 다음과 같습니다.

코드	de	en	fr	ja	ko	zh
언어	독일	영어	프랑스	일본어	한국어	중국어

11.브라우저에게 정보를 주는 <head> 태그

웹 브라우저 화면에 보이지 않지만, 웹 브라우저가 알아두어야 할 정보들은 무도 <head> 부분에 입력합니다. 문서에서 사용할 외부 파일들도 이곳에서 링크합니다. <head>태그와 </head> 태그 사이에서 문서 정보를 표시하기 위해 사용할 수 있는 주요 태그들은 다음과 같습니다.

<title>태그 – 문서 제목

<body> 태그- 문서의 몸통 주요 내용 들어갈 부분입니다.

답글 남기기 응답 취소