프로젝트 소개'크몽' 사이트를 모델링 한 프로젝트이다.강사로서 혹은 유저로서 강의를 소비하거나 등록할 수 있는 커머스 사이트로 이름은 'Wemong'이라 지었다.기간 : 2022.11.28 ~ 2022.12.09➡️ 프로젝트 깃허브 레포지토리 바로가기➡️ 프로젝트 노션 페이지 바로가기 팀 소개프론트엔드 4명김호준 : 메인 페이지 레이아웃, 강의 리스트 자동 생성 구현홍석현 : 로그인 및 회원가입, 강의 검색창 및 필터링 기능 구현윤수민(PM) : 강의 상세페이지, 강의 선택 조건을 서버에 전송하는 기능 구현이상윤(나) : Toss Payments 외부 API를 이용한 결제 기능 구현백엔드 2명한상엽, 김수정 개발 도구 및 적용 기술 (+트렐로)프론트엔드JavaScript(ES6)React.jsstyled..

프로젝트 소개'피리마켓' '필리' 사이트를 모델링 한 프로젝트로, 약과 건강식품을 판매하는 커머스 사이트를 백지 상태에서 구현하였다.건강을 먹다는 의미로 사이트의 이름을 'HealthEat(헬스잇)'으로 지었다.기간 : 2022.11.14 ~ 2022.11.25➡️ 프로젝트 깃허브 레포지토리 바로가기➡️ 프로젝트 노션 페이지 바로가기 팀 소개프론트엔드 3명우석민 : Nav 바, 스토어 페이지 구현이상윤(나) : 메인 페이지, 상품 상세 페이지 구현이혜원 : 로그인 페이지, 회원가입 페이지 구현백엔드 2명이은영 : 찜하기 기능 구현조상원(PM) : 로그인, 제품조회 기능 구현  개발 도구 및 적용 기술 (+트렐로)프론트엔드JavaScript(ES6)React.jsSassReact-router-domFont..

CSS 레이아웃의의 중요한 개념인 Position과 Block에 대해 정리해보고자 한다. 참고로 말로 풀어서 글처럼 작성하지 않고, 항목별로 개념을 분류하여 정리하였다. CSS - Display 속성 : Block과 Inline CSS의 display 속성은 화면에 여러 요소들을 어떻게 배치할 지 결정한다. 웹페이지의 레이아웃(layout)을 결정한다고 해도 무방하다. div { display: block; } ✨ Block VS Inline Block block 태그 옆엔 다른 요소가 올 수 없다. block은 높이(height)와 너비(width)를 가진다. block은 Box이고, 여백과 관련된 3가지 중요한 특징을 가진다.(inline도 가지고 있는 특징이다. 상하 margin만 제외하고) : m..

HTML 요소는 Semantic 요소와 Non Semantic 요소로 구분할 수 있다. 여거서 Semantic 요소란 의미가 부여된 요소를 의미한다. 웹 개발자가 웹 사이트를 구축할 때 각 요소가 가지는 '의미'를 HTML 태그에 직접 부여하여 코드를 작성하는 것이 중요하다. 하나의 예시를 통해 그 이유를 간단히 짚어보자. 웹페이지에 이미지를 불러오는 2가지 방법으로 ' 태그를 사용하는 방법'과 ' 태그에 background-image 속성을 추가하는 방법'이 있다. (다른 방법도 있겠지만 여기선 이 두 가지만을 고려하기로 한다.) 여기서 태그는 그 이름에 '이미지'라는 의미가 담겨 있는 Semantic Tag이다. 이런 Semantic Tag를 이용하여 코드를 작성하면 태그 이름만으로 이 요소가 어떤 ..

개발자 도구 (DevTool) 란? 개발자 도구란 개발자들이 홈페이지를 수정하고 발생한 문제의 원인을 쉽게 파악하기 위해 브라우저에서 제공하는 도구이다. 윈도우나 맥에서 F12를 클릭하면 열 수 있으며, 웹 개발자들은 보통 개발자 도구를 열어놓고 작업을 하는 경우가 굉장히 많기 때문에, 웹 개발자가 개발자 도구의 사용법을 잘 아는 것은 중요하다. 개발자 도구에는 여러 개의 패널이 존재한다. 이 각 패널의 기능을 잘 숙지하여 적절한 상황에 알맞은 패널을 활용하도록 하자. 이번엔 가장 많이 쓰는 패널 4개의 기능에 대해 정리를 해보고자 한다. Elements 패널 HTML과 CSS 코드를 분석하고 실시간으로 이를 수정할 수 있는 패널이다. 사이트의 구조를 파악하는 데 용이하다. (CSS 코드를 확인할 수 있..