HTML이란 무엇일까 🐾

HTML

HTML이란 무엇일까 🐾

lheunoia 2021. 1. 4. 21:28

💡 HTML이란?

HTML(Hyper Text Markup Language)은 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다. 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공합니다. HTML은 elements로 구성되어 있으며, 이들은 적절한 방법으로 나타내고 실행하기 위해 각 컨텐츠의 여러 부분들을 감싸고 마크업 합니다.

🌳 HTML 요소(element)의 구조

요소(element)의 주요 부분은 다음과 같습니다.

• 여는 태그(Opening tag): 요소의 이름과 (위 경우 p) 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소의 시작에 위치합니다.

• 닫는 태그(Closing tag): 요소의 이름 앞에 슬래시(/)가 있는 것을 제외하면 여는 태그(Opening tag)와 같습니다.

이것은 요소의 끝에 위치합니다. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 실수이며 원치 않는 결과를 낳게 됩니다.

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

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

🥁 속성(Attribute)

속성은 요소에 실제로는 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다. 위는 스타일에 관련된 내용이나 기타 내용을 위해 해당 요소를 구분할 수 있는 class 속성을 부여했습니다.

속성을 사용할 때 지켜야 할 규칙들입니다.

• 요소 이름 다음에 바로 오는 속성은 요소 이름과 속성 사이에 공백이 있어야 하고, 하나 이상의 속성이 있는 경우에는 속성 사이에 공백이 있어야 합니다.

• 속성 이름 다음에는 등호(=)가 붙습니다.

• 속성 값은 열고 닫는 따옴표로 감싸야 합니다.

🍡 HTML 문서의 구조

이제 어떻게 개별 요소들을 결합해 전체 HTML 페이지를 구성하는 지에 대해 살펴봅시다.

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8">
           <title>My page</title>
	</head>
	<body>
    	<p>welcome to my page!</p>
    	</body>
</html>

• <!DOCTYPE html>: 유효한 문서 형식을 나타냅니다.

• <html></html>: <html> 요소입니다. 이 요소는 전체 페이지의 콘텐츠를 포함하며 기본 요소로도 알려져 있습니다.

• <head></head>: <head> 요소입니다. 이 요소는 사용자에게는 보이지 않지만 검색 결과에 노출될 키워드, 홈페이지 설명, CSS 스타일, character setdeclaration 등 HTML 페이지의 모든 내용을 담고 있습니다.

• <meta charset="UTF-8">: 이 요소는 HTML 문서의 문자 인코딩 설정을 UTF-8로 지정하는 것이며 UTF-8에는 전세계에서 사용되는 언어에 대한 대부분의 문자가 포함됩니다. 이 설정을 사용하면 페이지에 포함된 모든 텍스트의 내용을 처리할 수 있습니다.

• <title></ttitle>: <title> 요소입니다. 이 요소를 사용하면 페이지 제목이 설정되며 페이지가 로드되는 브라우저 탭에 표시되는 제목으로 사용됩니다.

• <body></body>: <body> 요소입니다. 이 요소에는 텍스트, 이미지, 비디오, 오디오 등을 비롯하여 페이지에 표시되는 모든 콘텐츠가

포함됩니다.

📝 예제 1

배운 내용을 토대로 화면에 Hey you!를 나타내 봅시다.

<!DOCTYPE html>
    <head>
	<meta charset="UTF-8">
      <title>test page</title>
    </head>
    <body>
        <p>Hey you!</p>
    </body>
</html>

VSCode에서 라이브 서버를 실행하여 결과를 확인해 보세요!

결과가 잘 나타났나요? 🙂

현재글HTML이란 무엇일까 🐾

🌻몰입하는 개발자 🌻

Today :
Yesterday :

nextjs planetScale 배포, stack, dfs, 백준 N과 M 2 c++, JavaScript, planetScale deploy, nextjs prisma, DP, BFS, nextjs planetScale deploy, 백준 백트래킹, C++, 백준 bfs, css, level3, 다이나믹 프로그래밍, 2022 kakao blind recuritment, level2, level1, PlanetScale,

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

구름