Front end/HTML, CSS (3) 썸네일형 리스트형 모달 내 특정 div에만 스크롤 적용하기 // display: block | none; // overflow-y: auto; 박스 크기 기준 설정(box-sizing) 1. box-sizing : 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성 2. 문법 box-sizing: content-box | border-box | initial | inherit border-box padding 속성도 추가하여 요소 내부의 여백을 지정 이렇게 하면 padding 값을 추가해도 요소의 실제 너비가 변경되지 않고, 지정한 width 값 그대로 유지할 수 있음 모달(modal) 중앙에 위치 시키기 .body{ width: 100% height: 100% } .modal{ position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); /* 수평 수직으로 중앙에 위치 */ } transform: translateX(-50%) translateY(-50%);는 요소를 수평, 수직으로 중앙에 위치시키는 역할을 하지만, 그 자체로는 요소를 위치시키지는 않음. 따라서 position속성과 함께 사용하여 요소를 정확한 위치에 배치할 수 있음. 이전 1 다음
