[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(2)

🔥 핫딜 페이지(2) 여기서는 제품 상세 페이지와 결제 페이지 장바구니 기능등을 소개 할 예정이다. 모든 모달 뒷 배경은 흐리게 만들어 사용자가 모달 창에 집중할 수 있게 만들었다. 1️⃣제품 상세 모달 제품 상세를 모달로 띄우는데는 어려움이 없었다. 핫딜 페이지에서 상품을 클릭하면 props로 상품의 id값을 넘겨줘서 그 상품에 대한 정보를 axios 호출을 해주면 되었기 때문이다. 또한 UI상으로 제품 상세 모달이 나왔는데 뒷 배경에 스크롤이 있으면 이상하다고 생각하여 스크롤을 막고 없애버렸다. // shoppingDetail 모달 생기면 뒷 배경 스크롤 막는 함수 useEffect(() => { if (isOpenModal === true) { document.body.style.cssText = ..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(1)

🔥 핫딜 페이지 핫딜 페이지에는 제품 상세 모달, 장바구니 모달, 결제 모달까지 한 페이지 안에서 결제까지 할 수 있도록 만들었다. 초반 기획을 했을 때 최소한으로 페이지를 만들자고 해서 대부분을 모달로 만들었다. (그러지 말았어야 했다.) 1️⃣ 수정 전 핫딜 페이지 처음에 기획할 때는 원래 이런 페이지가 아니였다. 이전까지의 프로젝트와 비슷한 느낌의 쇼핑몰을 만들려고 했으나 막상 다 만들고 나니 너무 허전했다. 기능도 이전 프로젝트와 다를게 없었고 차별화 되는 느낌이 없었다. 그리고 기간도 아직 많이 남아 있어서 삭제하고 다시 만들었다. (이전 파일은 배포 과정에서 삭제하는 바람에 없어졌다..) 2️⃣ 수정 후 핫딜 페이지 사용한 라이브러리: react-daum-postcode(우편번호 검색), Sw..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 2주차 회고록 - CSS

1️⃣오늘 배운 것은... 이번주는 css에 대해서 배웠다. 짧은 시간에 많은 내용을 배웠지만 수업시간에 실습을 많이 해보니 잘 이해가 됐다. 특히 나는 css선택자에 대해 몰랐던 부분이 많았는데 이번 기회에 확실 하게 알게 된 것 같아 기뻤다.😊 지금까지 선택자에 대해 "한번 제대로 배우고 정리해 둬야지" 라고 생각을 계속하고 있었는데 시간을 따로 내면서 정리하기가 꽤나 귀찮았었다. 그래서 써먹을 때마다 인터넷에서 일일이 찾고 또 까먹고 했었는데 정리를 확실히 해야겠다.🔥 2️⃣CSS 1. ">"는 바로 하위 자식 요소만 해당 div>ul>.orange { color: orange } 2. 공백은 하위 모든 자식들 해당 div .orange { background-color: red; } 3. 일치하는..

• format_list_bulleted 포스코x코딩온
• · 2023. 7. 13.
• textsms

반응형 웹 만들기

1. 개요 졸업작품 페이지를 줄이고 늘릴때마다 정렬되지 않는 모습을 보고 언젠가는 반응형 웹을 만들어야 겠다고 생각했다. 한번도 해보지 않은 영역이였기 때문에 좀 제대로 배우고 난 뒤 도전하고 싶었는데.. 이렇게 미루다간 계속 미룰것 같아서 바로 실행에 옮겼다. 2. 반응형 웹이란? 쉽게 말해 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말합니다. 어떠한 상황에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 만드는 웹입니다. 데스크탑 PC, 태블릿PC, 스마트 폰등 크기에 따라 크게 3가지로 나뉠 수 있습니다. 이렇게 PC에서만 쓰이는 웹을 모바일로도 쓰이게 되면서 더 많은 이용자들이 사용할 수 있게 되었습니다. 반응형 웹의 장정 1. 유지보수가 간편하다 2. 모바일 사용..

• format_list_bulleted 카테고리 없음
• · 2023. 4. 16.
• textsms

CSS - 박스 가운데 정렬

1. 가장 기본적인 가운데 정렬 margin: 0 auto; 가장 많이 쓰는 가운데 정렬이다. 자신의 넓이를 정한다음에 사용하면 저절로 가운데 정렬이 된다. 1) 해당 박스가 inline 속성인 경우 2) 폭의 연산이 불가능하면 가운데 정렬을 할 수 없다. 이러한 경우에는 다른 방법을 써야한다 2. flex를 이용한 가운데 정렬 justify-content: center;// 수평 중앙 align-items: center;// 수직 중앙 flex를 이용한 가운데 정렬을 하려면 해당 박스에 display: flex를 하고 justify-content: center를 해야한다. 만약 박스가 2개 이상 있다면 중앙을 기준으로 같은 거리에 떨어진다. 수평뿐 아니라 수직으로도 정렬을 하고 싶다면 추가로 align..

• format_list_bulleted CSS
• · 2022. 12. 27.
• textsms