演算子の優先度

CSSセレクタの優先度

知っておくべきこと。

1:cssプロパティ:プロパティ値!important;

2:inlineスタイルプロパティ(要素に直接作成されたスタイルプロパティ)

3:アイデンティティーセレクタ(#アイデンティティー属性名)

4:クラスセレクタ(.class属性名)

5:ラベルセレクタ(ラベル名)

レイアウトスタイル

辞書の意味:配置、定義

技術的意義:コンポーネントを限られた空間に効率的に配置する

スクリーン配置方法(フォーマット):displayプロパティ

-block : 화면 수직 분할 (행을 나눔)
                    + width / height 속성 사용 O 
                    
 -inline : 화면을 수평 분할(하나의 행에 컬럼 나눔 (떡 썰듯이))
                    + width / height 속성 사용 X
                    
 -inline-block : inline의 수평분할 + block의 크기조정을 합친 기능
 
 -none : 화면에 요소가 표시되지는 않지만 존재는 하고 있는 상태
  
 -flex : 요소의 정렬되는 방향 , 요소간의 간격을 유연하게 처리하는 형식.

上下二分

   <div id="container-1">
       <!-- 내부에 영역을 분할할 요소 -->
       <div class="div-1"></div>
       <div class="div-1"></div>
   </div>

    #container-1{
    border:3px solid black;
    width: 300px;
    height: 500px;
	}
	
	.div-1{
    width: 100%;
 	}

	#container-1 > .div-1:first-of-type{
    background-color: ivory;
    height: 30%;
	}
	#container-1 > .div-1:last-of-type{
    background-color: grey;
    height: 70%;
	}

    <div id="container-2">
        <div class="div-2"></div>
        <div class="div-2"></div>
        <div class="div-2"></div>
    </div>

	#container-2{
      border: 1px solid black;
      width: 300px;
      height: 410px;
	}
	.div-2{
    	width:100%;
	}
	#container-2> .div-2:nth-of-type(1){
      height:20%;
      background-color: antiquewhite;
	}
	#container-2> .div-2:nth-of-type(2){
      height:30%;
      background-color: black;
	}
	#container-2> .div-2:nth-of-type(3){
    	height:50%;
    	background-color: blueviolet;
	}

display : inline-block

左右二分

	<div id="container-3">
    	<div class="div-3"></div><div class="div-3"></div>
    </div>

  #container-3{
      border:5px solid red;
      width: 400px;
      height: 200px;
  }
  .div-3{
      width: 50%;
      height: 100%;
      display:inline-block;
  }
  #container-3>.div-3:first-of-type{
      background-color: red;
  }
  #container-3>.div-3:last-of-type{
      background-color: slateblue;
  }