이번 포스트에서는 HTML 태그 중에서 웹 디자인에서 자주 쓰이는 태그에 대해 알아보겠습니다.
제목과 문단 태그
HTML에서 제목과 문단은 중요한 역할을 합니다. 제목 태그는 페이지의 구조를 파악하기 쉽게 해주며, 문단 태그는 페이지의 내용을 구조적으로 나누어 줍니다.
제목 태그
HTML에서 제목 태그는 <h1>에서 <h6>까지 총 여섯 개의 태그가 있습니다. 각 태그는 제목의 크기를 나타내며, 숫자가 작을수록 큰 제목입니다. 대부분의 웹 페이지에서는 <h1>과 <h2>를 가장 많이 사용합니다.
<!DOCTYPE html>
<html>
<head>
<title>제목 태그 예제</title>
</head>
<body>
<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
<h2>제목과 문단 태그</h2>
<p>HTML에서 제목과 문단은 중요한 역할을 합니다. 제목 태그는 페이지의 구조를 파악하기 쉽게 해주며, 문단 태그는 페이지의 내용을 구조적으로 나누어 줍니다.</p>
</body>
</html>문단 태그
HTML에서 문단을 구분하기 위해 <p> 태그를 사용합니다. 이 태그는 긴 텍스트를 구분하기 위해 사용됩니다. 대부분의 웹 페이지에서는 제목과 함께 <p> 태그를 사용하여 내용을 구성합니다.
<!DOCTYPE html>
<html>
<head>
<title>문단 태그 예제</title>
</head>
<body>
<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
<h2>제목과 문단 태그</h2>
<p>HTML에서 제목과 문단은 중요한 역할을 합니다. 제목 태그는 페이지의 구조를 파악하기 쉽게 해주며, 문단 태그는 페이지의 내용을 구조적으로 나누어 줍니다.</p>
<p>이번 포스트에서는 HTML 태그 중에서 웹 디자인에서 자주 쓰이는 태그에 대해 알아보겠습니다.</p>
</body>
</html>링크 태그
링크 태그는 다른 웹 페이지나 같은 웹 페이지 내의 다른 위치로 이동할 수 있는 링크를 생성하는 데 사용됩니다. HTML에서 링크를 생성하기 위해 <a> 태그를 사용합니다. 이 태그는 href 속성을 사용하여 링크 대상을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<title>링크 태그 예제</title>
</head>
<body>
<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
<h2>링크 태그</h2>
<p>다른 웹 페이지나 같은 웹 페이지 내의 다른 위치로 이동할 수 있는 링크를 생성하기 위해 <code><a></code> 태그를 사용합니다. 이 태그는 <code>href</code> 속성을 사용하여 링크 대상을 지정합니다.</p>
<p>예를 들어, 다음과 같은 코드를 사용하여 구글 검색 페이지로 이동하는 링크를 만들 수 있습니다.</p>
<a href="https://www.google.com/">구글 검색 페이지로 이동</a>
</body>
</html>표 태그
HTML에서 표를 만들기 위해서는 <table> 태그를 사용합니다. <table> 태그는 표의 전체적인 구조를 정의하며, <tr> 태그는 각각의 행을 정의하고, <td> 태그는 각각의 셀을 정의합니다.
<table>
<tr>
<td>이름</td>
<td>나이</td>
<td>성별</td>
</tr>
<tr>
<td>홍길동</td>
<td>25</td>
<td>남자</td>
</tr>
<tr>
<td>아무개</td>
<td>22</td>
<td>여자</td>
</tr>
</table>
폼 태그
폼 태그는 웹 페이지에서 사용자 입력을 받을 때 사용됩니다. HTML에서 폼을 생성하기 위해 <form> 태그를 사용합니다. 이 태그는 action 속성과 함께 사용되어 사용자 입력 데이터를 처리하는 서버 쪽 스크립트를 지정합니다.
<!DOCTYPE html>
<html>
<head>
<title>폼 태그 예제</title>
</head>
<body>
<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
<h2>폼 태그</h2>
<p>웹 페이지에서 사용자 입력을 받기 위해 <code><form></code> 태그를 사용합니다. 이 태그는 <code>action</code> 속성과 함께 사용되어 사용자 입력 데이터를 처리하는 서버 쪽 스크립트를 지정합니다.</p>
<p>예를 들어, 다음과 같은 코드를 사용하여 이름과 이메일 주소를 입력받는 폼을 생성할 수 있습니다.</p>
<form action="/submit" method="post">
<label for="name">이름:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">이메일 주소:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="제출">
</form>
</body>
</html>비디오 태그
비디오 태그는 웹 페이지에서 동영상을 표시하는 데 사용됩니다. HTML에서 비디오를 표시하기 위해 <video> 태그를 사용합니다. 이 태그는 src 속성을 사용하여 비디오 파일의 경로를 지정하며, controls 속성을 사용하여 비디오 컨트롤러를 표시할지 여부를 지정합니다.
<!DOCTYPE html>
<html>
<head>
<title>비디오 태그 예제</title>
</head>
<body>
<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
<h2>비디오 태그</h2>
<p>웹 페이지에서 동영상을 표시하기 위해 <code><video></code> 태그를 사용합니다. 이 태그는 <code>src</code> 속성을 사용하여 비디오 파일의 경로를 지정하며, <code>controls</code> 속성을 사용하여 비디오 컨트롤러를 표시할지 여부를 지정합니다.</p>
<p>예를 들어, 다음과 같은 코드를 사용하여 비디오를 표시할 수 있습니다.</p>
<video src="example.mp4" controls></video>
</body>
</html>오디오 태그
오디오 태그는 웹 페이지에서 오디오를 표시하는 데 사용됩니다. HTML에서 오디오를 위한 <audio> 태그를 사용합니다. 이 태그는 src 속성을 사용하여 오디오 파일의 경로를 지정하며, controls 속성을 사용하여 오디오 컨트롤러를 표시할지 여부를 지정합니다.
<!DOCTYPE html>
<html>
<head>
<title>오디오 태그 예제</title>
</head>
<body>
<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
<h2>오디오 태그</h2>
<p>웹 페이지에서 오디오를 표시하기 위해 <code><audio></code> 태그를 사용합니다. 이 태그는 <code>src</code> 속성을 사용하여 오디오 파일의 경로를 지정하며, <code>controls</code> 속성을 사용하여 오디오 컨트롤러를 표시할지 여부를 지정합니다.</p>
<p>예를 들어, 다음과 같은 코드를 사용하여 오디오를 표시할 수 있습니다.</p>
<audio src="example.mp3" controls></audio>
</body>
</html>캔버스 태그
캔버스 태그는 웹 페이지에서 그래픽을 그리는 데 사용됩니다. HTML에서 캔버스를 생성하기 위해 <canvas> 태그를 사용합니다. 이 태그는 width와 height 속성을 사용하여 캔버스의 크기를 지정합니다. 그리고 JavaScript를 사용하여 캔버스에 그래픽을 그릴 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>캔버스 태그 예제</title>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
};
</script>
</head>
<body>
<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
<h2>캔버스 태그</h2>
<p>웹 페이지에서 그래픽을 그리기 위해 <code><canvas></code> 태그를 사용합니다. 이 태그는 <code>width</code>와 <code>height</code> 속성을 사용하여 캔버스의 크기를 지정합니다. 그리고 JavaScript를 사용하여 캔버스에 그래픽을 그릴 수 있습니다.</p>
<p>예를 들어, 다음과 같은 코드를 사용하여 캔버스에 사각형을 그릴 수 있습니다.</p>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>참고 자료
- MDN Web Docs : HTML에 대한 자세한 문서와 예제들을 제공하는 사이트입니다.
- w3schools : HTML과 관련된 다양한 웹 기술에 대한 튜토리얼과 예제를 제공하는 사이트입니다.
- HTML Dog : HTML의 기본 문법과 기능을 설명하는 튜토리얼 사이트입니다.
'[R&D] 프로그래밍 > Web (HTML, CSS)' 카테고리의 다른 글
| [HTML/CSS] Form 요소들과 디자인 방법 (0) | 2023.02.28 |
|---|---|
| [HTML/CSS] CSS Grid를 사용한 웹페이지 레이아웃 설계 (0) | 2023.02.27 |
| [HTML/CSS] CSS Flexbox를 활용한 웹페이지 레이아웃 설계 (0) | 2023.02.26 |
| [HTML/CSS] CSS 선택자의 종류와 활용 방법 (0) | 2023.02.26 |
| [HTML/CSS] 웹 페이지에서 이미지와 비디오 사용하기 (0) | 2023.02.24 |
| [HTML/CSS] HTML과 CSS로 반응형 웹 페이지 만들기 (2) | 2023.02.23 |
| [HTML/CSS] HTML5와 CSS3에서 추가된 기능 (0) | 2023.02.22 |
| [HTML/CSS] HTML과 CSS 기초 문법과 구조 (1) | 2023.02.21 |
댓글