precamp 2

[precamp] 회원가입 폼 파이널 과제

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

web/toy project 2023.03.06

[precamp] 나만의 싸이월드 생성하기

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

web/toy project 2023.03.06