코드 정리/an exercise1 프론트엔드 예제 (1) Overwatch 캐릭터 선택 html과 css만 이용하여 간단한 overwatch 캐릭터 선택 예제를 만들었다. https://warm-kataifi-1e2fe8.netlify.app/ display: flex; flex-wrap: wrap; justify-content: center; => hero 각 아이템들의 자연스러운 줄 바꿈 처리와 수평 정렬. 캐릭터 박스 크기보다 이미지의 크기가 커서 넘치는 부분은 overflow: hidden; 적용 캐릭터에 마우스를 올렸을 때 배경 색상과 크기가 커지는데 다른 형제 요소보다 위에 위치할 수 있도록 :hover를 적용한 코드에 z-index: 1; 적용 가로 값이 존재하는 요소의 margin: auto; 로 작성하면 수평 가운데 정렬됨. transition: transform .1s ,.. 2022. 11. 24. 이전 1 다음