1. 완성본 완성 본 2. 설명 CSS로 3D를 만져보는것이 익숙하지 않아 꽤나 애먹었다. HTML 구조는 다음과 같다. CSS 코드 중에 content 클래스안에 있는 내용을 주목할 필요가 있다. prospective는 3차원 위치 관점을 제공하기 위해, Z=0인 평면과 사용자 사이의 거리를 결정한다. 쉽게 말하면 원근법을 제공한다는 뜻이다. 값은 무조건 0, 양수 값이어야 한다. 그리고 padding-top 속성 값을 변화시켜 줄 때마다 위에서 보는 관점의 변화가 생겼는데, 왜 그런지는 모르겠다. 나머지는 읽어보면 어떤식으로 돌아가는지 이해할 수 있을 것이다. *{ box-sizing: border-box; } html{ font: 10px; } body{ margin: 0; padding: 0; w..

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의 블록이 있고..