HTML&CSS(9)

4490 ワード
CSS テキストリンク

応答型Webとメディアクエリー


インタラクティブWebの理解


Web要素を画面サイズに再配置し、各要素の表示方法のみを変更してサイトを表示します.
  • ビューポート:スマートフォンの画面に実際の内容が表示される領域
  • ビューポートの指定:<head>タグ間で作成
    きほんがた<meta name="viewport" content="속성1=값1", "속성2=값2",...>
    • Webビューポートの幅をスマートフォンの画面幅と一致させ、初期画面のスケールを1に指定します.
    <meta name="viewport" content="width=device-with, initial-scale=1">

    メディアクエリーについて


    サイトに接続されているデバイスに応じて、特定のCSSスタイルを使用します.
  • メディアクエリー構文
    きほんがた@media [only | not] 미디어 유형 [and 조건] * [and 조건]
    • メディアタイプがscreen、最小幅768 px、最大幅1439 pxのときに適用されるCSSを定義します.
    @media screen and (min-width: 768px) and (max-width: 1439px) {
  ...
}

    グリッドレイアウトについて


    Webサイトを複数のコラムに分割し、メニュー、本文、画像などのWeb要素を画面に配置します.
  • 視覚的に安定した設計.
  • 更新は便利なウェブデザインを構成することができる.
  • 要素を自由に配置できます.
  • グリッドレイアウトの作成方法
    フレキシブルボックスレイアウト(=[フレキシブルボックス]):グリッドレイアウトに基づいて各ボックスを所望の位置に配置します.
    CSSメッシュレイアウト:水平方向と垂直方向の任意の方向に配置できます.

    • ソフトボックスレイアウトについて


    「
  • 」「シャーシレイアウト」で使用する用語
    • クリーンアップ用語
  • フレキシブルコンテナ(親フレーム):フレキシブルボックスレイアウトを適用するターゲットを結合する要素
  • フレキシブルプロジェクト(サブフレーム):
    • フレキシブルボックスレイアウトの適用
  • スピンドル(スピンドル):ベンド項目を配置するデフォルトの方向は、左(始点)から右(終点)まで
    • です.
    交差軸(crossaxis):主軸と交差するユニバーサルジョイント.デフォルトでは上(始点)から下(終点)に配置されます.
  • Flexboxアイテムを配置するプロパティjustify-content:主軸方向の揃えalign-items:交差軸方向に位置合わせする方法align-self:交差軸上の単一の項目を位置合わせする方法align-content:交差軸に複数行表示されるアイテムを位置合わせする方法
    ベンドコンテナのdisplayプロパティの指定flex:コンテナ内のFlexアイテムをブロック要素として配置するinline-flex:コンテナ内のベンド項目を行内要素として配置する
    flex-directionプロパティ、ベンド方向を指定するrow:主軸を水平に配置し、左から右に配置します.デフォルト値row-reverse:主軸を水平に配置し、逆も同様column:主軸を垂直に指定し、上から下に配置column-reverse:主軸を垂直に指定し、下から上へ配置
    flex-wrapプロパティ、改行Flexアイテム用nowrap:1行にフレキシブルアイテム、デフォルト値を表示wrap:複数行にFlexアイテムを表示するwrap-reverse:ベンド項目は複数行に表示されますが、開始点と終了点は変更されています.
    配置方向と改行を一度に指定するflex-flowプロパティ
    #opt1 { flex-flow: row wrap; } /* 왼쪽에서 오른쪽, 여러 줄 */
#opt2 { flex-flow: row nowrap; } /* 왼쪽에서 오른쪽, 한 줄 */
    スケルトンの位置合わせを指定するrivide-contentプロパティflex-start:主軸の始点に位置決めflex-end:主軸の端点に位置決めcenter:主軸の中央に配置space-between:1回目と最後の降伏を配置した後、残りの間隔をその間に置くspace-around:すべての項目を主軸に配置し、値を間隔にします.
    交差軸の位置合わせを指定するalign-itemsプロパティflex-start:交差軸の始点に位置決めflex-end:交差軸の端点に位置決めcenter:交差軸の中心に配置baseline:交差軸のテキストベースラインに整列stretch:複数のベンド項目を展開し、交差軸上に配置します.
    align-sselfプロパティ.特定のアイテムのみをソートする方法を指定します.align-itemsプロパティはFlexコンテナに、align-selfプロパティはFlexプロジェクトに使用されます.

    • CSSグリッドレイアウトの使用

    [データ構造]Stack
    java.io.IOException: grpc failed