HTML&CSS復習
覚えておきたいTip
📔text-align
#id {
text-align: left/center/right;
}
📔margin
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
<img>
ラベルのほか、CSSのbackground-image
propertybackground-image
元素の大きさに関係なく、元の大きさを保つ.したがって、要素が実際の画像サイズより小さいと、画像が切り出されることがあるbackground-size: 100%
特性により要素サイズに合う画像が実現できる<img>
タグの違いは、Webページ上では意味要素として扱われず、単に背景画像を飾るという概念selector {
background-image: url("url 주소 입력");
background-size: 100%;
}
📔垂直行リスト、list-styleプロパティ
上記のリストを実装するにはどうすればいいですか?
以下のことを覚えておけばいいです.
リストを作成すると、デフォルトでは、文字列の前に特定のシェイプのヘッダー記号がマークされます.
list-style
特性の場合、このナンバーワンを取り除く役割を果たす縦線を表すborderのみを所望の方向に適用
padding値を調整することでリストと縦線の距離を調整します
📔バーチャルクラスセレクタ(Pseudo-classes)
<li>
タグなど複数の同じタグが連続して存在する場合、特定の順序の要素を選択するにはselectorをどのように入力しますか?💡この場合に使用する方法は、構造化された仮想クラスセレクタであり、そのうち
nth-child
セレクタ📒
문법
他にも
링크선택자
・동적 선택자
Reference
この問題について(HTML&CSS復習), 我々は、より多くの情報をここで見つけました https://velog.io/@myway_7/HTML-CSS-복습テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol