Todo

• html, css, js 만을 이용하여 내 앨범을 웹 사이트로 만들어보자
• 매 스텝마다 앨범의 구조/기능을 수정/확장 시켜나가자
• 어느정도 모양이 갖춰지면 -> Web Accessibility Checking

Process

1. 어떤 기능을 제공할지?
2. 레이아웃 구성
3. HTML
4. CSS
5. JS

1. 기능

• 년월 선택시, 해당 년월에 해당하는, 웹 소스의 로컬 저장소에 있는 이미지를 화면에 보여줌

└ 폴더 구조

• 사진들을 찍었던 시기를 년/월로 구분해서 폴더를 구성
• 사용자가 년/월을 선택하면 해당하는 년월 폴더에 있는 사진들이 화면에 나타냄
• 해당하는 년/월에 사진파일이 없다면 해당되는 사진이 없다고 알림

2. 레이아웃

└ 년/월 선택

└ 선택시 보여지는 화면

└ 해당하는 년/월에 저장된 이미지가 없을 경우

3. HTML

<input
        type="month"
        id="calendar"
        name="calendar"
        onchange="imgSelector(this.id)"
      /><br />
<label id="emptyImg">이미지가 존재하지 않습니다.</label>
<div class="imgGroup" id="2021-12">
	<img src="image/2021/12/KakaoTalk_20220111_144937222.jpg" alt="2021_12_img_0" />
    	<img src="image/2021/12/KakaoTalk_20220111_144937222_01.jpg" alt="2021_12_img_1" />
     	 ...
</div>
<div class="imgGroup" id="2021-11">
 ...
</div>
 ...

• 모든 폴더에 해당하는 이미지들을 미리 html 코드로 만들어 놓음
• <input>으로 선택된 년/월 값을 받아서 해당하는 년/월을 <div>의 id 값으로 매칭
• 해당 <div>를 보여주는 것을 on/off 하는 방식으로 구성

4. CSS

.imgGroup {
  margin: 0 auto;
  height: 130px;
  width: 90vw;
  white-space: nowrap;
  overflow-x: scroll;
  display: none;
}
/* white-space: nowrap; -> 해당하는 요소의 줄바꿈 x */
/* overflow-x: scroll; -> 수평 스크롤 */

div img{
  height: 100px;
  width: 200px;
  object-fit: scale-down;
  display: inline-block;
}

• 최초에 이미지를 감싸고 있는 모든 <div>를 display:none
• 선택한 년/월에 해당되는 <div> 의 id가 있을 시 display:block 으로 변경

5. JS

const imgSelector = id => {
        let groups = document.getElementsByClassName('imgGroup');
        Array.from(groups).forEach((element) => {
          element.style.display = 'none';
        });
        document.getElementById('emptyImg').style.display = 'none';
        let selectedImg = document.getElementById(document.getElementById(id).value);
        if (selectedImg) selectedImg.style.display = 'block';
        else document.getElementById('emptyImg').style.display = 'block';
      };

• 새로운 년/월 값을 받아옴
• imgGroup 클래스의 <div> 즉, 이미지를 가지고 있는 <div> 들을 받아옴
• 이 <div>들을 모두 display:none 으로 초기화
• 선택한 년/월에 해당되는 <div> 의 id가 있을 시 display:block 으로 변경

Conclusion

1. 결론
2. TakeAway
3. Next Step?

1. 결론

• 로컬 이미지를 추가할 때 마다 로컬 이미지 뿐만 아니라 코드도 추가해야함
• 로컬에 있는 사진만 확인 가능

2. TakeAway

• JS code ...

let groups = document.getElementsByClassName('imgGroup');
Array.from(groups).forEach((element) => {
    element.style.display = 'none';
});

여기서 groups 는 type이 Array가 아닌 HTMLCollection 즉, 유사 배열 객체(array-like object)이기 때문에 foreach 문을 사용하기 위해 Array.from(groups).forEach()로 유사 배열 객체를 배열로 얕게 복사하여 foreach()를 사용했다.

3. Next Step

• 로컬 서버를 생성하여 동적으로 이미지 파일을 받아오기

---