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>
poj 2991 Crane(ベクトル回転+セグメントツリーセグメント更新)
TIL 🍩