💫 z-index
객체를 원하는 순서대로 배치할 수 있는 기능
- z-index는 position 속성이 relative 일때, absolute일때 동작합니다
- 기본 값은 auto 입니다 음수, 양수 숫자 사용이 가능합니다
- z-index의 값의 숫자가 높으면 높을수록 최상단에 배치되며 낮으면 낮을수록 멀리 배치됩니다
- z-index는 동일 선상에 있는 태그 값을 확인하게 되지만 부모 태그의 z-index를 우선시하기 때문에 자식 태그의 z-index값이 높더라도 부모 태그 값을 더 우선시 하게 됩니다.
- 순서 값이 없을 경우 코드 순서에 따라 쌓이게 됩니다
💫 박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성
.box {
box-sizing : border-box; /*박스의 폭은 border까지 포함입니다*/
box-sizing : content-box; /*박스의 폭은 padding 안쪽입니다*/
}
box-sizing이라는 속성을 주게 되면 border까지 실제 박스의 폭으로 설정해줌
💫 CSS 파일 작성시 기본으로 쓰면 좋을 속성들
div {
box-sizing : border-box;
}
body {
margin : 0;
}
html {
line-height : 1.15; /*기본 행간 높이*/
}
box-sizing이라는 속성을 주게 되면 border까지 실제 박스의 폭으로 설정해줌
추가로 브라우저간 통일된 스타일을 주기위해 특정 스타일을 작성하고 css코드 작성
브라우저간 다르게 보이는 문제 해결해주는 CSS Normalize 링크