[HTML/CSS] 반응형 width & box-sizing

🐳Coding apple HTML/CSS All-in-one : 기초부터 Bootstrap, SASS, 고급 animation 까지 강의를 보고 정리한 글입니다 🐳

💫 z-index

객체를 원하는 순서대로 배치할 수 있는 기능

1. z-index는 position 속성이 relative 일때, absolute일때 동작합니다
2. 기본 값은 auto 입니다 음수, 양수 숫자 사용이 가능합니다
3. z-index의 값의 숫자가 높으면 높을수록 최상단에 배치되며 낮으면 낮을수록 멀리 배치됩니다
4. z-index는 동일 선상에 있는 태그 값을 확인하게 되지만 부모 태그의 z-index를 우선시하기 때문에 자식 태그의 z-index값이 높더라도 부모 태그 값을 더 우선시 하게 됩니다.
5. 순서 값이 없을 경우 코드 순서에 따라 쌓이게 됩니다
    

💫 박스의 폭을 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 링크