HTML, CSS, JavaScript - 3. HTML 시작하기. (HTML)

하쮸·2024년 9월 5일

HTML(Hypertext Markup Language)

HTML_CSS_JavaScript

목록 보기

3/7

1. HTML 시작하기.

웹 개발은 항상 HTML 부터 시작함.

1-1. HTML이란?

다양한 인터넷 정보를 웹 브라우저에 보여 줄 때 사용하는 언어가 HTML.
HTML을 간단히 줄여서 웹 문서를 만드는 언어.
HTML은 HyperText Markup Language의 줄임말.
- 하이퍼텍스트(HyperText)란 문서를 서로 연결해 주는 링크를 의미.
  - HTML에는 서로 연결한다는 의미가 포함되어 있음.
- 마크업(Markup)이란 '표시한다'는 뜻.
  - 웹 브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 의미.
웹 문서는 내용을 작성하는 프로그램과 그 내용을 확인하는 프로그램이 다름.
웹 브라우저가 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있도록 꼬리표를 붙여야 함.
- 꼬리표를 태그(Tag)라 함.
HTML의 기본 기능은 웹 브라우저에 보여 줄 내용에 마크업하고 문서끼리 링크하는 것.

1-2. HTML 구조 파악

HTML 문서는 일반 문서와 달리 정해진 형식에 맞추어 내용을 입력해야 함.
웹 문서는 보통 <!DOCTYPE html>로 시작해 <html>, <head>, <body>라는 3개의 영역으로 구성되어 있음.

<!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>

<!DOCTYPE html> : 현재 문서가 HTML5 언어로 작성한 웹 문서라는 뜻.
<html> ~ </html> : 웹 문서의 시작과 끝을 나타내는 태그.
- <html> 태그를 만나면 </html>까지 소스를 읽어 화면에 표시함
<head> ~ </head> : 웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 부분.
<body> ~ </body> : 실제로 웹 브라우저 화면에 나타나는 내용.

1-3. `<!DOCTYPE html>` 태그

웹 문서의 유형을 지정하는 선언문 태그
웹 문서의 첫 부분은 문서 유형(document type)을 지정하는 <!DOCTYPE html> 태그로 시작.
- 웹 브라우저에 현재 문서가 HTML5 문서라고 알려주는 것.

1-4. `<html>` 태그

웹 문서의 시작을 알리는 태그.
HTML 파일의 시작과 끝을 표시함.
- <html> : 태그는 웹 문서가 시작된다는 뜻.
- </html> : 태그는 웹 문서가 끝났다는 뜻.
  - </html> 태그 뒤에는 아무 내용도 없어야 함.
<html lang = "ko">의 의미
- <html> 태그에서는 lang 속성으로 문서에서 사용할 언어를 지정할 수 있음.
- 검색 사이트에서 특정 언어로 제한해 검색할 때 필요하기 때문.
- 화면 낭독기에서 웹 문서를 소리 내어 읽어 줄 때 해당 언어에 맞추어 발음이나 억양, 목소리 등을 다르게 할 수 있음.

1-4. `<head>` 태그

웹 브라우저에 문서 정보를 알려주는 태그.
<head> 영역의 내용은 대부분 웹 브라우저 화면에 보이지 않음.
- Why? 웹 브라우저가 알아야할 정보를 입력하는 곳이기 때문.
문서에서 사용할 스타일 시트 파일도 이곳에서 연결.

1-5. `<meta>` 태그

문자 세트를 비롯해 문서 정보가 들어있는 태그.
흔히 메타 정보라고 하면 '데이터에 관한 데이터'라고 함.
<meta> 태그는 웹 브라우저에는 보이지 않지만 웹 문서와 관련된 정보를 지정할 때 사용.
가장 중요한 역할은 화면에 글자를 표시할 때 어떤 인코딩을 사용할지 지정하는 것.

<meta charset="UTF-8">

<meta> 태그를 사용해서 웹 사이트의 키워드나 간단한 설명, 제작자 등의 정보를 지정할 수 있음.
- 이런 정보는 검색 엔진에서 사이트를 검색할 때 참고 함.

1-6. `<title>` 태그

<head> 태그 안에서 가장 중요한 태그.
<title>과 </title> 사이에 웹 문서의 제목을 입력함.

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

<title> 태그에서 지정하는 내용은 거의 모든 웹 브라우저의 제목 표시줄에 표시 됨.

1-7. `<body>` 태그

웹 브라우저에 내용을 표시하는 태그.
<body> ~ </body> 사이에 실제 웹 브라우저에 표시할 내용을 입력함.

2. HTML 파일 만들기

2-1. 새로운 HTML 파일 만들기

1. 폴더 선택
1. 새 파일 만들기
1. 새 파일 이름 입력
  (.html 확장자를 붙여야 VS code에서 웹 문서를 작성할 때 편리한 기능을 사용할 수 있음)
1. 새 파일 확인

2-2. HTML 파일 완성하기.

문서 유형 지정
- 웹 문서 첫 번째 줄에는 반드시 <!DOCTYPE html> 태그처럼 문서 유형을 지정하는 소스를 넣어야 함.
<html> 태그 입력
- 웹 문서의 시작과 끝은 각각 <html>과 </html> 태그로 표시해야 함.
사용하는 언어 지정.
<html>, <meta>, <title> 태그.
- HTML 문서의 기본 구조는 크게 <head> 태그와 <body>태그로 나뉨.
- <head>와 </head> 태그 사이에는 문자 세트와 문서 제목을 입력해야 함.
  - <meta> 태그에는 문자 세트 지정, <title> 태그에는 웹 문서의 제목을 입력.
<body>태그와 <h1> 태그 입력.
- <body> 태그는 </head> 태그 다음줄에 입력.
- <h1> 태그는 텍스트 제목을 나타냄.
<h1> 태그의 내용 입력하고 저장.

