자바스크립트와 웹 프론트엔드 - 이미지 갤러리 만들기

다음 강의 보기: 이미지 선택 기능 만들기 동영상 다시보기 이 강의 동영상에 대한 의견 보내기

강의노트
질문 (6)

이미지 갤러리 만들기

이미지 갤러리 틀 만들기

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;
}