210729開発ログ

📌 学習の内容

NAVERニュース実習

完全コード:💾

上部領域

class主なレイアウトを簡略化(cssで繰り返し使用する機能をあらかじめ作成)→コード成分

.news-container {
	width: 1080px;
	margin: 0 auto;
}

.news-flex-between {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

.news-flex-start {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

placeholder:<input>エリアにどのような情報を入力すべきかをユーザーに伝えるためのhtml属性

しゅりょういき

新聞の見出し

<article>:表題情報が1つ以上必要(h 1～h 6)

👉 サイト上でCat実験を行う場合、JS機能をオフにしたい場合は、

box-sizing: border-box;:枠によって箱の大きさが決まり、絵描きサブバージョンでは互換性がありません.

親がposition: relative;または純3次元の特徴を有する場合、子供が3次元であれば、子供のtop, left, bottom, right親を基準として形成される.

📌 学習内容の難点

<nav>と<div>の違い

<article>科<section>

📌 解決策
ネットの書名で知りました.
コメントサイト:
1. https://developern.tistory.com/entry/how-to-article-section-div-tag
2. https://itfix.tistory.com/650
3. https://aboooks.tistory.com/346
要するに、<nav>行内要素に相当する<div>, <article>, <section>銀ブロック要素であり、その機能は領域分割に用いられる.大部分は<div>で代用可能

<nav>:ページ間の移動を起動するために別のページにリンクする必要がある場合、またはページ上の指定された場所にリンクする必要がある場合に使用します(navigationlinksと理解されます).

<article>:ドキュメントまたは要素が独立して存在する場合に使用します.これは、コンテンツとは独立した完全なコンテンツを表します(記事の内容だけでその意味がわかります).
ex)ブログ記事、フォーラム記事、ニュース記事など

<section>:論理的に関連するドキュメントまたは要素の分離

📌 学習の心得.
今日も大きな困難はなく、よくついています.中間講師とは異なる形で少しずつ変えて使用しています.今日は間違いなく、一度にうまく実現して、気持ちが微妙でした.しかし,分離要素には様々なラベルが存在することが知られ,実際の使用には多くの悩みがある.要するに、全領域区切りタグを使用することは可能であるが、私はこれまで<nav>の他に、どの位置でどのタグを使用するかを考えていた.🤔