覚えておきたい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セレクタ
📒 문법
他にも링크선택자・동적 선택자