image gallery 만들기

css 링크 걸기

  <link rel="stylesheet" href="style.css" />

초기화 (*)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;}

image gallery 만들기

@import url('https://fonts.googleapis.com/
css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
h1 {
  text-align: center;
  margin-top: 50px;
}
/* 이미지 갤러리 스타일링 */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery .images {
  gap: 15px; /*테두리 사이 여백*/
  max-width: 85%;
  margin: 40px 0;
  columns: 5 310px; /*5열 컬럼을 만든다 화면 사이즈 5*310px 안될경우 자동으로 줄어듬 */
  list-style: none;
}
.gallery .images .img {
  display: flex;
  cursor: pointer;
  overflow: hidden;/*안에 있는 이미지가 밖으로 나올때 안보이게 함*/
  position: relative;
  margin-bottom: 14px;
  border-radius: 4px;/*둥근 테두리*/
}
.gallery .images img {
  width: 100%;
  transition: transform 0.2s ease;
}
.gallery .images .img:hover img {
  transform: scale(1.1);

▶기타
https://unsplash.com/ko 무료 이미지 저장
https://boxicons.com/ 박스 아이콘