HTML&CSS復習


覚えておきたいTip


📔text-align

  • ソートテキストのCSS property
  • 親要素を基準にinline要素を並べ替える場合にも使用可能
    #id {
    text-align: left/center/right;
    }
  • 📔margin

  • マージン値CSS属性の調整
  • auto値はparent要素の幅を基準とし、両辺に同じ幅を割り当て、child要素をparent要素の真ん中に位置させる
  • 近接要素との距離を調節する特性であるが、絶対位置特性を持つ要素は近接マージンを無視して独自の位置を持つ
  • 📔初期化margin&padding


    各ブラウザにはHTML要素の一意の設定値があり、同じコンテンツのHTMLドキュメントでも画面で異なる場合があります.
    上記の特徴は、正しいWebカスタマイズに干渉します.したがって、Webページを作成する前に、セレクタ全体を使用してページ全体のmargin、padding値を初期化し、カスタマイズすることをお勧めします.예시
    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }

    📔text-decoration

  • none値が<a>タグであればリンクの下線を削除
  • 📔CSS background-image

  • 画像をWebページに入れる方法<img>ラベルのほか、CSSのbackground-imageproperty
  • background-image元素の大きさに関係なく、元の大きさを保つ.したがって、要素が実際の画像サイズより小さいと、画像が切り出されることがある
  • この場合background-size: 100%特性により要素サイズに合う画像が実現できる
  • <img>タグの違いは、Webページ上では意味要素として扱われず、単に背景画像を飾るという概念
  • selector {
    background-image: url("url 주소 입력");
    background-size: 100%;
    }

    📔垂直行リスト、list-styleプロパティ



    上記のリストを実装するにはどうすればいいですか?
    以下のことを覚えておけばいいです.
  • list-style: none;
  • border-左扶余
  • 水田値調整

  • リストを作成すると、デフォルトでは、文字列の前に特定のシェイプのヘッダー記号がマークされます.list-style特性の場合、このナンバーワンを取り除く役割を果たす

  • 縦線を表すborderのみを所望の方向に適用

  • padding値を調整することでリストと縦線の距離を調整します
  • 📔バーチャルクラスセレクタ(Pseudo-classes)

    <li>タグなど複数の同じタグが連続して存在する場合、特定の順序の要素を選択するにはselectorをどのように入力しますか?
    💡この場合に使用する方法は、構造化された仮想クラスセレクタであり、そのうちnth-childセレクタ
    📒 문법
    他にも링크선택자동적 선택자