목록2024/03 (23)
기초공사 (html,css,javascript)
// https://inpa.tistory.com/entry/CSS-%F0%9F%93%9A-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%82%AC%EC%9D%B4%EC%A6%88-%EB%B9%84%EC%9C%A8-%EB%A7%9E%EC%B6%94%EB%8A%94-3%EA%B0%80%EC%A7%80-%EB%B0%A9%EB%B2%95-object-fit-background-size-position 🌟 이미지 사이즈 비율 맞추는 3가지 방법 (object-fit / background-size / position) 프론트를 작업할때, 컨테이너의 크기는 고정되어 있는데, 해당 컨테이너 안에 들어갈 이미지의 크기는 다양한 경우가 있다. 예를들어 이미지를 확대/축소 하거나 특정 비율로 나타나게 하기위 ..
1. .aside-banner { width: 100%; padding: 30% 0; margin-top: 15px; border: 1px solid grey; background-image: url("../img/aside-img.jpg"); background-repeat: no-repeat; background-size: contain; } 여기에서 난 높이를 px로 주기싫다 반응형시 골치아프기 떄문이다. height를 또 따로주기 싫다 .그럼 padding을 이용하자!! 동적으로 변하니 말이다. 그럼 여기에서 padding: 30% 0; 의 의미는 몰까? 부모너비의 30%를 padding으로 쓰겠다는 것이다. 예를 들면, 부모너비가 1000 px일때 1000 * 0.3이므로 300px가 나온다. ..
1. .aside-banner { width: 100%; padding: 30% 0; margin-top: 15px; border: 1px solid grey; background-image: url("../img/aside-img.jpg"); background-repeat: no-repeat; background-size: contain; } 여기에서 난 높이를 px로 주기싫다 반응형시 골치아프기 떄문이다. height를 또 따로주기 싫다 .그럼 padding을 이용하자!! 동적으로 변하니 말이다. 그럼 여기에서 padding: 30% 0; 의 의미는 몰까? 부모너비의 30%를 padding으로 쓰겠다는 것이다. 예를 들면, 부모너비가 1000 px일때 1000 * 0.3이므로 300px가 나온다. ..