Notice
Recent Posts
Recent Comments
Link
«   2025/03   »
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
Archives
Today
Total
관리 메뉴

성빈

HTML5 기본 문서 만들기 본문

HTML

HTML5 기본 문서 만들기

성빈나 2023. 10. 24. 01:23

웹 프로그래밍

WWW(World Wide Web)

 

웹프로그래밍

: 웹사이트 및 웹 애플리케이션 개발에 사용될 프로그래밍 언어

 

웹프로그래밍 언어 종류

Front-end

    - HTML : 웹페이지의 구조와 내용

    - CSS : 웹페이지의 모양

    - JavaScript : 웹페이지의 동적 변경 및 응용프로그램 작성

 

 

Back-end

    - Python : 범용 프로그래밍 언어

    - Java : 자바 플롯폼에서 독집적인 범용 프로그래밍 언어

    - Node JS : 자바스크립트로 서버를 제어하는 프로그래밍 언어

 

 


HTML5 개요

1. HTML 페이지 기본

HTML (Hyper Text Markup Language)

- 웹 문서를 작성하는 태그 언어

- HTML 태그로 만든 문서를 HTML문서라고 부른다.

- 이는 여러 페이지로 구성되는데 각 페이지를 웹 페이지 또는 HTML 페이지라고 부른다.

- 웹 브러우저는 한 번에 하나의 HTML 페이지를 화면에 출력한다. 

 

 

<!DOCTYPE html>

HTML5 문서임을 브라우저에 알리는 지시어로서 반드시 첫 줄에 나와야 한다.

HTML 태그가 아니므로 소문자 doctype으로 써도 된다.

 

<!--주석문-->

HTML 문서 내에 간단한 설명을 다는 주석문으로 브라우저에 의해 출력되지 않는다.

주석문은 페이지 내 아무 곳에나 만들 수 있다.

 

<head> </head> 헤드 부분 

문서의 제목, 본문을 설명하는 메타 태그들, 자바스크립트 코드와 CSS 스타일 시트 등을 포함하며

문서의 본문은 포함되지 않는다.

 

<body> </body> 바디 부분 

자바스크립트 코드를 포함할 수 있다.

헤드와 바디 사이에는 아무것도 들어갈 수 없다.

 

 

2. HTML 태그

HTML 태그의 구성

태그 이름과 여러 속성들로 구성되며, 하나의 속성은 속성 이름과 값으로 구성된다. 

● 시작 태그와 종료 태그가 모두 있는 경우

종료 태그가 생략되면 오류로 처리되어 정상적으로 화면에 출력되지 않는다. 

ex) <html> ... </html>, <title> 문서의 제목입니다 </title>, <body> ... </body>

 

● 시작 태그만 있는 경우

ex) <br>, <img>

 

HTML 태그의 특징

- 태그와 속성은 대소문자를 구분하지 않는다.

<HTML> ... <html> 
<img Src="apple.jpg" width="100" height="50" alt="빨간 사과">

- 속성 값에 불필요한 공백 문자가 들어가면 HTML5 표준에 어긋난다.

<img Src="apple.jpg" width=" 100" height="50" alt="빨간 사과">

 


HTML5 기본 문서 만들기

 

1. <title>   타이틀 달기

<title> ... </title>

 

2. <h1>, <h6>    문단 제목(장, 절, 소제목 등) 달기

<h1> ... </h1>

h는 제목을 뜻하는 heading의 줄임말

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> 제공

 

3. <p>   단락 나누기

<p> ... </p>

하나의 단락을 <p> 태그로 표현한다.

때문에 </p>로 끝나는 문단 다음에는 자동으로 빈 줄이 생긴다.

 

4. <hr>   수평선 긋기

문단 내에서 내용의 전환이 필요한 곳에 수평선을 삽입하여 시각적 효과를 만들 수 있다.

종료 태그는 없다.

 

5. <br>   새로운 줄로 넘어가기

HTML페이지에 <Enter> 키를 여러 개 입력해도 한 개의 빈칸으로 처리되어 다음 줄로 넘어가지 않는다.

새로운 줄로 넘기고자 하면 <br> 태그를 사용해야한다.

종료 태그는 없다.

 

6. 블록 태그와 인라인 태그

HTML 태그들은 블록 태그와 인라인 태그로 나뉜다.

 

