[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(2)

1️⃣ 두번째 페이지 메인페이지를 만들고 또 다른 페이지를 각각 맡아서 제작하기로 했다. 나는 그중에서 페스티벌 페이지를 담당했고 디자인을 먼저 고려했다. 지역을 선택할 수 있는 필터를 만들고 그 아래에는 슬라이드를 사용해서 현재 진행중인 페스티벌을 보여줄 계획했다. 특히 이번 슬라이드는 스와이퍼를 사용해서 만들었다. 처음써보는 라이브러리라서 커스텀이 어디까지가능하고 사용 방법이 어떤지 몰랐기 때문에 기대됬다. 2️⃣ 스와이퍼 사용 방법 스와이퍼를 불러오는 방법은 2가지가 있다. https://swiperjs.com/get-started Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slide..

• format_list_bulleted 프로젝트
• · 2023. 7. 29.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1)

1️⃣ 프로젝트 소개 우리팀은 '국내 주류'와 관련된 정보를 소개해주는 서비스를 계획했다. 크게 주요 페이지는 4개로 나눴고 부가 서비스 페이지는 5개로 만들었다. 주요 페이지 - 메인페이지, 지역별로 보기 페이지, 주류 MBTI 페이지, 주류 페스티벌 페이지 부가 페이지 - 로그인 및 회원가입 페이지, 상품후기 페이지, 공지사항 페이지, 1:1문의 페이지, FAQ 페이지 이렇게 나눈 페이지를 각각 나눠서 맡고 메인페이지만 같이 만들었다. 메인페이지를 만들때도 서로 코드가 겹치지 않게 section별로 나눠서 각각 만들었다. 나는 이중에서 Main페이지의 section-2를 만들었고 주류 페스티벌 페이지, 상품후기 페이지, 1:1 문의 페이지를 만들었다. 뒤로 갈 수록 페이지의 퀄리티가 떨어진다...😂(..

• format_list_bulleted 프로젝트
• · 2023. 7. 27.
• 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