2-3. HTML 기본 구조 자동으로 만들기.

첫 번째 줄에 ! 입력한 후 Tab or Enter

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<meta> 태그는 반응형 웹을 만들 때 사용.

2-4. 웹 문서 구조를 만드는 시맨틱 태그.

HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 시맨틱(semantic)태그 라고 함.
- 텍스트 단락(paragraph)을 줄인 <p> 태그, 앵커(anchor)를 줄인 <a> 태그 등.
시맨틱 태그가 필요한 이유.
1. 시맨틱 태그를 사용하면 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있기 때문.
2. 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트기기의 다양한 화면에서 웹 문서를 표현하기가 쉽기 때문.
3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있음.

2-4-1. `<header>` 태그

헤더 영역을 나타냄.
<header> 태그는 말 그대로 헤더 영역을 의미.

2-4-2. `<nav>` 태그

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

<header>
  <div id="logo">
    <a href="index-footer.html">
      <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>

2-4-3. `<main>` 태그

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

2-4-4. `<article>` 태그

<article> 태그는 아티클(article)의 사전적 의미인 신문, 잡지의 기사처럼 웹에서 실제로 보여 주고 싶은 내용을 넣음.
- Ex) 블로그의 포스트처럼 독립된 웹 콘텐츠 항목,
문서 안에는 <article> 태그를 여러 개 사용할 수 있고 이 안에 <section> 태그를 넣을 수도 있음.

2-4-5. `<section>` 태그

웹 문서에서 콘텐츠 영역을 나타냄.
<section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용, <article> 태그는 독립된 콘텐츠로 씀.
단순히 스타일을 적용하려고 콘텐츠를 묶으려면 <section> 태그 대신 <div> 태그를 사용.

<main class="contents">
      <section id="headling">
        <h2>몸과 마음이 치유되는 섬</h2>                  
        <div class="detail"> 
          <img src="images/healing.jpg">                            
			(생략) 
        </div>
      </section>
      <section id="activity">
        <h2>다양한 액티비티가 기다리는 섬</h2>
        <div class="detail">          
          <img src="images/activity.jpg">
			(생략)
      </section>
    </main>

2개의 <section>태그 영역으로 나눔.
- <main>영역 안에 2개의 <section>영역.

2-4-6. `<aside>` 태그.

본문 내용외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 만듦.

2-4-7. `<footer>` 태그.

<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>

2-4-8. `<div>` 태그

여러 소스를 묶는 태그.
<div> 태그는 <div id="header">나 <div class="detail">처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용.
- 영역을 구별하거나 스타일로 문서를 꾸미는 것.

<div id="logo">
  <a href="index-footer.html">
    <h1>Dream Jeju</h1>
  </a>
</div>

하쮸

Every cloud has a silver lining.

이전 포스트

HTML, CSS, JavaScript - 2. 웹 개발 환경

다음 포스트

HTML, CSS, JavaScript - 3. HTML 시작하기. (HTML)

HTML_CSS_JavaScript

1. HTML 시작하기.

1-1. HTML이란?

1-2. HTML 구조 파악

1-3. `<!DOCTYPE html>` 태그

1-4. `<html>` 태그

1-4. `<head>` 태그

1-5. `<meta>` 태그

1-6. `<title>` 태그

1-7. `<body>` 태그

2. HTML 파일 만들기

2-1. 새로운 HTML 파일 만들기

2-2. HTML 파일 완성하기.

2-3. HTML 기본 구조 자동으로 만들기.

2-4. 웹 문서 구조를 만드는 시맨틱 태그.

2-4-1. `<header>` 태그

2-4-2. `<nav>` 태그

2-4-3. `<main>` 태그

2-4-4. `<article>` 태그

2-4-5. `<section>` 태그

2-4-6. `<aside>` 태그.

2-4-7. `<footer>` 태그.

2-4-8. `<div>` 태그

HTML, CSS, JavaScript - 2. 웹 개발 환경

HTML, CSS, JavaScript - 4. 웹 문서에 다양한 내용 입력하기. (HTML)

0개의 댓글

HTML, CSS, JavaScript - 3. HTML 시작하기. (HTML)

HTML_CSS_JavaScript

1. HTML 시작하기.

1-1. HTML이란?

1-2. HTML 구조 파악

1-3. <!DOCTYPE html> 태그

1-4. <html> 태그

1-4. <head> 태그

1-5. <meta> 태그

1-6. <title> 태그

1-7. <body> 태그

2. HTML 파일 만들기

2-1. 새로운 HTML 파일 만들기

2-2. HTML 파일 완성하기.

2-3. HTML 기본 구조 자동으로 만들기.

2-4. 웹 문서 구조를 만드는 시맨틱 태그.

2-4-1. <header> 태그

2-4-2. <nav> 태그

2-4-3. <main> 태그

2-4-4. <article> 태그

2-4-5. <section> 태그

2-4-6. <aside> 태그.

2-4-7. <footer> 태그.

2-4-8. <div> 태그

HTML, CSS, JavaScript - 2. 웹 개발 환경

HTML, CSS, JavaScript - 4. 웹 문서에 다양한 내용 입력하기. (HTML)

0개의 댓글

1-3. `<!DOCTYPE html>` 태그

1-4. `<html>` 태그

1-4. `<head>` 태그

1-5. `<meta>` 태그

1-6. `<title>` 태그

1-7. `<body>` 태그

2-4-1. `<header>` 태그

2-4-2. `<nav>` 태그

2-4-3. `<main>` 태그

2-4-4. `<article>` 태그

2-4-5. `<section>` 태그

2-4-6. `<aside>` 태그.

2-4-7. `<footer>` 태그.

2-4-8. `<div>` 태그