이전에 공부하던 부분부터 이어서 플레이할 수 있습니다.
이어서 보기 처음부터 보기

이미지 갤러리 틀 만들기

Part 1. 갤러리 틀 만들기

  1. JSON으로 갤러리에 표시될 이미지 리스트 가져오기
    • 파트 14. Networking 강의 참고
  2. 배열에서 개별 이미지에 접근
    • 파트 6. 배열, 파트 9. 반복문 참고
  3. 갤러리에 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;
}