CSS構造とセレクタ

23215 ワード
selector frontend Rule CSS @property KDT pin技術サービスフロントエンド テキストリンク

CSS

  • 積層スタイルシート(CSS)は、HTMLまたはXMLで記述された文書のタグ付け方法を記述し、HTMLタグにデザインを追加するスタイルシート言語である.
  • はオープンWebのコア言語の1つであり、W3C 명세は複数のブラウザの標準的な動作である.
    現在のCSSバージョンは4で、より効果的な方法はモジュール別にW3C 권고안を開発し、リリースすることです.
    バージョン業は二度とない見通しだ.

    • CSS構造



    CSSの全体構造を「rule set」と呼ぶ.しかし、略して「rule」と呼ぶことが多い.

    セレクタ


    CSSとしてHTML要素名で装飾する要素を選択します.

    宣言


    装飾したい要素のプロパティを指定します.

    ツールバーの


    これは、与えられたHtml要素を装飾する方法です.

    属性値


    与えられたプロパティに対して多くの可能な結果の1つを選択します.

    CSSの作成方法


    CSSを作成する方法は3つあります.
    1.インラインスタイル
    2.スタイルラベルの作成
    3.cssファイルで作成
    3つの方法がありますが、cssファイルを作成してメンテナンスするのは非常に効果的です.

    セレクタ


    セレクタ(Selector)とは?


    スタイルのHTML要素オブジェクトを指定します.
    選択者は、結合者(スペース,'>','+')によって1つ以上の単純な選択者の連続である.
    複数を選択して同じスタイルを指定する場合は、(,)カンマでグループ化できます.

    全オプション(Universal Selector)


    選択者全体にすべての要素(Element)が含まれ、「*」で表されます.
    * {
  padding: 0;
  margin: 0;
  border: 0;
}

    タイプセレクタ


    選択者として「要素」(Element)を指定します.ex) body, div, h1, ul, li, span .. 
    div {
  width: 100%;
  height: 100%;
}

    サブセレクタ


    スペースで区切られた2つ以上の選択者は、「~の中の~tag」を選択します.
    <style>
  p {
    font-size: 20px;
    color: #333;
    line-height: 1.2em;
  }
</style>


<body>
  <div>
    <p> Hello </p>
  </div>
  <p> World! </p>
  <div>
    <p> What a nice weather! </p>
  </div>
</body>

    サブセレクタ


    サブセレクタは、選択するタグの親エレメントとともに、親エレメントの後に">"として連続的に作成されます.
    例えば、bodyセクションのすべてのpタグではなく、body 안에 있는 모든 div태그 안의 p태그が選択される.
    <style>
  div > p {
    font-size: 20px;
    color: #333;
    line-height: 1.2em;
  }
</style>


<body>
  <div>
    <p> Hello </p>
  </div>
  <p> World! </p>
  <div>
    <p> What a nice weather! </p>
  </div>
</body>

    隣接セレクタ


    隣接する選択者は、「+」で区切られた2つ以上の選択者で構成されます.
    最初の選択者を選択し、最後の2番目の要素を選択します.
    <style>
  p + h4 {
    font-size: 20px;
    color: #333;
    line-height: 1.2em;
  }
</style>


<body>
  <h4> HAHAHA </h4>
  <span> Hello </span>
  <p> World! </p> /* 첫번째 선택자 */
  <h4> What a nice weather! </h4> /* h4 태그 중, 첫번째 선택자 바로 다음에 나오는 h4가 두번째로 선택된다. */
</body>

    属性セレクタ


    アトリビュートセレクタは4つの方法で表されます.

    1.属性のみ

    img[alt] { /* alt 속성을 가진 모든 이미지가 선택된다. */
  border: 2px solid #fff
}

    2.属性に値を指定

    img[alt="cat"] { /* alt 속성 값으로 cat이 지정된 모든 이미지가 선택된다. */
  border: 2px solid #fff
}

    3.属性に値が含まれている場合

    img[alt~="cat"] { /* alt 속성 값으로 cat을 포함하는 모든 이미지가 선택된다. */
  border: 2px solid #fff
}

    4.属性値で始まる

    img[alt|=cat] { /* alt 속성 값으로 cat로 시작하는 모든 이미지가 선택된다. */
  border: 2px solid #fff
}

    アイデンティティーセレクタ


    特定のID(#)を持つ要素にのみ使用されます.
    id属性を持つ要素が許可されているのは1つだけです.
    h2#subject { /* 아이디가 subject인 h2 태그 선택 */
  color: red;
}

#subject { /* 아이디가 subject인 모든 태그 선택 */
  color: red;
}

    クラスセレクタ


    特定クラス(.)持つ要素のみに使用します.
    classプロパティは、複数の要素で所有できます.同じclass名を選択すると、同時に適用されます.
    h2.subject { /* 클래스가 subject인 h2 태그 선택 */
  color: red;
}

.subject { /* 클래스가 subject인 모든 태그 선택 */
  color: red;
}

    仮想クラス


    仮想クラスは、スタイルを適用するオブジェクトを要素、属性、および属性値で分類するのではなく、상황で分類します.

    :first-child


    タグを指定する最初のサブエレメントを選択します.
    <style>
  div > p:first-child {
  	font-weigth: bold;
  }
</style>
    <body> // div의 첫번째 자식은 p 태그이기 때문에 스타일이 적용된다.
  <div class="textBox">
    <p>Hello World!</p>
    <span>What a nice day!</span>
</body>
    <body>
  <div class="textBox"> // div의 첫번째 자식은 span 태그이기 때문에 스타일이 적용되지 않는다.
    <span>What a nice day!</span>
    <p>Hello World!</p>
</body>

    :hover


    要素にマウスを置いたときに設定したスタイルが有効になります.
      <style>
  	a:hover {
      color: red;
    }
  </style>
      <body> // CSS MDN 글씨에 마우스를 올리면 글씨색이 red로 변경된다.
    <a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS MDN</a>
  </body>

    :active


    マウスをクリックして要素を解放するときに設定したスタイルが適用されます.
      <style>
  	a:active {
      color: red;
    }
  </style>
      <body> // CSS MDN 글씨에 마우스를 눌렀다가 놓는 동안 글씨색이 red로 변경된다.
    <a href="https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics">CSS MDN</a>
  </body>

    :focus


    テキスト入力フォームをクリックし、入力中にスタイルを適用します.
      input:focus {
    border: 1px solid blue;
  }
      input:focus:hover { // 가상클래스를 결합해서 사용할 수 있다.
    border: 1px solid blue;
  }

    仮想エンティティ


    一部の要素の内容では、HTMLでは最初の行や文字を指定できません.
    仮想エンティティを使用してスタイルを適用できます.

    ::before, ::after

      div::before {
  	content: "";
  }
  div::after {
  	content: "";
  }

    References

  • https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics
  • https://opentutorials.org/course/1237/4150
  • https://velog.io/@jason0503/CSS3-MDN%EC%9C%BC%EB%A1%9C-%EA%B3%B5%EB%B6%80%ED%95%98%EB%8A%94-CSS3-%EC%A7%80%EC%8B%9D-CSS%EA%B0%9C%EC%9A%94-%EB%B0%8F-%EA%B8%B0%EC%B4%88
    • [Jobdu]タイトル1390:長方形オーバーライド
    Python基礎文法学習(四)