TIL (responsive web_note02)

css final projectによる応答性Web、メディアクエリーの学習
(私の場合、Bootstrapが提供するgrid systemを適用せずに作成し、それを考慮して私のコードとの違いを記録します.)
その他のコードには、flexを使用して要素を中央揃え、余白と塗りつぶし値を適用して余白を作成することが含まれます.

Service Section

パッケージdiv要素が2つあり、間隔がある場合はdescriptionにmargin-blottを1つ与えやすいが、コードが不潔である.
最初のパッケージdiv要素(title 1とdesc 1が属する)は、同級要素間で間隔を置いています.col-12にground-bottomを追加します.
※Bootstrapが提供するgridシステム関連スタイル(.container,.row,.cl-12)は絶対に「width,height,padding-left/right,marging-left/right」!(上下隙間調整可能)

移動画面の場合、デスクトップ画面の余白は1(autoとは異なる)に設定されます.

.service .col-12:first-child {
  margin-bottom: 0;
}

Program Section

Program SectionとCurriculum Sectionは、フォントサイズや余白などのパターンに似た汎用的なデザインです.
共通モジュールを作成し、1つの画面にのみクラス名を作成するのではなく、スタイルを適用します.グローバルクラス名を作成します.
(一般的なスタイルではなく、色などの他のスタイルを個別に作成します)

デスクトップ画面には、「col-md-10」の要素が中央に並べられ、両側に1列ずつ並んでいます.
(flexプロパティ)rowクラスのラベルにbootstrapのデフォルトで提供されるスタイル「prefident-content-center」クラスを追加すると、スタイルの適用を簡略化できます.

クラスを追加して共通モジュールを作成し、同じスタイルを適用します(1と同様)

<section class="program section">
  ...
</seiction>

<section class="curriculum section">
  ...
</section>

.section {
  padding: 80px 0;
}

アンカー内の画像の大きい時間を設定して、モードを探します.width値がぼやけてheight値が一定である場合は、次のように設定できます.
(height規格に適合するように幅を自動的に指定)

.program-card img {
  display: block; // image에 width와 height값을 부여하기 위한 설정
  width: auto;
  height: 195px;
}

🔽 (grid.min.cssには適用されません)私のコードとは異なる部分
(※grid.min.cssは基本的に当てはまるスタイルです!😂)
5-1. パッケージ要素としてのprogram-cardのサイズをblock要素に変更し、widthおよびheightではなくpadding-top/bottom値を指定します.
※program-cardの'.col-12「幅:100%自動設定」😱
(私の場合、program-cardのアンカーマークはinline要素なのでblock要素に変更することはできませんが、paddingでボックスのサイズを指定するだけなのでwidthとheight値を個別に設定できます)
5-2. “margin:0 auto;”を選択します.
親要素の「text-align:center;」でstrongタグを中央揃え適用

.program-card {
  display: block;
  padding: 24px 0 32px;
  // inline 요소인 strong 태그를 가운데 정렬하기 위해 적용
  text-align: center;
}

.program-card img {
  display: block;
  width: auto;
  height: 195px;
  // image를 가운데 정렬하기 위해 margin 속성을 사용
  margin: 0 auto 16px;
}

.program-card strong {
}

(私→)強いタグに直接中央揃えスタイルを適用する場合は、ブロック形式に変更する必要があります.
(🤔 ただし、text-alignを適用する必要がある特定の要素を含む親要素に適用しますか?親要素(ブロック)に適用するのは簡単...?

.program-card strong {
  display: block;
  text-align: center;
}

「

要素の間に余白を設定し、first-childなどの仮想要素を使用しない.これらの要素は通常、デスクトップ画面に4列の領域を有する」.col-md-4'クラスを選択プログラムとして使用
(私の場合、プログラムには他の「.cl-md-4」要素があるかもしれませんので、first-child(2)に同じmarging-bottomを適用します)

.program .col-md-4 {
  margin-bottom: 20px;
}

.program .col-md-4:last-child {
  margin-bottom: 0;
}

📓 注意!
🧐 なぜmobileとdesktopにマウスの操作によって値が変化する属性hoverを宣言しますか?
🅰 モバイルビューポートは必ずしもモバイルデバイスのみに接続されているとは限らないため、ブラウザのサイズによっては通常のPCでもモバイル画面が表示されます.
また、最近のタブレットPCやモバイルPCでは、マウスなどの外部入力デバイスを接続する際に、ポインタでマウスのサスペンションの効果を見ることができるので、すべて適用するのが望ましい.
また、モバイルデバイスにfocus、activeがない場合は、クリックするとhover値が適用されます.