position 좌표 레이아웃

문종후·2023년 3월 24일
0

어떤 버튼,글등등을 이동시킬때 사용할수있는속성

margin속성도가능하지만

position 속성을 사용하면된다.(날 기준으로 어떻게움직일껀지, 공중으로띄우기)

position->static(좌표이동하지말아라 멈춰!)
fixed(현재화면에 기준점을둠)=>화면에달라붙는요소 구현가능하다.(위로가기버튼이나 고정상담등 고정메뉴등을 fixed로 처리하면예쁘다)
absolute(내부모태그를 기준으로 움직이고싶을떄->좀더정확히말하면 부모중에 position:relative를 가지고있는 부모태그를 기준으로 움직인다.)

      참고 absolute 준요소 가운데정렬방법
      left:0
      right:0
      margin:auto
      width:적절하게 주면
      ->가운데정렬 완료.
      

Z-index(앞으로온다. 높을수록)
->z축이라고생각하면됨.

====================================================================
폭과 관련된수정
반응형(80%등 퍼센트사용)
max-width

max-width minimum 등의 속성을 이야기할떄 왜 반응형 웹페이지이야기가나왔냐
잠시 풀어서 설명하면 만약 %로 크기를 부여할경우 전체 body에 의해 크기가 유동적으로변하기때문에 큰 pc화면으로보던 모바일로보던 일정크기가 유지된다. 하지만 pc로 보면 너무크거나 모바일로보면 너무작아지는경우가 있을수있다.
이때 max-width minimum을통해 아무리 커져도 이거보단밑 아무리작아져도 이거보단 위로 기준을 정해주는 작업이라고 보면된다.

==>width padding border와 아무관련없이 content box 안의 넓이만 정해준다.(중요 매우중요!) 그렇다면 padding border모두 포함해서 width를주면 실제로 설정이가능하다

==>box-sizing:border-box(를주면된다.)->한번에 해놓는게편함.

==>normailze.css이런것들

profile
개발자가되고싶은사람

0개의 댓글