● 블록(block) 태그 

   ▪ 항상 새 라인에서 시작하여 출력

   ▪ 양 옆에 다른 콘텐트를 배치하지 않고 한 라인 독점 사용

   ▪ 블록 태그 : <p>, <h1>, <div>, <ul>

<div> 태그
- 블록을 구성하기 위함
- <p> 태그는 문단을 만들기 위해 사용되지만, <div>는 특별한 의미 없이 여러 HTML 태그들을 블록으로 묶는 컨테이너로 이용된다.
- 예를 들어, <div> 블록 전체에 동일한 CSS 스타일을 적용하거나 자바스크립트로 블록을 하나의 단위처럼 다루고자 할 때 사용한다. 

 

● 인라인(inline) 태그

   ▪ 블록 속에 삽입되어 블록의 일부로 출력

   ▪ 인라인 태그 : <strong>, <a>, <img>, <span>

<span> 태그
- 텍스트 일부분에 특별한 모양을 주거나, 자바스크립트 코드로 텍스트 일부분을 제어하고자 할 때 사용한다. 

 

7. HTML 메타 데이터

■ 메타 데이터

- 데이터를 설명하는 데이터

 

▪ 사진 데이터의 메타데이터 : 사진 찍은 장소, 시간

▪ 오디오 데이터의 메타데이터 : 재생 시간, 채널 수

▪ 이미지 데이터의 메타데이터 : 이미지의 폭, 높이, 컬러 해상도

 

HTML 페이지에 대한 메타 데이터를 담기 위한 태그들 

 <base>, <link>, <script>, <style>, <title>, <meta>

 

▪ <base> 웹 페이지의 베이스 URL

▪ <meta> 메타 데이터

 


고급 문서 만들기

 

<img> 이미지 삽입

<img src="이미지 파일의 URL"
         alt="문자열"
         width="이미지 폭"
         height="이미지 높이">

- scr : 이미지 파일의 UR (필수 속성)

- alt : 이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열 (필수 속성)

- width : 이미지가 출력되는 너비로, 생략되면 원본 이미지의 폭. 픽셀 수

- height : 이미지가 출력되는 높이로, 생략되면 원본 이미지의 너비. 픽셀 수

 

<img> 태그 예제

 

<ol>, <ul>, <dl> 리스트 만들기

리스트 종류

● 순서 있는 리스트(ordered list) :  <ol> </ol>

<ol type="A">
     <li> 물을 끓인다. </li>
     <li> 라면과 스프를 넣는다. </li>
     <li> 파를 썰어 넣는다. </li>
     <li> 5분 후 먹는다. </li>
</ol>

● 순서 없는 리스트(unordered list) : <ul> </ul>

<ul>
     <li> 감자탕 // </li> 생략 가능
     <li> 스파게티
     <li> 올레국수
</ui>

●  정의 리스트(definition list)  : <dl> </dl>

<dl>
       <dt><strong>Internet Explorer</strong> // 용어
       <dd> 마이크로소프트에서 만든 브라우저로 현재 국내 시장에서 가장 많이 사용 // 설명
       <dt><strong>Firefox Mozilla</strong>
       <dd>재단에서 오픈 소스로 만든 것으로 W3C의 웹 표준을 선도
       <dt><strong>Chrome</strong>
       <dd>구글에서 만든 것으로 좋은 디버거를 갖추고 있어 디버깅에 많이 사용
</dl>

 

 

리스트 특징

- 리스트의 각 아이템은 <li> 태그를 사용하며, </li>는 생략 가능하다. 

- 아이템을 나타내는 마커(marker)

   ▪ type : 마커의 종류

                type="1" (디폴트)  →  1, 2, 3 ...

                type="A"                →  A, B, C ...

                type="a"                → a, b, c ...

                type="i"                 → i, ii, iii ...

 

   ▪ start : 마커의 시작 값 (단, 숫자에 대해서만 적용 가능)

               start="5"  → 5, 6, 7 ...

 

 

<table> 표 만들기

<table> ... </table>

▪ <table> : 표 전체를 담는 컨테이너

▪ <caption> : 표 제목

▪ <thead> : 헤딩 셀 그룹

▪ <tfoot> : 바닥 셀 그룹

▪ <tbody> : 데이터 셀 그룹

