11.26 실습

[kyung412]

[내용] 저번 수업 시간 masonry_grid 참조 이미지 사이즈 서로 다르게 변경하기 선생님 주신 자료를 토대로 자바스크립트 구조보면서 이해하기 키오스크 만들어보기(html+css+js)

[grid 이미지 사이즈 수정] https://kyung412.github.io/goorm_study/html/masonry_grid.html

[키오스크 만들기]

1. 이미지 오류(이미지 불러오기 오류 발생_해결함)
2. 키오스크 하단의 결제 탭(수정해야 함)
   • 수량과 합계 사이 간격 조정
   • 한 화면에 버튼까지 다 나오지 않고 짤림
   • 추가만 만들어서 한번 누르면 총합만 올라감(취소도 되게 만들기...) https://kyung412.github.io/goorm_study/html/kyung_kiosk.html

[회고] 오늘은 js의 구조에 대한 이해에 중점을 두고 실습을 진행했고, 기본적인 기능은 넣었지만 하고 보니 취소는 안되네?하는 생각이 들었다.ㅎㅎ 또한, css부분에서 생각하는대로 나오지 않아 답답한 부분이 존재했다.. 다시 한번 코드보면서 수정해야할 듯 싶다.

[kyung412]

[추후 수정사항 재정리]

1. 전반적으로 간격 조정
2. product-info css 다시 조정
3. 키오스크 하단의 결제 탭
   • js 취소, 삭제 기능 추가(그에 따른 html+css 수정)
   • 한 화면에 버튼까지 다 나오지 않고 짤리는 현상 해결하기

[RunaUXLabs]

어제 코멘트에 따라 갤러리 수정도 했군요, 좋아요 👏 기능을 넣다보니 내가 알고있는 기능들을 더 넣어보고 싶어지고, 그것이 공부로 이어지죠. css가 반영되게 하는건 내일!😉내용에 나와요!ㅎㅎㅎ 버튼이 잘리는 이유는 fixed를 써서 그렇습니다. 화면을 부모삼아 배치되는 fixed자식(absolute도 마찬가지)은 피그마의 ignore 처리하는것처럼 면적인식이 안되기 때문에 화면을 넘어가면 넘어간대로 잘려요. 그래서 position 식구들을 이용하는 것 보단 vh, vw, calc()를 이용해서 화면에 꽉차게, 바닥에 딱 붙게 css를 설계하면 좋습니다. 면적도 인식되고, 원하는 레이아웃도 구성하구요!