연산자 우선 순위

CSS선택자의 우선순위

기본적으로 CSS속성은 style 태그 또는 css파일에
작성된 순서(위,아래)대로 해석이 진행 되지만

같은 요소에 따라 css 속성이 설정되는 경우 우선 순위가 적용된다.

알아둬야 될 것

1) 동일한 우선 순위로 CSS속성이 설정된 경우

• 그 중 제일 마지막에 작성된 CSS 속성이 반영된다.
  

2) 여러 선택자를 이용해 같은 요소를 선택하더라도 지정되는 CSS 속성이 다르면 모두 반영된다.

---

1 : css속성 : 속성값 !important;

2 : inline-style 속성 (요소에 직접 작성되는 style속성)

3 : 아이디 선택자( #아이디 속성명)

4 : 클래스 선택자(.Class 속성명)

5 : 태그 선택자( 태그명 )

---

---

레이아웃 스타일

사전적 의미 : 배치 , 정의

기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미

화면 배치 방법(형식) : display 속성

요소가 화면에 어떻게 보여질지 형식을 지정하는 속성

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

상하 2 분할

   <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%;
	}

1) 전체 영역을 선언 (300pxx500px + 검은 3px 외각선)

2) 내부 공통 영역 선언 (둘 모두 가로 폭은 100)

3) 각자 차지할 영역과 색을 지정 (퍼센티지로 구성)

• first-of-type / last-of-type를 이용해 타입의 처음과 마지막을 타겟팅 한다

  ---

  상하 3분할

    <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;
	}

1) 내부 영역을 선언

2) 공통적으로 가로폭은 동일하게 지정한다(100)

3) nth-of-type을 이용해 3개의 공간을 각각 다르게 공간을 할당한다.

---

display : inline-block

좌우 2 분할

	<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;
  }

1) 내부의 공간 크기 할당

2) 공통적으로 공간을 할당한다

• 이때 좌우 수평 분할을 위해서 display의 inline-block(수평분할 + 사이즈 변경 가능)을 사용해서 하나의 반으로 블럭을 나눈다

3) 이 때 요소 선언시 사이에 '띄어쓰기'가 있을 경우 1px이 부여되서 400px가 초과되어 밑으로 내려가는 일이 생김으로 주의하자.