다양한 인터넷 정보를 웹 브라우저에 보여줄 때 사용하는 언어가 HTML로 간단히 말해, "웹 문서를 만드는 언어"라 할 수 있다.

HTML : Hyper Text Markup Language

hyper text: 문서를 서로 연결해주는 링크를 의미

markup: 웹 브라우저에 내용을 보여주는 이미지 등의 위치표시를 의미

즉, HTML의 기본기능은 웹브라우저에 보여줄 내용에 markup을 한 후 문서끼리 링크하는 것을 의미

 

HTML 태그는 이름만 봐도 의미를 알 수 있어서 "Semantic Tag"라고도 불린다.

 

 

 

HTML 태그의 구조

 

<!DOCTYPE html>
<html lang="ko">
	<head>
    	<meta charset="UTF-8">
        <title>HTML 기본문서</title>
    </head>
    <body>
    	<h1>frontend web개발</h1>
        <hr>
        <p>HTML</p>
        <p>CSS</p>
        <p>JS</p>
    </body>
</html>

 

 

웹 문서의 유형을 정하는 선언문, <!DOCTYPE html>태그

- 웹문서의 첫 부분은 문서유형(document type)을 지정한다.
- 위와 같이 선언하여 현재 문서가 HTML5문서임을 명시

 

웹 문서의 시작을 알리는  <html>태그

- <!DOCTYPE html> 선언 후 HTML파일의 시작과 끝을 표시
- <html>과 </html>사이 웹문서 소스를 작성

cf. <html lang="ko">의 의미?

 - lang 속성은 문서에서 사용할 언어를 지정할 수 있다.

 - 이는 '한국어로 된 문서'로 범위를 제한시, <html lang="ko">를 우선검색하게 해준다.

 

웹 브라우저에 문서 정보를 알려주는  <head>태그

- 웹 브라우저가 알아야 할 정보를 입력
- 문서에서 사용할 스타일 sheet file도 이곳에 연결해준다.
📌 <meta>
- data에 관한 데이터를 의미, 웹문서와 관련된 정보를 지정할 때 사용
- 가장 중요한 역할: 화면에 표시될 글자에 대해 어떤 인코딩 사용할 지 지정
ex) 웹서버는 영어가 default라 한국어 사용 시, UTF-8을 적어줘야한다.
 
<meta charset="UTF-8">

또한, 추가적으로 <meta>태그를 이용해 추가적인 정보를 지정할 수 있다.

<meta name="" content="">

ex)

// 웹 문서의 키워드 지정
<meta name="keywords" content="html의 구조">

// 웹 문서의 설명 지정
<meta name="description" content="html의 구조를 알아보자.">

// 웹 문서의 소유자나 제작자 지정
<meta name="author" content="Hyeongchan Im">
📌 <title>
- 웹 문서의 제목을 나타내는 태그

 

 

웹 브라우저에  내용을 표시하는 <body>태그

- 앞선 내용들(!DOCTYPE, html, head)은 문서유형 및 정보를 정의하고 입력한 것.
- <body>태그는 실제 웹 브라우저에 표시할 내용을 입력한다.
- 앞으로 후술할 HTML태그는 대부분 <body> 안에서 사용된다.
 
<!DOCTYPE html>
<html lang="ko">
	<head>
    	<meta charset="UTF-8">
        <title>HTML 기본문서</title>
    </head>
    <body>
    	<h1>frontend web개발</h1>
        <hr>
        <p>HTML</p>
        <p>CSS</p>
        <p>JS</p>
    </body>
</html>


<p>: 텍스트 단락(paragraph)
<a>: anchor

 

 

 

웹 문서 구조를 만드는 Semantic 태그

...생략...

<div id="container">
	<header>
    	<div id="logo">
        	<a href="#"><h1>Dream Jeju</h1></a>
        </div>
        <nav>
        	<ul id="topMenu">
            	<li><a href="#">단체여행</a></li>
                <li><a href="#">맞춤 여행</a></li>
                <li><a href="#">갤러리</a></li>
                <li><a href="#">문의하기</a></li>
            </ul>
        </nav>
    </header>
    
    <main class="contents">
    	<section id="healing">
        	<h2>몸과 마음이 치유되는 섬</h2>
            ...
        </section>
        <section id="activity">
        	<h2>다양한 액티비티가 기다리는 섬</h2>
            ...
        </section>
    </main>
    
    <footer>
    	<section id="bottomMenu">
            <ul>
            	<li><a href="#">회사 소개</a></li>
                <li><a href="#">개인정보처리방침</a></li>
                <li><a href="#">여행약관</a></li>
                <li><a href="#">사이트맵</a></li>
            </ul>
        </section>
    </footer>
    
</div>

...생략...

 

header 영역을 나타내는 <header>태그

- 헤더영역을 의미하며 검색창이나 사이트 메뉴를 보통 삽입한다.

 

내비게이션 영역을 나타내는 <nav>태그

- 웹 문서안에서 다른 위치로 연결, 다른 웹문서로 연결하는 링크를 생성한다.
- 여러 nav 사용시, id속성 지정으로 다른 스타일을 적용할 수 있다.

 

핵심 컨텐츠를 담는 <main>태그

- 웹문서에서 핵심이 되는 내용을 넣는다.
- 보통 웹문서마다 다르게 보여줘야하는 내용들로 구성된다.
- <main>태그는 웹문서에서 단 한번만! 사용가능하다.
ex) 메뉴, 사이드바, 로고 등

 

독립적인 컨텐츠를 담는 <article>태그

- 웹에서 실제로 보여주고 싶은 내용을 넣는다.
ex) 블로그의 포스트, 기사 등 독립된 웹 컨텐츠 항목

 

컨텐츠 영역을 나타내는 <section>태그

- 웹 문서에서 컨텐츠 영역을 나타내서 article과 비슷해 보인다.
- section: 몇개의 컨텐츠를 묶는 용도로 사용
article: 블로그의 포스트처럼 "독립된 컨텐츠"로 사용
저작자표시

'ETC(front,back) > React(HTML, CSS, JS)' 카테고리의 다른 글

<frontend> {05} </텍스트 표현 스타일>  (0) 2023.07.04
<frontend> {04} </기본 CSS>  (0) 2023.07.04
<frontend> {03} </입력양식과 input형태>  (0) 2023.07.02
<frontend> {02} </웹 문서에 다양한 내용(제목, 표, 링크 등) 입력>  (0) 2023.07.02
<frontend> {00} </preview>  (0) 2023.06.30

+ Recent posts

티스토리툴바