07-30

수정완료

HTML

1. 인트로모달 내용 수정
2. 프론트모달, 백모달, 개발모달 생성 및 수정
3. 포트폴리오1 텍스트 수정
4. 앱카드 내용 변경
5. Contact Me를 개발자와 대화하기로 수정 및 자동응답 멘트 변경 SCSS
6. 변수 --circlr-red, -yellow, -green 추가
7. 라이트모드용 SCSS 적용
8. body에 light 클래스가 들어갔을 때 토글버튼에 트랜지션과 변경 추가.
9. blackOn 클래스를 삭제하고, display:none을 제거, visibility 로 변경, z-index:0으로 수정
10. 필요없는 주석 제거.
11. 인트로모달에 word-wrap 과 word-break 추가.
12. 모달의 포지션을 fixed로 변경
13. 종료했을 때 프레임만 남는걸 수정하기 위해 transition 전부 삭제
14. 인트로모달에 overflow-y: auto를 줘서 모바일화면에서 화면스크롤이 가능하게 변경. 10.인트로모달 모바일화면에서 화면 높이에 따른 미디어쿼리 생성 JS
15. 다크모드(라이트모드)용 스크립트 추가
16. 기존의 jQuery를 수정

• 헤더메뉴 클릭했을 때 is-active의 적용에 대해서 수정
• main-header-link를 클릭했을 때 is-active 클래스 적용을 배열로 클래스를 받아다가 배열별로 적용하는 형태로 제작함.

3. 다중모달에 대해서 스크립트 생성 완료

수정해야 할 사항

1. search-bar input에 focus 되었을 때 .header에 .wide 클래스 추가하는 부분을 javascript로 만들기, search-bar input에 blur 되었을 때 .header에 .wide 클래스 제거하기

• 문제점이 javascript에서 jQuery의 .focus()와 .blur()와 같은 동작을 할 수 있는 상태로 만들어야 할 것 같음. 이 부분에서 동작에 문제가 발생함.

2. Tablet, Mobile을 클릭했을 때 screen 값이 변경될 수 있도록 수정하기

• Tablet과, Mobile을 눌렀을 때 window의 크기가 아니면 .wrap의 크기가 자동으로 변경될 수 있도록 수정하기. -- 현재는 그냥 짤려버림. 짤리는 상태가 아니라 원하는 크기로 지정했을 때 그 크기에 맞게 반응형으로 수정되는 상태로 만들기.

3. 인트로모달에서 모바일화면처럼 높이를 줄였을 때 title부분이 짤리는 현상이 있음.

• 이 부분을 해결할지 아니면 가만히 둘지에 대해서 고민해보기. -- 현재는 일정높이 이하일 때 margin-top: 40%를 적용한 상태임.

07-29

1. 다크모드의 토글을 참고해서 버튼의 on/off에 대해서 어떻게 적용할 것인지 생각해보기.
2. .search-bar input에 포커스가 되었을 때와 blur가 되었을 때의 상태를 jQuery에서 Javascript로 변경하기.

07-27

수정완료

1. introModal에서 생년월일 > 연도 혹은 월까지 표기
2. 모달 닫기 했을 때 텍스트 사라지고 나서 창 닫히는 문제 수정
3. 모달 닫기버튼 정상적으로 동작하도록 변경. --> bodyBlackWrap을 눌렀을 때는 정상작동하지 않음. 모달창 선택 관련해서 문제가 있음. --> 모달창 관련해서 필요없는 클래스는 삭제 처리함. --> 해결은 클래스이름으로 불러온 뒤 배열의 순서대로 for 구문을 이용해서 처리함. ModalBtn[n]을 눌렀을 때 popupModal[n]을 호출하는 식으로 제작. 종료또한 closeBtn[n]을 클릭했을 때 bodyBlackWrap과 popupModal[n]이 종료될 수 있도록 제작함.

bodyBlackWrap의 z-index도 1000에서 0으로 변경함.

4. 모바일 화면에서 introModal의 타이틀이 위로 올라가버림 --> overflow-y: auto로 해결함. -->> 높이에 미디어쿼리를 적용해서 일정 높이 이하일 때 margin-top을 추가함.
5. 다크모드 적용하기(라이트모드) --> 라이트모드 적용 완료.

수정해야 할 사항

1. SCSS의 최상단에 목차 만들기.
2. 컨텐츠 메인 메뉴에서 Desktop이나 Tablet같은 메뉴를 눌렀을 때 .wrap의 너비 조정하기?

07-25

1. HTML과 CSS만 이용해서 제작한 소개 영역의 텍스트 애니메이션
2. Contact Me를 누르면 나타나는 채팅창과 텔레그램과 채팅 연동.

07-23 기본적인 틀 완성 후 새로 생성.