position 그나마 많이 사용
static : 기본값
aelative : 흐름 제외 x
absolute : 흐름 제외 x
top / left / right / bottom
기준값/ 조상의 position 설정되어 있는
컨트롤 쉬프트 L
동일 범위 모두 선택)
.cts {
width: 300px;
height: 300px;
border: 1px solid #000;
position: relative;
}
.box1{
/* width: 50px; */
height: 50px;
background-color: aqua;
}
.box2{
width: 50%;
height: 50px;
background-color: blue;
}
/
.box2 span {
background-color: wheat;
}
<div class="box box2"><span>박스2</span></div>
span 은 크기 지정해도 적용 되지 않음
부모 태그를
자식 태그가 그대로 받는것을
"상속" 이라 한다
키워드
inherit ( 상위 요소로 속성을 상속받겠다.
initial ( 브라우저의 기본 속성 <상속 x >
unset (상속값 초기화
.a$*4
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
4개를 순서대로 만들겠다
z-index:
z-index 숫자가 높은 순서대로 위에 표시
단 ! position 이 걸려 있어야 한다.
----
HTML
CSS
보기 간결하고 내가 통제하기 쉽게
div*3
=
<div></div>
<div></div>
<div></div>
--
.a*2>.b*3
=
<div class="a">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
<div class="a">
<div class="b"></div>
<div class="b"></div>
<div class="b"></div>
</div>
--
div+p+sapn
=
<div></div>
<p></p>
<sapn></sapn>
등
( * ) 여러개 만들기
( + ) 그리고
( >) 안에 있는
( $ ) 순서대로 카운트