border-box
-
[CSS] box-sizing - element의 크기 정하기백수의 개발/웹 2020. 3. 7. 17:50
box-sizing - element의 크기 정하기 오늘은 element의 크기를 정해줄 수 있는 box-sizing에 대해서 알아보자. box-sizing box-sizing의 속성으로는 기본적으로 content-box, border-box 두가지가 있고, 기본값이 content-box로 되어있다. content-box 크기의 기준이 content 영역이다. 그렇기 때문에 padding의 크기나, border의 크기를 지정하면 설정한 width와 height보다 더 큰 영역을 차지하는 element가 생성된다. 아래 간단한 예시를 보자. .content-box-div { box-sizing: content-box; width: 500px; height: 200px; padding: 10px; borde..
-
[ CSS ] margin vs padding - 여백 조정하기백수의 개발/웹 2020. 3. 5. 20:00
margin vs padding - 여백 조정하기 우리는 웹개발을 할 때 다양한 Element들을 사용한다. 그때 Element들을 다양하게 이동시킬필요가 있을 것이다. 이를 위하 활용할 수 있는 것이 바로 margin과 padding이다. 그렇다면 margin과 padding이 어떤 것인지 알아보자. Element의 구조 들어가기에 앞서 Element가 어떤식으로 구성되어있는지 간단하게 알아보고가자. 기본적으로 실제 Element 내부에 기본적으로 content가 있을 것이다. { content } 이러한 content는 padding, border, margin의 순서로 둘러싸여있다. 그림으로 보면 아래와 같이 나타낼 수 있다. padding은 element와 content사이의 여백, border는..