퍼블리싱 (5) 썸네일형 리스트형 기본요소 📌 기본 장면 구성요소(4) 1. Sence 장면,무대 2. Mesh 메쉬 - Geometry(모양) + Material(재질) 3. Camera 4. Light 📌 렌더링 순서 ✅ canvas 가져와서 렌더링 화면으로 지정하기 - 사이즈 : window.innerWidth, window.innerHeigth ✅ Scene 만들기 ✅ Camera 설정하기 ---> Scene 추가하기 ✅ Mesh 설정하기 ---> Scene 추가하기 ✅ 렌더링 👉 canvas : 렌더링 되는 공간 ✅ canvas 렌더링 화면으로 지정하기 const canvas = document.querySelector('#canvas'); const renderer = new THREE.WebGLRenderer({ canvas }); .. SVG 기본 사용법 📌 SVG를 넣는 방법 1. 2. CSS Background 3. SVG요소들을 직접 inline 삽입 4. 5. ❌ 6. ❌ 📌 SVG 크기 설정 기본 설정 [상대비율] viewBox : x좌표 y좌표 width비율 height비율 👉 svg : 500 x 500 크기 고정 👉 : viewBox의 값에 따라 상대크기로 적용 됨. 📌 SVG 압축 inline 코드 압축하기 svgom 검색 -> Paste markup 붙여넣기 -> copy -> html 붙이기 [html/css] 로그인 페이지 만들기2 글래스 느낌의 로그인 페이지 구현하기 01 예제 디자인 02 마크업 해보기 Good Morning Welcome back! 뒤로가기 Log in Email Password Remember ID Log in Forgot Password? Don't have an account? Sign up 03 CSS 적용하기 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); * { box-sizing: border-box; padding: 0; margin: 0; } body { width: 100%; height: 100vh; font-family: 'Roboto', sans-serif; font-s.. [javascript]회원가입 페이지 구현하기 회원가입 페이지 구현하기 [Javascript] 구현할 내용 1. 핸드폰 번호 기입 시 자동으로 다음 칸 넘어가기 2. 핸드폰 번호 전체 기입 시 인증번호 전송 버튼 활성화시키기 / 토큰 생성 후 화면 표출 / 3분 타이머 시작 / 인증완료 버튼 활성화 3. 3분 이내 클릭 시 '인증 완료' alert 창 생성 / 3분 지나면 전체 초기화 4. 가입하기 버튼 클릭 시 전체 유효성 검사(오류 메시지 표출) 5. 검증 완료 후 가입 축하 메시지 alert 창 생성 1. 핸드폰 번호 기입 시 자동으로 다음 칸 넘어가기 1) 핸드폰 번호 칸 [3자리]-[4자리]-[4자리] 2) 핸드폰 번호를 담는 변수 3) input 안의 value값을 확인해서 자릿수 조건을 만족하면 다음 칸으로 이동 - 각 칸의 숫자의 길이.. [html]로그인 페이지 만들기-form, label, input 로그인 페이지 만들기 ※중요) 기억해야 될 태그 : type = "text", "password", "submit", "checkbox" 01 예제 디자인 02 예제 속 필요한 태그 알아보기 Login : Email 적는 칸 : Password 적는 칸 : 아이디 저장하기 : , login 버튼 : 03 마크업 해보기 Login 아이디 저장하기 1. 부모 태그 안에 태그를 자식으로 넣어 마크업 한다. 2. placeholder는 입력 필드에 사용자가 어떤 값을 입력해야 하는지를 간략하게 알려주는 역할을 한다. 단어 혹은 짧은 문구가 들어가며 사용자가 입력하는 즉시 사라진다. 3. 태그의 for=""와 태그의 id=""를 동일하게 적어 연결시켜주면, checkbox 혹은 '아이디 저장하기' 둘 중 아무거나.. 이전 1 다음
