TIL

6795 ワード
CSS テキストリンク
CSSの再起動😶
GitHub Desktopを使用して練習を提出し、Githubを熟知する💕

Media Query


応答型Webを作成するためのCSS宣言
反応型ネットワークを作成するときは常に移動から始めます!
まず小さいサイズのときの画面でスタイルを宣言し、徐々に大きくなる画面に対応してスタイルを変えます.
(「検査-切替機器ツールバー」では、幅値を最小にした「iPhone 5/SE」を他のサイズで問題が発生しないように設定し、<講師推薦)を開始します.
Webブラウザは、デスクトップ、モバイル、タブレットなど、さまざまな画面サイズの機器で使用します.
使用する機器の画面サイズに応じてWebサイトを表示するには、それぞれのCSSスタイルを適用する必要があります.
反応型Webを作成するには、「viewport meta」(html)と「mediaquery」(css)を宣言する必要があります.
ますます多くの機械が開発され、使用されているので、反応型Webに対してよく作成することが望ましい.(私の考え!)
viewport metaラベルを次のコードとして宣言してこそ、反応型Webが正常に動作します.
<!DOCYPE html>
<html>
  <head>
    // 웹페이지의 가로 사이즈를 사용자의 기기 화면 사이즈에 맞게 보여지다
    <meta name="viewport" content="width=device-width" />
    ...
  </head>
</html>
Mediaquery文は、Webサイトに表示されるデバイスサイズ(px)以上または以下の場合、状況に応じて変化するコードを記述します.
キーワード'@media'と最小/最大横長条件を指定します.
  • □px以上の場合(最小サイズ:min-width)
  • □px以下の場合(最大サイズ:max-width)
    • @media screen and (min-width: 768px) {
  /* 조건에 맞는 경우일 때 적용되는 CSS 선언 */
}

/* min-width와 max-width 함께 작성 가능 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .box {
    background-color: yellow-green;
  }
  .box::after {
    content: "ohio";
  }
}
    .box {
  width: 100%;
  height: 100vh;
}
    »vw(ビューポート幅):ビューポートの横方向の長さに基づいて
    ≫ vh(viewport height)
    多く使う単位!ブラウザの垂直方向の長さに応じて異なるスタイルを適用
    1 vh=ブラウザウィンドウの垂直方向の長さの1%を占める領域
    100 vh=ビューポートの垂直方向の長さの100%を占める領域
    📓 リファレンスasideタグは、ページ上の他のコンテンツと一定の関連性を有するが、そのコンテンツから分離可能なコンテンツからなるページ領域を定義するために使用される.
    ページ本文の横に情報を表示したり、本文以外の内容を表示したりするために使用します.
    ボタンをbuttonタグではなくアンカータグとしてマークするのはなぜですか?
    🅰 デザイン上、この要素はボタンですが、実際に演じた役割は「他のページに移動するリンク」の役割です.(buttonの役割というより、アンカーを実行する役割)
    このように、情報の内容の意味や性質によって表記することが最も重要です!
    ☪ .banner-title aセレクタと.属性をbanner-titleセレクタに与えると、同じ結果値に見えますが、両者の違いは?(よく紛らわしい部分!🤨)
    <aside class="banner">
  <h1 class="banner-title">
    <a href="#">🚗 8월 게스트 신청하기</a>
  </h1>
</aside>

    🅰 思考過程を理解する!
    やりたいこと=>
    黄色のバナー「すべて」領域をクリックした場合、他のページ→黄色のすべての領域に移動するにはアンカーマークにする必要があります.

    でもアンカーラベルのテキストを真ん中に置きたい!→ここで重要なのは、アンカーマークを真ん中に置きたいのではなく、アンカーマークの中の「テキスト」を真ん中に置きたいということです.
    アンカータグのサブエレメントとして、テキストの「親エレメント」はアンカータグなのでflexを使用して中央揃え!

    flexを.banner-titleに適用すると、同じ結果が得られる場合がありますが、対応するフォント領域をクリックするしかありません.モバイルデバイスはユーザーの体験によくありません.
    そこで,クリック領域を大きくするためにアンカーラベルにflexを行った.
    [python]カウンタ()を使用してlist要素の重複数を出力する
    Hadoop実行Job時報DiskChecker$DiskErrorException異常原因