Today
06:00 기상18:00 공부
기본 박스 사이징은 content-box 이다.
박스를 content-box 안으로 넣고 싶다면 아래처럼 박스 사이징을 지정해주면 된다.
<style>
.box3{
box-sizing: border-box;
}
</style>통상적으로 패딩을 넣는건 박스안에 넣는다는 것이기 때문에 대부분 border-box를 사용한다.
Absolute vs Static
position의 기본값은 static 이다.
relative는 원래 있던 자리를 유지하면서 우리가 지정한 값으로 이동한다. 기본은 top과 left 값.
absolute는 원래 있던 자리에서 나와 주변에 함께 있던 요소들과 재배치가 일어난다. 근접한 부모중에 기본값인 static이 아닌 부모의 기준에서 움직이게 된다.
Sticky vs Fixed
sticky는 들어있는 부모박스 안에서 포지션이 지정된다.
fixed는 부모와 상관없이 viewport에서 지정된다.
div는 블록레벨이라 한줄에 하나만 들어올 수 있다. 자동으로 마진이 들어간다. 보통 오른쪽에 마진이 들어가 있다. 수직 수평으로 중간 정렬 할때는
transform: translate(-50%, -50%), position:absolute, top:50%, left: 50% 하면 된다.
text-align 은 text가 아니더라도 중간 정렬이 가능하지만 블록레벨은 안된다.
text 수평 수직 중간 정렬은 text-align: center, line-height: 박스높이; 하면 된다(한줄 text만 가능하다).
Responsive background
// 같음
<style>
.box1 {
background-image: url();
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.box2 {
background: center/cover no-repeate url()
}
</style>
Media Query
미디어쿼리안에 들어가는 내용은 최소한의 것만 들어가야한다.
즉 차이점만 들어가야 한다.
반응형 햄버거바를 opacity를 이용해서 만들면 마우스가 올라갔을때 클릭이 된다. 그래서 display:none으로 만드는것이 좋다.
