[HTML/CSS] 자주 쓰이는

by

이번 포스팅에서는 웹디자인에서 흔히 사용되는 HTML 태그에 대해 알아보도록 하겠습니다.

제목 및 단락 태그

제목과 단락은 HTML에서 중요한 역할을 합니다.

제목 태그는 페이지의 구조를 이해하기 쉽게 만들고, 단락 태그는 페이지의 내용을 구조적으로 나눕니다.

제목 태그

HTML에는 6개의 제목 태그가 있습니다.

'추천 관련글,

~까지

. 각 태그는 제목의 크기를 나타내며 숫자가 작을수록 제목이 커집니다.

대부분의 웹사이트가 사용하는

그리고

가장 자주.

<!
DOCTYPE html>
<html>
<head>
	<title>제목 태그 예제</title>
</head>
<body>
	<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
	<h2>제목과 문단 태그</h2>
	<p>HTML에서 제목과 문단은 중요한 역할을 합니다.

 제목 태그는 페이지의 구조를 파악하기 쉽게 해주며, 문단 태그는 페이지의 내용을 구조적으로 나누어 줍니다.

</p>
</body>
</html>

단락 태그

-태그는 HTML에서 단락을 구분하는 데 사용됩니다.

이 태그는 긴 텍스트를 구분하는 데 사용됩니다.

대부분의 웹사이트가 사용하는

– 콘텐츠를 구성하기 위해 제목과 함께 태그를 지정합니다.

<!
DOCTYPE html>
<html>
<head>
	<title>문단 태그 예제</title>
</head>
<body>
	<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
	<h2>제목과 문단 태그</h2>
	<p>HTML에서 제목과 문단은 중요한 역할을 합니다.

 제목 태그는 페이지의 구조를 파악하기 쉽게 해주며, 문단 태그는 페이지의 내용을 구조적으로 나누어 줍니다.

</p>
	<p>이번 포스트에서는 HTML 태그 중에서 웹 디자인에서 자주 쓰이는 태그에 대해 알아보겠습니다.

</p>
</body>
</html>

링크 태그

링크 태그는 다른 웹사이트 또는 동일한 웹사이트 내의 다른 장소로 이동하는 링크를 만드는 데 사용됩니다.

HTML로 링크를 생성하기 위해 우리는 이것을 사용합니다 -낮. 이 태그는 href 속성을 사용하여 링크 대상을 나타냅니다.

<!
DOCTYPE html>
<html>
<head>
	<title>링크 태그 예제</title>
</head>
<body>
	<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
	<h2>링크 태그</h2>
	<p>다른 웹 페이지나 같은 웹 페이지 내의 다른 위치로 이동할 수 있는 링크를 생성하기 위해 <code>&lt;a&gt;</code> 태그를 사용합니다.

 이 태그는 <code>href</code> 속성을 사용하여 링크 대상을 지정합니다.

</p>
	<p>예를 들어, 다음과 같은 코드를 사용하여 구글 검색 페이지로 이동하는 링크를 만들 수 있습니다.

</p>
	<a href="https://www.google.com/">구글 검색 페이지로 이동</a>
</body>
</html>

테이블 태그

HTML로 테이블을 만드는 방법 키워드를 사용하십시오. 태그는 테이블의 전체 구조를 정의합니다.

태그는 각 줄을 정의하고

태그는 각 셀을 정의합니다.

<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에서 양식을 만드는 데 사용됩니다.

이 태그는 action 속성과 함께 사용되어 사용자 입력 데이터를 처리하는 서버측 스크립트를 지정합니다.

<!
DOCTYPE html>
<html>
<head>
	<title>폼 태그 예제</title>
</head>
<body>
	<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
	<h2>폼 태그</h2>
	<p>웹 페이지에서 사용자 입력을 받기 위해 <code>&lt;form&gt;</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로 표시하려면 다음을 사용합니다.

<!
DOCTYPE html>
<html>
<head>
	<title>비디오 태그 예제</title>
</head>
<body>
	<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
	<h2>비디오 태그</h2>
	<p>웹 페이지에서 동영상을 표시하기 위해 <code>&lt;video&gt;</code> 태그를 사용합니다.

 이 태그는 <code>src</code> 속성을 사용하여 비디오 파일의 경로를 지정하며, <code>controls</code> 속성을 사용하여 비디오 컨트롤러를 표시할지 여부를 지정합니다.

</p>
	<p>예를 들어, 다음과 같은 코드를 사용하여 비디오를 표시할 수 있습니다.

</p>
	<video src="http://geuninote.m/example.mp4" controls></video>
</body>
</html>

오디오 태그

오디오 태그는 웹 페이지에 오디오를 표시하는 데 사용됩니다.

소리를 HTML로 ~을 위한 

<!
DOCTYPE html>
<html>
<head>
	<title>오디오 태그 예제</title>
</head>
<body>
	<h1>웹 디자인에 자주 쓰이는 HTML 태그</h1>
	<h2>오디오 태그</h2>
	<p>웹 페이지에서 오디오를 표시하기 위해 <code>&lt;audio&gt;</code> 태그를 사용합니다.

 이 태그는 <code>src</code> 속성을 사용하여 오디오 파일의 경로를 지정하며, <code>controls</code> 속성을 사용하여 오디오 컨트롤러를 표시할지 여부를 지정합니다.

</p>
	<p>예를 들어, 다음과 같은 코드를 사용하여 오디오를 표시할 수 있습니다.

</p>
	<audio src="http://geuninote.m/example.mp3" controls></audio>
</body>
</html>

캔버스 태그

캔버스 태그는 웹 페이지에 그래픽을 그리는 데 사용됩니다.

HTML로 캔버스를 만들려면 다음을 사용합니다.

-낮. 이 태그는 너비 및 높이 속성을 사용하여 캔버스의 크기를 지정합니다.

그리고 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>&lt;canvas&gt;</code> 태그를 사용합니다.

 이 태그는 <code>width</code>와 <code>height</code> 속성을 사용하여 캔버스의 크기를 지정합니다.

 그리고 JavaScript를 사용하여 캔버스에 그래픽을 그릴 수 있습니다.

</p>
	<p>예를 들어, 다음과 같은 코드를 사용하여 캔버스에 사각형을 그릴 수 있습니다.

</p>
	<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>

참고 자료

  • MDN 웹 문서 : 이 페이지는 자세한 문서와 HTML 예제를 제공합니다.

  • w3schools : HTML과 관련된 다양한 웹 기술에 대한 자습서 및 예제를 제공하는 웹 사이트입니다.

  • HTML 개 : HTML의 기본 구문과 기능을 설명하는 튜토리얼 사이트입니다.