[HTML]좌표값을 받아서 레이아웃 이동하기 : Postion/z-index

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;
}