<aside> 💡 깃허브

데모 웹사이트

</aside>

<aside> 💡 목차

</aside>

HTML과 CSS는 간략하게 다루고 자바스크립트 위주로 글을 작성하겠습니다

<aside> 💡 요약 : 이미지 5장을 가지고, 서브 이미지 박스에서 이미지를 클릭하면 가운데 큰 이미지가 해당 클릭된 이미지로 바뀌는 이미지 갤러리 구현 추가적으로 다크 모드 버튼을 누르면 토글 버튼으로 써 다크 모드와 라이트 모드 구현

</aside>

1. HTML

• HTML 코드
• HTML 코드 설명

2. CSS

• CSS 코드

CSS 코드는 헷갈렸던 부분만 설명하겠습니다.

container 박스에 border-radius를 줬는데 처음에 작동하지 않았습니다.

그래서 생각했던 게 main-container 박스에서 아래와 같이

border-top-left-radius: 5px;
border-top-right-radius: 5px;

일일이 코딩을 했었습니다. 마찬가지로

sub-container 박스에 아래와 같이

border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

주었었는데, 나중에 리팩토링을 하면서 학습을 통해서

그동안 다른 사람 코드에서 overflow:hidden이 왜 이리 많이 들어가나 싶었는데 (이론은 알고 있었지만 실제로 많은 페이지들을 인스펙션해서 overflow 속성을 지워도 차이를 못 느끼는 경우가 있어서 정확한 학습이 어려웠었음)