[복습]
※ Position
- static: 기본값
- relative: 흐름 제외X
- absolute: 흐름 제외
ㄴ 기준값=조상의 position 설정값
- fixed: 흐름 제외
- top/left/right/bottom
- .cts .box1
ㄴ 띄어쓰기 필수
- 하위에 쓴 것이 더 세다. 따라서 box2가 black이 아닌 white가 적용.
- 그러나 자세히 작성할 수록 힘이 더 세다.
- body .contents2 .box1
- .contents2. box1 >> position: absolute;
- .contents2 >> position: relative;
- box1을 흐름도에서 빼고 contents2를 기준점으로 하여 cts2의 box2가 위로 올라감
- contents2 >> position: absolute
- contents3이 흐름도에서 빠져 contents2 밑으로 들어감
- 전체를 통제하기 위해 네이밍을 같게 함
- block의 너비를 지정하지 않으면 너비는 최대치가 된다.
- box2가 부모를 튀어나갈 수 있다.
- 부모의 50%.
- cts의 너비값 설정 X.
- 너비는 기본적으로 100%. (cts의 부모는 body)
- 높이는 기본값이 0
- .box2 span {} >> span은 class가 아니고 tag
- span(:inline)은 너비와 높이 지정 불가능하므로 적용되지 않는다.
- 상위태그인 cts의 높이를 제거하면 하위태그인 box의 높이를 받아 그대로 커진다.
ㄴ 하위태그 높이 상속
- 부모 태그를 자식 태그가 그대로 받는 것: 상속
- div(부모)태그를 p(자식)태그가 상속받음.
- 키워드
- inherit: 상위 요소로부터 속성을 상속받겠다.
- initial: 브라우저의 기본 속성
- unset: 상속값 초기화. 받는 것은 받고, 안 받는 것은 안받겠다.
- 상속을 받는 것이 있고 안 받는 것이 존재
- 상속값을 받게 하려면 inherit
- 주든 안 주든 받겠다.
- 상속 받는 것을 안 받게 initial
- 주든 안주든 안받겠다.
[z-index]
- position이 걸려있어야 한다.
- 가장 나중에 만든 박스가 가장 위로 보인다.
[z-index] 를 사용하여 해결
- z-index 를 a1에 적용했을때
- z-index 를 a1에 적용하지 않았을 때
- a4에 z-index: -1 적용하여 a4가 가장 밑으로 내려갔다.
- z-index의 기본값은 0이다.
*** HTML과 CSS는 항상 보기에 간결하고 내가 통제하기 쉽게!
- div+p+span>> 순서대로 형제태그 생성 젠코딩