이미지 갤러리 만들기
이미지 갤러리 틀 만들기
Part 1. 갤러리 틀 만들기
- JSON으로 갤러리에 표시될 이미지 리스트 가져오기
- 파트 14. Networking 강의 참고
- 배열에서 개별 이미지에 접근
- 파트 6. 배열, 파트 9. 반복문 참고
- 갤러리에 Image 추가
- 파트 12. DOM + JS 강의 참고
style.css
body{
overflow: hidden;
}
.image{
position:relative;
float: left;
height: 200px;
width:300px;
margin : 2px;
border: 1px solid white;
z-index:0;
}
.image-selected{
border: 1px solid black;
background-color:white;
}
.image-selected > img{
opacity: 0.5;
}
.image > img{
height:100%;
}
.image-magnified{
z-index:1;
}
.image-magnified > img{
height:400px;
width:600px;
margin-left:-150px;
margin-top:-100px;
opacity:0.95;
}
