1. 완성본 이번 강의에서 만들 완성본 영상입니다. 2. HTML, CSS 이번에는 스케치 없이도 바로 구조가 어떻게되있는지 알 수 있기 때문에 따로 하지 않겠습니다. 그래서 먼저 HTML과 CSS를 이용해서 다음과 같은 메뉴 디자인만 만들어보려고 합니다. 코드는 다음과 같습니다(CSS 헷갈리시는 분들을 위해 약간의 주석을 달아놓았습니다.). HTML Menu Slide Menu 1 Menu 2 Menu 3 Menu 4 Menu 5 Menu 6 CSS // 전체 태그에 box-sizing을 적용합니다. box-sizing에 border 박스를 하면 // 전체 픽셀을 유지한 채로 padding이나 border의 크기만을 늘릴 수 있습니다. // 예를 들면, 가로 300px, 세로, 300px의 블록이 있고..

1. 완성본 이번 강의에서 만들 모달 창 영상입니다. 2. HTML 구조 짜기 구조를 짜기전에 내가 어떻게 설계할 것인지에 대하여 스케치를 해보는 것이 중요하다고 생각합니다. 지금처럼 간단한 프로젝트의 경우, 머릿 속으로 짜는 것도 중요하지만, 직접 그려보는 것은 더 중요하다고 생각해요. 그래서 저는 모달창 구현을 위해 다음과 같이 스케치를 해보았습니다. 그림을 보시면 ① BODY와 ② MODAL 이라는 구역으로 나뉘어져 있다는 것을 알 수 있습니다. BODY는 HTML을 조금이라도 공부하셨으면, 어떤 것을 의미하는지 아실겁니다. 결론적으로 MODAL은 BODY안에 수평 수직으로 가운데 정렬이 되어있고, 각각 스위치를 하나씩 가지고 있다는 것을 알 수 있습니다(BODY는 OPEN이라는 스위치를 가지고 있..