[CSS] Navigation, box-sizing: border-box

91Savage·2022년 9월 5일
0

css

목록 보기
5/5
  • nav>ul>li*4>a
    nav안에 ul 안에 li x4개 는 각각 a를 가진다.

border-box

200px 크기의 box에 50px의 padding을 원할 경우,
총 크기 200px, (width 150, padding 50 실제 내용 150)의 box를 생각해서
padding : 50px, width : 200px 로 입력하지만,
이렇게 하면 CSS에서는 padding을 50px 주고, 200px의 box width는 유지하려 하므로,
총 크기 250px (width 200, padding 50 실제 내용 200)의 box를 가지게 된다

box-sizing: border-box 를 입력할 경우,
padding을 입력해도 box 사이즈는 신경 쓰지 않는다.
따라서 처음 원했던 50padding + 150px 를 갖게 된다.

복습 (position)

position : static : 박스를 처음위치한 곳에 두는 것
position : fixed : 처음 위치한 자리에서 화면의 스크롤에 상관없이 고정
position : relative : 박스가 처음 위치한 곳을 기준점으로 top,bottom, left, right로 위치를 조금씩 수정 할 수 있따.
position : absolute : 가장 가까운 부모 엘리먼트에 position:relative를 추가한다.
부모 기준으로 top,bottom,left,right 이동하고, 아닐시엔 body 기준으로 이동 된다.

0개의 댓글