KBW's cosmos

padding: 0.5rem calc((100vw - 1000px) / 2); 위 식으로 가운데 정렬을 시킬 수 있다. 0.5rem은 위아래 패딩이니 상관없고 핵심은 calc((100vw - 1000px) / 2)이다. calc() CSS함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있다. vw는 vw = viewport width로 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. 100vw가 전체 화면의 기준이 된다. 따라서 100vw는 전체 화면에서의 width값이고 거기서 1000px만큼을 뺀 값을 2로 나누어 이를 좌우 패딩으로 삼는다는 것이다. 이를 정리하면 calc((100vw - (사용할 공간 크기) / 2)로 사용하면 된다.

최근 앱개발을 하면서 레이아웃을 많이 만져 이제는 익숙해졌지만 처음에는 헷갈리는 개념이었다. margin과 padding은 대상 레이아웃에 공백을 만들어준다는 점에서 비슷하지만 조금 다른 부분이 있다. 먼저 두 개념에 대해 정리하자면 다음과 같다. margin : 바깥쪽 여백 padding : 안쪽 여백 아래 사진을 보자. 굵은 선이 레이아웃의 크기 경계라고 할 때, 이 선을 기준으로 바깥쪽의 여백을 margin이라 하고 안쪽 여백을 padding이라 하는 것이다. margin의 경우 왜 쓰는지 이해가 가는데 padding은 어떻게 사용해야하는지 감이 안올 수 있다. 필자 또한 그랬다.. padding의 경우 레이아웃의 위치(구조)에 영향을 주지않으면서 레이아웃 안의 내용물의 위치를 수정할 수 있는 좋은..