TechLabs

1. 나만의 다이어리 만들기2. 나만의 웹사이트 만들기기능구현 여부상품을 3 X 4 형태로 잘 배열하기.O마우스를 올렸을 때 살짝 검음 화면 위에 상품 정보를 부드럽게 변화를 주면서 보여주기.O해더 만들고 웹사이트 제목에 애니메이션 주기.O메뉴바 만들고, 마우스 올릴 때마다 변화를 부드럽게 주기.O웹사이트 가로 사이즈가 작아질 때 상품 정보를 사진 아래에 보여주기.O웹사이트 가로 사이즈가 작아질 때 메뉴바를 해더 밑에 붙여주기.O 3. 수료증 발급

1. 트랜스폼과 트랜지션 동시에 이용하기 - 트랜스폼을 이용하여 화면에 변화를 줄 수 있다. - 트랜지션을 이용하여 변화를 부드럽게 보여줄 수 있다. 마우스 올렸을 때 트랜스폼을 이용하여 translateY로 글자를 위로 올려버린다. 자연스러운 움직임을 위하여 트랜지션을 이용한다. 글자 마다 늦어지는 속도가 다르기 때문에, 모든 글자에 다 다른 transition-delay를 넣어준다. 이런 식으로 동시에 이용하면 부드러운 변화를 생성할 수 있다. 2. 웹사이트 상품 리스트 만들기 필요한 기능 1. 4 x 3 정렬시키기. 2. 마우스를 올리면 화면 살짝 까매지면서 커지게 만들기. 살짝 까만 화면과 투명도 이용하면 된다. 3. 마우스를 올리면 상품 정보 올라오게 만들기. 투명도를 이용하면 된다. 내가 만들..

1. html 구조 파악하기 위의 그림을 기준으로 더 세분화하였다. container 안에 wrapper를 넣어서 조정하는게 훨씬 flex를 다루기에 편리하다. 2. html 코드 위의 그림 기준으로 html 코드를 생성하였다. 3. css 코드 위에서부터 아래로, 큰 부분부터 작은 부분으로 css 코드를 생성하였다. 4. javascript 코드 추가해야 하는 기능 기능 구현 여부 휴대전화 3 - 4 - 4로 구현하기. 앞 칸이 모두 채워지면 다음 칸으로 커서가 이동하도록 하기. O 휴대전화 모두 입력하면 인증번호 전송 버튼이 활성화되고, 버튼 누르면 인증번호 보여주기. 3분 타이머도 실행하기. O 휴대전화 모두 입력 시 인증번호 전송 버튼 활성화 제외 인증확인 버튼 활성화하기. 3분 이내에 버튼 누르..

precamp의 내용을 바탕으로 더 추가하여 나만의 싸이월드를 생성하였다. 나만의 싸이월드 제작하기 1. 싸이월드 전체 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기. 3. 싸이월드 오른쪽 박스에서 Home 박스 제작하기. 4. 싸이월드 오른쪽 박스에서 Game 박스 제작하기. 5. 싸이월드 오른쪽 박스에서 JukeBox 박스 제작하기. 6. 버튼 생성하고, 기능 추가하기. 1. 싸이월드 전체 구조화하기 나만의 싸이월드 만들기 전에 html로 웹페이지 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기 - 구조화한 것을 바탕으로 id 값 지정하기. - background-color 이용하여 원하는 자리에 잘 넣어보기. - flex를 이용하는 경우에 부모 박스를 이용하여 자식 박스를 정렬함을 잊지 말기. 그래서..