HTML Day-3
35409 ワード
ハイパーリンク
<a>ラベル
aラベルはアンカー(アンカー)の略から来ており、アンカーポイントのように使用できます.
リンクで他のページに移動したり、ドキュメント内で移動したりできます.
リンクは、タグのプロパティhref(ハイパーテキスト参照)にアドレスまたはパスを追加することで作成できます.
リファレンス
最近では、1ページアプリケーション(SPA)技術でWebアプリケーションやウェブサイトを作る割合が高くなった.このテクノロジーの利点は、サイトをリフレッシュすることなくページをすばやく切り替えることです.
<a>タグ属性
hrefプロパティ
hrefプロパティを使用すると、開発者が必要なアドレスまたはパスを参照できます.
ハイパーテキストリファレンスの略語を使用しました.
hrefプロパティの使用方法
cssを外部スタイルシートにインポートする場合はlinkラベルを使用する場合もhrefを使用しますが、後でcssを学習する場合はhrefを使用します.<a href = "https://velog.io/@km2535/HTML-Day-1">
//경로를 활용하여 개발자가 만든 html을 연결할 수 있다.
<a href = "../../index.html">
titleプロパティ
マウスよりもタッチに慣れている私たちにとって、これはほとんど不要な属性ですが、pcで確認できます.
ハイパーテキストReferenceを作成し、カーソルを上に置くと、開発者が書いた文章を注釈のように表示できます.通常、Referenceのタイトルを入れて、ユーザーがリンクを特定できるようにします.
titleプロパティの使用
<a href = "https://velog.io/@km2535/HTML-Day-1" title = "나의 블로그">
作成中にリンク自体を説明すると、必要性が低下します.//더욱 직관적인 형태
<a href = "https://velog.io/@km2535/HTML-Day-1">나의 블로그</a>
targetプロパティ
このプロパティを使用して、接続されている参照サイトが新しいウィンドウで開くか、現在のウィンドウで開くかを選択します.
TCP学校で確認
blankは新しいウィンドウで開くことができます.
blankは一度だけ新しいラベルを開くことができます.
targetプロパティの使用
<a href="https://velog.io/@km2535/HTML-Day-1" target="_blank">
table
<table>ラベルの使い方
各種データを表示して表示します.
行と列で構成されます.
(行と列が混同されているとき...やれやれ!一列に立つ!>>横に...ははは)<table>
<tr> <!-- 테이블의 각 층 -->
<td>내용1</td>(또는 th)
<td>내용2</td>
...
</tr>
...
</table>
<table>タグ属性
表のプロパティ
border:表の枠線の厚さを設定します(デフォルトは0)
Width:表の幅を設定する
align:表の位置合わせを設定します(左、右、中)
tr、th、tdプロパティ
Width:セルの幅を設定する(td:同じ列をすべて適用する)
height:セルの高さを設定する(td:同じ行をすべて適用する)
align:セル内のテキストの配置(左、右、中心)を設定します.
colspanプロパティ
横並び列
rowspanプロパティ
行を垂直に結合
caption
表に見出しを追加
既定の位置は、テーブルの上部を中心にします.<caption>제목</caption>
:画面に水平線を作成します.
ページの作成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="styleSheet" href="./blog.css">
<title>반푼이의 블로그</title>
</head>
<body>
<h1 class="Htitle">반푼이의 블로그</h1>
<div class="Hdiv">
<p class="Hp">
<a href="https://velog.io/@km2535/series/HTML" target="_blank"><img class="htmlImg" src="./image/HTML.png"></a>
<a href="./resume.html" target="_blank"><img class="cssImg" src="./image/CSS.png" ></a>
<a href="https://velog.io/@km2535/series/%ED%98%BC%EA%B3%B5%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8" target="_blank"><img class="javascriptImg" src="./image/JavaScript.png" ></a>
</p>
<p class="Bp">
<a href="./subpage/subpage.html" target="_blank"><img class="thinkImg" src="./image/think.png" ></a>
</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>준비 중</title>
</head>
<body>
<h1>준비 중입니다.</h1>
</body>
</html>l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="styleSheet" href="../sub.css">
<title>나의 이력</title>
</head>
<body>
<h1 style="text-align: center;">내가 걸어온 길</h1>
<table border="1" width="80%" height ="200" align="center">
<caption style="font-size: 2em;" ><b>이력표</b></caption>
<tr>
<th width="20%">연도</th>
<th width="30%">학력</th>
<th width="30%">경력</th>
<th>비고</th>
</tr>
<tr align="center">
<td>2015년</td>
<td rowspan="3" width="20%">육군3사관학교</td>
<td>소위 임관</td>
<td>-</td>
</tr>
<tr align="center">
<td>2017년</td>
<td>백령도 근무, 대위 진급</td>
<td>-</td>
</tr>
<tr align="center">
<td>2021년</td>
<td><mark>프로그래밍 언어 입문</mark></td>
<td>-</td>
</tr>
</table>
</body>
</html>
Reference
この問題について(HTML Day-3), 我々は、より多くの情報をここで見つけました
https://velog.io/@km2535/HTML-Day-3
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<a href = "https://velog.io/@km2535/HTML-Day-1">
//경로를 활용하여 개발자가 만든 html을 연결할 수 있다.
<a href = "../../index.html"><a href = "https://velog.io/@km2535/HTML-Day-1" title = "나의 블로그">//더욱 직관적인 형태
<a href = "https://velog.io/@km2535/HTML-Day-1">나의 블로그</a><a href="https://velog.io/@km2535/HTML-Day-1" target="_blank"><table>ラベルの使い方
各種データを表示して表示します.
行と列で構成されます.
(行と列が混同されているとき...やれやれ!一列に立つ!>>横に...ははは)
<table>
<tr> <!-- 테이블의 각 층 -->
<td>내용1</td>(또는 th)
<td>내용2</td>
...
</tr>
...
</table><table>タグ属性
表のプロパティ
border:表の枠線の厚さを設定します(デフォルトは0)
Width:表の幅を設定する
align:表の位置合わせを設定します(左、右、中)
tr、th、tdプロパティ
Width:セルの幅を設定する(td:同じ列をすべて適用する)
height:セルの高さを設定する(td:同じ行をすべて適用する)
align:セル内のテキストの配置(左、右、中心)を設定します.
colspanプロパティ
横並び列
rowspanプロパティ
行を垂直に結合
caption
表に見出しを追加
既定の位置は、テーブルの上部を中心にします.
<caption>제목</caption>:画面に水平線を作成します.
ページの作成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="styleSheet" href="./blog.css">
<title>반푼이의 블로그</title>
</head>
<body>
<h1 class="Htitle">반푼이의 블로그</h1>
<div class="Hdiv">
<p class="Hp">
<a href="https://velog.io/@km2535/series/HTML" target="_blank"><img class="htmlImg" src="./image/HTML.png"></a>
<a href="./resume.html" target="_blank"><img class="cssImg" src="./image/CSS.png" ></a>
<a href="https://velog.io/@km2535/series/%ED%98%BC%EA%B3%B5%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8" target="_blank"><img class="javascriptImg" src="./image/JavaScript.png" ></a>
</p>
<p class="Bp">
<a href="./subpage/subpage.html" target="_blank"><img class="thinkImg" src="./image/think.png" ></a>
</p>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>준비 중</title>
</head>
<body>
<h1>준비 중입니다.</h1>
</body>
</html>l<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="styleSheet" href="../sub.css">
<title>나의 이력</title>
</head>
<body>
<h1 style="text-align: center;">내가 걸어온 길</h1>
<table border="1" width="80%" height ="200" align="center">
<caption style="font-size: 2em;" ><b>이력표</b></caption>
<tr>
<th width="20%">연도</th>
<th width="30%">학력</th>
<th width="30%">경력</th>
<th>비고</th>
</tr>
<tr align="center">
<td>2015년</td>
<td rowspan="3" width="20%">육군3사관학교</td>
<td>소위 임관</td>
<td>-</td>
</tr>
<tr align="center">
<td>2017년</td>
<td>백령도 근무, 대위 진급</td>
<td>-</td>
</tr>
<tr align="center">
<td>2021년</td>
<td><mark>프로그래밍 언어 입문</mark></td>
<td>-</td>
</tr>
</table>
</body>
</html>Reference
この問題について(HTML Day-3), 我々は、より多くの情報をここで見つけました https://velog.io/@km2535/HTML-Day-3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol