기초공사 (html,css,javascript)

// Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, nihil! 나는 none이다. Nisi nostrum harum delectus sed placeat alias sunt quo quia debitis iste, deleniti repellendus! Error? // 이 css에서 .none:hover { display: block; background-color: aquamarine; 에서 궁금증 자체요소:hover와 display:none에대해 ... 검색 : hover와 display:none관계 일반적으로 생각하면 그렇게 될 것 같지만, CSS의 작동 원리에 따라 실제로는 그렇게 작동되지 않는다. 'hover'는 마..

//

// 아카데미 / css / day04 / 1_css배경.html 테스트로 해볼것. #circle { width: 48px; /* px단위는 4px 단위로 올려주는게 빠르다. */ height: 48px; border-radius: 50%; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 4px; background-color: aquamarine; /* ---내가 테스트--- */ padding: 20px; /*=>이걸주면 border까지 총 92px가 된다 하지만 box-sizing:border-box를 체크하면 padding과 border까지 합한 48px가 된다.*/ border: 2px solid red..

// https://meyerweb.com/eric/tools/css/reset/ CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter meyerweb.com

// 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가 나온다. ..