뇌 채우기 공간

box-sizing 요소의 크기 계산 기준을 지정 속성값 content-box : 너비(width, height)만으로 요소의 크기를 계산 border-box : 안쪽 여백과 테두리 선을 포함하여 요소의 크기를 계산

padding 요소의 내부 여백을 지정 % : 부모 요소의 너비에 대한 비율로 지정됨 padding: 위 우 아래 좌; padding: 위 (좌,우) 아래; padding: (위,아래) (좌,우); padding: (위 아래 좌 우); padding-top / bottom/ right / left 개별 속성도 가능 크기 증가 추가된 padding값만큼 요소의 크기가 커지는 현상 div{ width:100px; height:100px; background: skyblue; padding:20px; } padding을 넣기 후 -> 전 크기가 커졌다. 안쪽 여백을 사방으로 주었기 때문이다. 크기가 이렇게 커지게 되면 매번 계산을 해야하므로 자동으로 계산되는 것은 box-sizing: border-box; 속..

margin % : 부모 요소의 가로 너비에 영향을 받는다. .parent{ width:400px; height:200px; border: 4px solid red; } .child{ width:100px; height:100px; border: 4px solid; margin: 50%; } margin: 위 우 아래 좌; margin: 위 (좌,우) 아래; margin: (위,아래) (좌,우); margin: (위 아래 좌 우); margin-top / bottom/ right / left 개별 속성도 가능 마진 중복(병합, Collapse) 마진의 특정 값들이 중복 되어 합쳐지는 현상 1. 형제 요소들의 margin-top과 margin-bottom이 만났을때 2. 부모 요소들의 margin-top과..

background: 색상 이미지경로 반복 위치 스크롤특성; ■background-color(background) div{ width:200px; height:100px; background: skyblue; } ■background-image 요소의 배경에 하나 이상의 이미지를 삽입할 수 있다. div{ width:1000px; height:1000px; background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fimgnews.naver.net%2Fimage%2F609%2F2021%2F03%2F11%2F202103110904242410_1_20210311090556204.jpg&type=sc960_832"); } div{ wid..

px단위 정확한 px단위로 고정하는데에 사용 % 부모요소의 가로 사이즈에 영향을 받음px단위 container parent child1 child body *{ border: 2px solid; } .container{ width: 600px; } .parent{ width:300px; } .child{ width: 150px; } body *{ border: 2px solid; } .container{ width: 600px; } .parent{ width:50%; } .child{ width: 50%; } 위 아래 둘다 css 똑같은 결과를 나타낸다. %사용시 부모 요소의 크기에 영향을 받기 때문에 parent는 container의 크기에 영향을 받아 300px이 되고 child는 parent의 크기..