postion
Float 속성은 객체를 왼쪽, 오른쪽으로 정렬해서 레이아웃을 배치한다면 Postion은 객체의 위치 기준을 정해서 원하는 위치로 배치시키는데 사용된다.
top, left, bottom, rigth라는 속성을 사용하였을때 객체의 위치를 변경 할 수 있는데 어느 위치에서 라는 기준이 이 명시 되어 있지 않기 때문에 position은 기준점을 정해주는 것이라고 생각하면된다.
position의 대표 속성
: static, relative,absolute, fixed 가 있다.
position : static;
position : relative;
position : absolute;
position : fixed;
position:static :
기본값이 기준이 된다.(기존과 동일한 기준)
positon:relative:
현재 객채의 위치가 기준이 된다.
positon:absolute :
relative 속성을 가지고 있는 부모가 기준이 된다.
position:fixed:
브라우저 창이 기준이 된다. 화면이 바뀌더라도 고정된 위치를 설정 할 수가 있기 때문에 스크롤을 하더라도 위치가 고정되어 움직이지 않는 기능을 구현 할 수 있다.
position:sticky:
스크롤을 했을 때, 해당 객체의 위치를 기준으로 더이상 움직이지 않도록 화면에 고정시키는 속성이다. 다음에 오는 요소는 다음과 상관없이 위로 스크롤 된다.
sticky요소의 전체 부모요소 중에 overflow: auto、overflow: hidden、overflow: scroll 가 적용된 부모가 있으면 sticky가 안 먹힌다.
z-index :
z-index값을 가질때, 높을 숫자를 가질 수록 높은 우선 순위를 가지게 되면서 순서를 앞으로 오는 순서를 정해준다.
z-index: 0;회색 네모상자보다 Let'Start 텍스트가 우선순위가 더 낮아서 회색 상자에 가려진 상태로 나오는 것을 볼 수 있다.
z-index를 사용하려면 position이 있어야지 사용할 수 있다.
max-width:
화면의 크기에 따라서 객체가 최대 -px 이상으로는 커지지 않도록 한다.
width: 70%
max-width: 800px하지만 위와 같이 입력하게 되면 객체에 padding 값이나 border값 등 요소들은 넣게 되면 최대가 800px이상 넘어가게 된다.
그 이유는 width가 content 영역의 너비를 의미하기 때문에
padding, border, margin 영역은 커져도 의미가 없기 때문에 최대 치를 넘어가는 것을 확인 할 수 있다.
box-sizing:
max-width가 content의 width가 최대치를 넘어가지 않도록 하는 것이라면 전체 객체의 width값을 content부분만 아니라 나머지 부분도 포함하게 만들어 주어야한다. box-sizing은 이러한 문제를 해결 해준다.
border-sizing: border-box;border-box를 사용하면 width가 border까지 포함되게 된다. 다른 속성으로는 content-box가 있는데 이 속성은 기본값과 같은 content 영역까지만 width를 포함한다고 생각하면된다.
CSS 만들때 가장 먼저 작업해주면 좋은 3가지 코드
반응형 UI에 대해서 대처하는 방법
div{
box-sizing: border-box;
}
body{
margin: 0;
}
html{
line-height: 1.15;
}