[HTML] 01

14567 단어 htmlhtml

HTML(Hyper Text Markup Language)은 웹 문서를 만드는 언어이다.
html의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것이다.
글자를 보기 좋게 꾸미거나 문서의 배치를 다양하게 바꿀 수도 있으나, 웹 브라우저를 꾸미는 것에 특화되지는 않았다. 꾸미는 것은 css, js에서 특화되어 있다.

<!DOCTYPE html>
<html lang = "ko">
    <head>
    	<meta charset = "UTF-8">
        <title>HTML 기본 문서</title>
    </head>
    <body>
    	<h1>프런트엔드 웹 개발</h1>
        <hr>
        <p>HTML</p>
        <p>CSS</p>
        <p>자바 스크립트</p>
    </body>
</html>

html 문서의 기본 구조는 다음과 같다.

<!DOCTYPE html>

현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻이다.

<html> ~ </html>

웹 문서의 시작과 끝을 나타내는 태그이다. 웹 브라우저가 html 태그를 만나면 /html 까지 소스를 읽어 화면에 표시한다.

<head> ~ </head>

웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분이다.

<body> ~ </body>

실제로 웹 브라우저 화면에 나타나는 내용이다.

  • html에서는 영어 대소 문자를 구별할 필요가 없다.
  • html 태그에서는 lang 속성으로 문서에서 사용할 언어를 지정할 수 있다. 검색 사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문이다. 
<meta>
<meta name = "keywords" content = "html의 구조"> //웹 문서의 키워드
<meta name = "description" content = "html의 구조를 알아봅시다"> //웹 문서의 설명
<meta name = "author" content = "Han Jiseon"> //웹 문서의 소유자나 제작자

웹 문서와 관련된 정보를 지정할 때 사용한다. 이 태그는 웹 사이트의 키워드, 간단한 설명, 제작자 등의 정보를 지정할 수 있으며 이 정보는 검색 엔진에서 사이트를 검색할 때 참고된다.

<title> ~ </title>
<title> HTML 기본 문서 </title>

title 태그는 웹 문서의 제목을 지정한다. 

<body>
    <h1>프런트엔드 웹 개발</h1>
    <hr>
    <p>HTML</p>
    <p>CSS</p>
    <p>자바 스크립트</p>
</body>

body 태그에서 작성한 내용은 웹 브라우저에서 나타난다.

html의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱 태그라고 한다.
시맨틱(semantic): 의미론적인, 의미가 통하는
시맨틱 태그가 필요한 이유는 다음과 같다.
1. 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있다.
2. 문서 구조가 정확히 나누어지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽다.
3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다. 

<header> ~ </header>

header 태그는 말 그대로 헤더 영역을 의미한다. 

<nav> ~ </nav>

nav 태그는 같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다. 흔히 내비게이션을 만들 때 사용한다. nav 태그는 웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있다.
웹 문서에서 nav 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션마다 다른 스타일을 적용할 수 있다.

<main> ~ </main>

main 태그는 웹 문서에서 핵심이 되는 내용을 넣는다.
웹 문서에서 한 번만 사용할 수 있다.

<article> ~ </article>

article 태그는 웹에서 실제로 보여주고 싶은 내용을 넣는다. 예를 들어 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 말한다. 문서 안에는 article 태그를 여러 개 사용할 수 있고, 이 안에는 section 태그를 넣을 수도 있다.

<section> ~ </section>

section 태그는 웹 문서에서 콘텐츠 영역을 나타낸다.
section 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, article 태그는 블로그의 포스트처럼 독립된 콘텐츠로 쓴다.

<aside> ~ </aside>

aside 태그는 본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만든다. 필수 요소는 아니다.

<footer> ~ </footer>

footer 태그는 웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다. 푸터에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣는다. 또한 푸터 영역에는 header 태그를 비롯하여 section, article 등 다른 시맨틱 태그를 모두 사용할 수 있다. 

<div> ~ </div>
<div id = "header">
<div class = "detail">

div 태그는 구분을 위해 여러 소스를 묶어주는 태그이다.
속성을 사용해 문서 구조를 만들거나 스타일을 적용할 때 사용하기도 한다.
즉 영역을 구별하거나 스타일로 문서를 꾸미는 태그이다.

[백준] 15486번: 퇴사2
기존 React 프로젝트에 tailwindcss를 추가하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage