기본적으로 CSS속성은 style 태그 또는 css파일에
작성된 순서(위,아래)대로 해석이 진행 되지만
같은 요소에 따라 css 속성이 설정되는 경우 우선 순위가 적용된다.
1) 동일한 우선 순위로 CSS속성이 설정된 경우
2) 여러 선택자를 이용해 같은 요소를 선택하더라도 지정되는 CSS 속성이 다르면 모두 반영된다.
요소가 화면에 어떻게 보여질지 형식을 지정하는 속성
-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%;
}
1) 전체 영역을 선언 (300pxx500px + 검은 3px 외각선)
2) 내부 공통 영역 선언 (둘 모두 가로 폭은 100)
3) 각자 차지할 영역과 색을 지정 (퍼센티지로 구성)
first-of-type / last-of-type를 이용해 타입의 처음과 마지막을 타겟팅 한다
<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개의 공간을 각각 다르게 공간을 할당한다.
<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) 공통적으로 공간을 할당한다
3) 이 때 요소 선언시 사이에 '띄어쓰기'가 있을 경우 1px이 부여되서 400px가 초과되어 밑으로 내려가는 일이 생김으로 주의하자.