[勉強の内容]

(ネットワークプログラミング第2講html後期内容)

1.設計図面の作成

ページの設計図面を作成する際には、一度にページ全体を作成する考え方よりも、ページを領域別にいくつかの部分に分割することが重要です.したがって,divを用いて類似した性格の内容を共有し統合することが重要である.
コンテンツを移動または変更するときにdivに分類すると、divでバンドルされたコンテンツを簡単に一度に移動できます.

①ココアフレンドリスト

友達リストの1行が左(画像)と右(名前と情報)に分かれていることがわかります.ただし、画像をクリックしても、友人との会話ページをクリックしても、上部にaラベルで包んで画像を位置決めし、divラベルを使用して名前と情報を組み合わせることができます.
また、友達リストにはレベルがなく、ul-liラベルでリストできます.
次のメニューではfooterを使用してメニューリストのnavを作成し、再びul-liタグを使用してメニューを作成します.
※TIP)画像空間の大きさは決まっていますが、画像の準備ができていない場合
https://via.placeholder.com/(画像サイズ)を使用して、スペースを占有することができる.
ex)

<img src="https://via.placeholder.com/100x50">

②NAVERホームページ-エコノミーM

NAVERのホームページの「経済M」部分にはいくつかの文章があり、等級がなく、ul-liラベルで文章を書いています.aタグにimgを挿入し、右テキスト部分をdivで区切ります.右の文章の最初の行の“経済M”の部分はspanで囲んで、次の行はタイトルでh 3を入力して、下の本文の部分はpラベルで記入します.
また、以下の「通貨ベース-4日前」の部分はそれぞれspanで囲まれています.

<span>-</span>

※この部分は一般的にspanではなく、別の方法で縛ります.(後で勉強)

③Bootstrap Agencyホームページ-上部

写真の中のエリアは一番上の部分に相当するので、タイトルで表します.
このうち一番上の部分はdivで囲まれ、左のページフラグは企業名で、h 1を入力して画像ファイルを挿入し、右のメニューはメニューラベルnavで囲まれてリストされています.
そして,中間の文部分divを囲み,「Welcom~」で始まる部分をh 2,「It's Nice~」で始まる部分をh 3とする.
「Tell Me More」はボタンの形をしていますが、クリックして他のページに移動する機能があるため、aラベルとして指定されています.

④HELBAKホームページ-下部

一番下の部分を実現するために、左/中(矢印)/右に分割します.
3つの部分をdivで区切って縛ります.
左側にはul-li-aタグを使用して作成されます.
真ん中はaラベルで、
右の文はpでマークし、隣のアイコンはul-li-imgでマークします.

2. Quick Review

input:シェイプはタイプによって使用される属性値に依存します

checkbox,radioの違い:複数選択可能かどうか

textarea:より多くの記事の情報をサーバに送信

select option:ドロップダウン形式の選択オプション

表情譜
-thread-tr-th:上部
-tbody:内容
-tfoot:要約表などの要約部分

スペース作成時
- header
- nav
-main:エクスポートプログラムがサポートされていないため、roleと併用する必要があります.
-section:代表部分のタイトル情報が必要なので、hラベルとともに使用する必要があります
-記事:領域情報を含むスペース.hラベルとともに使用するには、領域を表すすべてのタイトル情報が必要です.
-aisde:関連のない情報を入力
-footer:サイトの下部に情報を記入
-div:スペースのタグを作成する任意の領域
-インライン:x軸で整列します.改行は発生しません.
スペースを作成できません.操作を上下に配置できません.
-block:y軸を揃えます.改行現象が発生します.
スペースを作成したり、上下に配置したりできます.

[困難な点]

hラベルは順番に入力する必要があり、今日の実習ではh 3を入力しました.HPの1位情報ではないので、h 1ではないことは知っていますが、3はどうやって決めたのでしょうか?

spanタグについての概念はまだ明確ではなく、少し混乱しています.

[解決策]

はまた、他の質問とともに指導者に

質問する.

Teamsで私の考えに似た人の質問が出てきて、答えを見ました.

pは段落の作成に使用され、spanは通常の文字を修飾するために使用されます.だから使います.

<p>안녕하세요! <span>박용</span>입니다</p>

普通はそうします
という回答がありました.
また、Googleで検索した結果、以下の属性が表示されます.

spanラベルのデフォルトのプロパティは次のとおりです.
display:表示要素の変更
Width:水平寸法の指定
height:垂直寸法の指定
background-color:背景色の指定
color:フォント色の指定
font-style:フォント設定

実習の授業でspanのstyle情報がhead部分に入力されているのを見た.
このようにスタイル情報を設定しないと、何の変化もありませんが、上部にスタイル情報を設定すると、spanラベル付きの単語がハイライト色として理解されます.

NAVERホームページの上端には、「メール~テレビ」はspan値、「辞書~漫画」はデフォルト値と理解できる.

[勉強の感想]

ほんの少しですが、サイト構成についての理解が面白く、「文系だから無理」という限界を自ら設定しているのは、無色の面白さと未来への期待を感じさせる過程です.また,開発はガイドラインのみであり,正解はない.今日の講師が言ったように、開発者はできるだけ多くのサイトのケースを見て、それを自分のものにし、自分のスタイルを構築しなければならないと思います.