▪ <tr> : 행. 여러개의 <td>, <th> 포함

▪ <th> : 제목(헤딩) 셀

▪ <td> : 데이터 셀

 

 

비정형 표 만들기

  <td rowspan="3"> </td> : 열로 3칸 합치기

  <td colspan="2"> </td>  : 행으로 2칸 합치기

 


하이퍼링크

하이퍼링크(hyper link)

-  HTML 페이지에서 다른 HTML 페이지를 연결하는 고리

- 텍스트나 이미지에 다른 웹 페이지의 주소를 달아서 만든다.

- 하이퍼링크는 같은 사이트에 다른 HTML 페이지뿐 아니라, 다른 사이트에 있는 웹페이지를 연결하기도 한다.

 

<a> 하이퍼링크 만들기

<a href="URL" / "URL#앵커이름" / "#앵커이름"
     target="윈도우 이름"
     download>
텍스트 혹은 이미지
</a>

▪ href : 이동할 HTMl 페이지의 URL 혹은 HTML 페이지 내 앵커 이름

1. 같은 사이트의 HTML 페이지를 연결하는 경우 → HTML 파일의 경로명만 지정
<a href="picturepage.html"> 클릭하면 사진 페이지로 이동합니다. </a>
2. 다른 웹 사이트로 연결하는 경우 → "http://"로 시작하는 웹 사이트의 주소 지정
<a href="http://www.naver.com> 네이버 </a>

 ▪ target : 링크에 연결된 HTML 페이지가 출력될 윈도우 이름 지정

_blank, _self, _parent, _top, 윈도우 이름

▪ download : 링크가 클릭되면 href에 지정된 파일이 다운로드 됨

이미지, PDF, MP3, HTML 파일, HWP 파일, PPT 파일 등 모든 파일을 다운로드 할 수 있는 링크를 만든다. 
이 때 다운로드 할 파일명은 href 속성에 지정한다. 
<a href="Elvis.png" download> 엘비스 사진 다운로드 </a>

 

 

링크 텍스트의 색

링크 텍스트는 사용하는 과정에서 3가지 색으로 변경된다.

 

○ 처음 링크 (standard link) : 밑줄과 함께 blue색

○ 방문이 이루어진 링크 (visited link) : purple 색

○ 마우스로 링크를 누르고 있는 동안 (active link) : red 색

 

링크의 디폴트 색은 CSS3를 이용하여 변경할 수 있다. 

 

 

id 속성으로 앵커 만들기

긴 내용을 가진 웹 페이지를 읽을 때 사용자는 브라우저 스크린을 오르락내리락하면서 읽어야하는 어려움을 해소하고 문서를 쉽게 읽을 수 있도록, 문서 내 특정 위치로 이동하는 링크를 만들 수 있도록 하였다ㅏ. 문서의 특정 위치를 앵커(anchor)라고 한다. 목차를 만들기 위함으로 해석해본다. 

 

1. 앵커 만들기

태그의 id 속성에 앵커 이름을 지정한다.

<p id="chap1"> 1장 서론 </p>
...
<h3 id="chap2"> 2장 본론 </h3>

 

2. 앵커에 연결하는 링크 만들기

<a href="#앵커이름">의 형식으로 앵커에 연결하는 하이퍼링크를 만든다.

<a href="#chap1"> 서론으로 가기 </a>
<a href="#chap2"> 본론으로 가기 </a>

 

 

 


인라인 프레임

<iframe> 인라인 프레임 만들기

현재 HTML 페이지 내에 내장 윈도우를 만들고 다른 HTML 페이지를 출력할 수 있다.

<iframe> 태그에 의해 만들어지는 윈도우를 인라인 프레임이라고 부른다. 

<iframe src="iframe.html" width="200" height="150">
    브라우저는 iframe 태그를 지원하지 않습니다.   
    // iframe을 지원하지 않는 브라우저는 이 텍스트를 대신 출력한다.
</iframe>

 

 

 

 


미디어 삽입

<video> 비디오 삽입

<video src="bear.mp4" width="320" height="240" controls autoplay> </video>

 

<audio> 오디오 삽입

<audio src="mymusic.mp3" controls autoplay loop></audio>

 

 

 

'HTML' 카테고리의 다른 글

HTML5의 문서 구조와 시맨틱 태그  (0) 2023.10.24