Notice
Recent Posts
Recent Comments
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Today
In Total
관리 메뉴

A Joyful AI Research Journey🌳😊

[7] 230202 개인 프로젝트 (1) 7일 차 Thu) 로그인 화면 진행 중 (2) 메인 화면 진행 중 (1) 본문

💖My Bootcamp Projects Logs✨/Individual project 1️⃣

[7] 230202 개인 프로젝트 (1) 7일 차 Thu) 로그인 화면 진행 중 (2) 메인 화면 진행 중 (1)

yjyuwisely 2023. 2. 2. 09:19

230202 Thu 25th class [7th day for portfolio :)]


우선 해야할 것은

1) 로그인 페이지: 화면 설계 완료하기

2) 메인 화면: 게시판(공지사항), 슬라이드쇼 추가한다.
- 드롭다운 메뉴로 수정하기 (완료)
https://www.w3schools.com/howto/howto_css_dropdown.asp
https://www.w3schools.com/howto/howto_css_mega_menu.asp
모두 투어 메뉴 참고한다.
https://www.modetour.com/main/default.aspx

 

How To Create a Mega Menu

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

여행은 모두투어

여행은 모두투어

www.modetour.com


3) 슬라이드 쇼 이미지, 아이콘 등 디자인 부분 완료한다.
- 슬라이드 쇼 사이즈 조절

4) 회원 가입 페이지
- 약관 (내용 보기) 추가

5) - 라디오 버튼: 커스텀하기 
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_radio
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox

- 비밀번호 입력시 글자 보이게 하는 아이콘 
- 버튼 눌렀을 때 윤곽 글자색 변경 효과

6) - tabindex 추가한다.

https://www.daleseo.com/html-tabindex/

7) 페이지 아이콘 넣기

https://dasima.xyz/html-title-%EC%9D%B4%EB%AF%B8%EC%A7%80-icon/

 

HTML title 이미지 또는 icon 적용하는 방법 - dasima

HTML title 이미지 또는 icon을 표시하는 방법은 무엇일까요? 이미지 파일을 ico 확장자로 변경후 link 태그에 링크시키면 됩니다. 이 때 rel 속성및 type 속성에 몇 가지 속성값을 추가해주면 됩니다.

dasima.xyz


그 후 

1) 회원가입 입력 검증 유효성 검사
비밀번호 입력시 글자 보이게 하는 아이콘 누르면 적은 비밀번호와 경고 문장들이 나온다.

2) (필수)약관 전체 동의 (선택) 약관 전체 동의
if 전체 동의시동의 시 check box 3개 선택, 선택 동의 시 checkbox 2개 선택 
if 3개 선택시선택 시 전체 동의 클릭됨, 2개 선택 시 선택 동의 클릭됨
참고) 
https://gangzzang.tistory.com/entry/%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%ACjQuery-%EC%84%A0%ED%83%9D%EC%9E%90
https://emessell.tistory.com/149
https://openlife.tistory.com/381

https://openlife.tistory.com/381

3)약관 보기 눌렀을 때 제이쿼리 slideUp slideDown 기능쓰기 

4) 슬라이드쇼: More 누르면 그 정보 페이지로 이동 
동구 사이트 참고 
https://www.donggu.ulsan.kr/tour/cmm/main/mainPage.do

 

| 울산광역시 동구 문화관광축제

 

www.donggu.ulsan.kr


오늘은 메인 화면 메뉴, 슬라이드 쇼 이미지 넣었고
로그인, 회원가입 화면은 완료했다. 
최대한 빨리 마치고 다른 주제의 프로젝트도 하고 싶다!:)


메뉴 눌렀을 때

 

728x90
반응형
Comments