안녕하세요 여러분.
이 코드에 border radius를 추가하고 하단 부분을 원하는 대로 만들었습니다.
하지만 상단 부분은 수정하지 못하고 있습니다.
상단 부분이 하단 부분과 똑같이 보이려면 어떤 코드를 추가해야 하나요?
예: top-height-size: -30%; ? 하지만 이 방법은 작동하지 않습니다.
body:before {
display: inline-block;
border-radius: 15px;
width: 1125px;
min-height: 100%;
height: inherit;
background-color: #fff;
content: " ";
position: fixed;
left: 50%;
right: 0;
transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
}
죄송하지만 정확히 무엇을 해야 하는지 명확하지 않습니다. 다음 사항에 대해 더 자세한 정보를 제공해 주실 수 있을까요?
제 영어가 부족하여 죄송합니다. 도움을 주셔서 감사합니다.
괜찮아요, 영어 잘하시네요. 다만 코드를 설명하는 건 좀 까다로울 수 있죠! 더 자세한 정보를 추가해 주셔서 감사합니다. 문제의 원인이 명확해 보입니다.
때로는 margin-top을 사용해 위쪽 여백을 더 늘릴 수 있습니다.
하지만 스크롤을 하면 동작하지 않습니다!
이유는 body:before 부분에 position: fixed가 적용되어 있기 때문에, 화면에서 항상 같은 위치에 머물러 있기 때문입니다. 대신 position: absolute로 변경해 보겠습니다. 'absolute’를 사용하면 가장자리로부터 얼마나 떨어져 있을지 지정할 수 있습니다. 가장자리를 기준으로 삼으려면 body를 사용하도록 해야 하므로, 다음 코드를 추가해야 합니다:
body {
position: relative;
}
(position, fixed, absolute에 대해 더 알고 싶으시다면 여기에 예제가 있는 글이 있습니다)
자, 이제 body:before에서 min-height: 100%를 삭제하겠습니다. 높이가 100%보다 짧아지도록 하려는 것이므로요. 이제 위쪽과 아래쪽 위치를 제어할 수 있습니다. top: 70px과 bottom: 30px을 추가해 보겠습니다. (위쪽 값은 화면 상단의 헤더를 충분히 벗어나도록 충분히 커야 합니다).
원하시는 대로 보이는 것 같나요? 이해가 되는지 알려주세요. 
정말 대단하세요!
준비된 코드를 그냥 주는 대신, 직접 가르쳐 주셔서 감사합니다. 
@bryce
