diff --git a/Create_Account.css b/Create_Account.css new file mode 100644 index 0000000..0b92156 --- /dev/null +++ b/Create_Account.css @@ -0,0 +1,120 @@ +/* CSS for centering the section */ +body { + + display: flex; + align-items: center; + justify-content: center; + + height: 100vh; + /* Full viewport height */ + margin: 0; +} + +section { + position : absolute; + top:100px; + width: 640px; + height: 618px; + opacity: 1; + gap: 40px; +} + +article.logo { + display: flex; + align-items: center; + justify-content: center; +} + +.logo img#logo { + width: 396px; + height: 132px; +} + +.logIn_webForm p { + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 26px; + text-align: left; +} + +.logIn_webForm input { + width: 640px; + height: 56px; + border-radius: 5px; + background: #F3F4F6; + font-size: 20px; + border: solid 0px black; + text-indent: 1em; +} + +.logIn_webForm input:focus { + border: solid 5px skyblue; + outline: none; +} + +.logIn_webForm button { + margin: 15px 0px; + width: 100%; + height: 56px; + background: #9CA3AF; + color: white; + border-radius: 40px; + font-size : 18px; + font-weight: bold; +} + + + +nav ul { + list-style-type: none; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + background: #E6F2FF; + padding: 15px 20px; +} + +nav ul li { + display: inline-flex; + align-items: center; +} + +nav ul li#link { + margin-left: 15px; + margin-right: auto; +} + +nav ul li#diff_web_logIn { + margin-right: 5px; +} + +nav ul li#diff_web_logIn img { + border-radius: 40px; + padding: 10px; + width: 30px; + height: 30px; +} + +nav ul li#diff_web_logIn img#Google { + background: white; /* Background for Google logo */ +} + +nav ul li#diff_web_logIn img#Kakao { + background: #F5E14B; /* Background for Kakao logo */ +} + +nav ul li#link a { + font-family: Pretendard; + font-size: 16px; + font-weight: 900; + line-height: 26px; + text-align: center; + text-decoration: none; + color: #1F2937; +} + +nav p{ + text-align:center; +} \ No newline at end of file diff --git a/Create_Account.html b/Create_Account.html new file mode 100644 index 0000000..6398fe4 --- /dev/null +++ b/Create_Account.html @@ -0,0 +1,66 @@ + + + + + + 판다마켓-회원가입 + + + + +
+ +
+
+ + +

이메일

+ + + + + +

닉네임

+ + + + + +

비밀번호

+ + + + + +

비밀번호 확인

+ + + + + + + + +
+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/FAQ.html b/FAQ.html new file mode 100644 index 0000000..9b3b598 --- /dev/null +++ b/FAQ.html @@ -0,0 +1,14 @@ + + + + + + + FAQ + + + + + + + \ No newline at end of file diff --git a/Footer/SNS.jpg b/Footer/SNS.jpg new file mode 100644 index 0000000..f365a09 Binary files /dev/null and b/Footer/SNS.jpg differ diff --git a/Footer/SNS_Instagram.jpg b/Footer/SNS_Instagram.jpg new file mode 100644 index 0000000..321ad3a Binary files /dev/null and b/Footer/SNS_Instagram.jpg differ diff --git a/Footer/SNS_Youtube.jpg b/Footer/SNS_Youtube.jpg new file mode 100644 index 0000000..220ba27 Binary files /dev/null and b/Footer/SNS_Youtube.jpg differ diff --git a/Footer/SNS_facebook.jpg b/Footer/SNS_facebook.jpg new file mode 100644 index 0000000..f71b74a Binary files /dev/null and b/Footer/SNS_facebook.jpg differ diff --git a/Footer/SNS_twitter.jpg b/Footer/SNS_twitter.jpg new file mode 100644 index 0000000..898fe3d Binary files /dev/null and b/Footer/SNS_twitter.jpg differ diff --git a/Index.html b/Index.html new file mode 100644 index 0000000..45bfaab --- /dev/null +++ b/Index.html @@ -0,0 +1,93 @@ + + + + + + + + + + + + 판다마켓 + + + +
+
+ + 로그인 +
+
+ +
+
+
+ 일상의 모든 물건을 거래해 보세요. + +
+ +
+
+ +
+
+
+ + +
+

Hot item

+

인기 상품을 확인해보세요.

+

가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요.

+
+
+
+ + +
+
+ +
+

Searchr

+

구매를 원하는 상품을 검색하세요

+

구매하고 싶은 물품은 검색에서 쉽게 찾아보세요

+
+ +
+
+ + +
+
+ +
+

Register

+

판매를 원하는 상품을 등록하세요.

+

어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요

+
+
+
+
+
+
+

믿을 수 있는 판다마켓 중고거래

+ +
+
+ + + + \ No newline at end of file diff --git a/Item.html b/Item.html new file mode 100644 index 0000000..d606565 --- /dev/null +++ b/Item.html @@ -0,0 +1,14 @@ + + + + + + + Item + + + + + + + \ No newline at end of file diff --git a/Privacy.html b/Privacy.html new file mode 100644 index 0000000..4c32b47 --- /dev/null +++ b/Privacy.html @@ -0,0 +1,14 @@ + + + + + + + Privacy + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index ec627db..8c223bc 100644 --- a/README.md +++ b/README.md @@ -1,50 +1,46 @@ -# 🐼 판다마켓 프로젝트 +# 요구사항 +___ +## 기본 +___ +1. 랜딩 페이지 + - [o] React와 같은 UI 라이브러리를 사용하지 않고 진행합니다. + - [o] PC 사이즈만 고려해 주어진 디자인으로 구현합니다. + - [o/△] HTML, CSS 파일을 Netlify로 배포해 주세요. (참고: [https://www.codeit.kr/learn/5309](https://www.codeit.kr/learn/5309)) => 최종 결과물 URL (https://6726ffec2d4baf69497f7299--fandamarket.netlify.app/) + - [△] 랜딩 페이지의 URL path는 루트(‘/’)로 설정합니다. (href의 속성값을 상대경로로 넣으라는 뜻인지 확인 필요) + - [o] title은 “판다마켓”로 설정합니다. + - [o] “판다마켓” 로고 클릭 시 루트 페이지(‘/’)로 이동합니다. + - [o] '로그인' 버튼 클릭 시 로그인 페이지(‘/login’)로 이동합니다. (빈 페이지) + - [o] “구경하러 가기” 버튼 클릭 시(’/items’)로 이동합니다. (빈 페이지) + - [o] “Privacy Policy”, “FAQ”는 클릭 시 각각 Privacy 페이지(‘/privacy’), FAQ 페이지(‘/faq’)로 이동합니다. (모두 빈 페이지) + - [o] 페이스북, 트위터, 유튜브, 인스타그램 아이콘을 클릭 시 각각의 홈페이지로 새로운 창이 열리면서 이동합니다. + - [o] 아래로 스크롤해도 “판다 마켓” 로고와 “로그인” 버튼이 있는 상단 내비게이션 바(Global Navigation Bar)가 최상단에 고정되게 해 주세요. + - [o] 화면의 너비가 1920px 이상이면 하늘색 배경색은 너비를 꽉 채우도록 채워지고, 내부 요소들의 위치는 고정되고, 여백만 커지도록 합니다. + - [o] 화면의 너비가 1920px 보다 작아질 때, “판다마켓” 로고의 왼쪽 여백 200px, “로그인" 버튼의 오른쪽 여백 200px이 유지되고, 화면의 너비가 작아질수록 두 요소 간 거리가 가까워지도록 설정합니다. + - [o] 화면의 너비가 1920px 이상이면 내부에 있는 요소 간 동일한 간격을 유지하며 가운데 정렬해야 합니다. + - [o] 화면의 너비가 1920px 보다 작아질 때, 최하단에 있는 “codeit-2024”의 왼쪽 여백 200px과 SNS 아이콘들의 오른쪽 여백 200px을 유지하면서 가운데 있는 “Privacy Policy”, “FAQ” 요소와 각각 동일한 간격을 유지하며 가까워져야 합니다. + - [o] 클릭으로 기능이 동작해야 하는 경우, 사용자가 클릭할 수 있는 요소임을 알 수 있도록 CSS 속성 `cursor: pointer`로 설정합니다. + +2. 로그인, 회원가입 페이지 공통 + - [o] “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다. + - [o] 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다. + - [o] SNS 아이콘들은 클릭 시 각각 “https://www.google.com/”, “https://www.kakaocorp.com/page/” 으로 이동합니다. + - [o] input 요소에 focus in 일 때, 테두리 색상은 `#3692FF`입니다. + - [o] input 요소에 focus out 일 때, 테두리는 없습니다. + +3. 로그인 페이지 + - [o] “회원가입” 버튼 클릭 시 “/signup” 페이지로 이동합니다. + +4. 회원가입 페이지 + - [o] “로그인” 버튼 클릭 시 “/login” 페이지로 이동합니다. +___ +## 심화 + - [X] reset.css를 설정해 주세요. + - [X] 사용자의 브라우저 설정에 따라 기본 폰트 크기 설정이 변화함에 따라서 페이지의 요소 간 간격, 요소의 크기, font-size 등 모든 크기와 관련된 값이 크고 작아지도록 설정해 주세요. + - [X] palette에 있는 color 값들을 CSS 변수로 등록해서 사용합니다. + - [X] 구글 애널리틱스로 방문자 수 확인하기 할 수 있도록 설정합니다. + - [X] 비밀번호, 비밀번호 확인 input 요소 오른쪽에 비밀번호를 확인할 수 있는 눈 모양 아이콘을 추가합니다. +___ +## 스크린샷 + +![이미지 설명](이미지 경로 또는 URL) -> _이 저장소는 판다마켓 프로젝트의 프론트엔드 코드를 관리하는 곳입니다. 프로젝트를 클론하여 개발 환경을 설정하고, 각 브랜치에서 해당 스프린트 미션을 수행해 주세요!_ 🛠️ - -## 소개 - -안녕하세요! 판다마켓 프로젝트에 오신 것을 환영합니다! 🥳 -판다마켓은 따뜻한 중고거래를 위한 커뮤니티 플랫폼이에요. 여러분은 이곳에서 상품을 등록하고, 다른 사용자들과 소통하며, 자유롭게 이야기를 나눌 수 있어요. 매주 스프린트 미션을 통해 기능을 하나씩 만들어 가며 성장해 나가는 여정을 함께해요. 🚀 - -![PandaMarket](https://github.com/user-attachments/assets/3784b99f-73c9-4349-a9a9-92b2a7563574) -_위 이미지는 판다마켓의 대표 이미지입니다._ 📸 - -## 스프린트 미션이란? 🤔 - -스프린트 미션은 **하나의 개인 프로젝트를 길게 진행하면서, 그 과정에서 주기적으로 피드백을 받을 수 있는 시스템**이에요. 각 스프린트마다 배운 이론을 적용해 보고, **멘토님께 코드 리뷰를 받아가며 실력을 쑥쑥 키워갈 수 있는 중요한 개인 과제**랍니다. 💪 - -## 주요 기능 ✨ - -1. **상품 등록**: 내가 가진 물건을 올리고, 사진과 설명을 추가해 직접 판매할 수 있어요! -2. **문의 댓글**: 상품에 대한 궁금한 점이나 의견을 자유롭게 남길 수 있답니다. 📝 -3. **자유게시판**: 다양한 주제로 친구들과 이야기를 나누고, 정보를 공유할 수 있는 공간이에요! 🗣️ - -## 프로젝트 브랜치 구조 🏗️ - -프로젝트는 단계별로 나뉘어 있고, 각 스프린트 미션에 맞는 브랜치가 있어요. 각 브랜치를 통해 체계적으로 개발하며 학습할 수 있어요. 🎯 - -### 브랜치 설명 - -1. **basic (part1): 스프린트 미션 1 ~ 4 FE 요구사항** - - - 기본적인 웹 애플리케이션 기능 구현을 위한 초기 브랜치입니다. HTML, CSS, JavaScript 등을 사용해 기본을 다집니다. - - **스프린트 미션 1부터 4까지**의 프론트엔드 내용을 포함하고 있어요. - -2. **react (part2): 스프린트 미션 5 ~ 7 FE 요구사항** - - - React 라이브러리를 사용해 프론트엔드 기능을 구현하는 브랜치입니다. 컴포넌트 기반 아키텍처와 상태 관리를 배웁니다. - - **스프린트 미션 5부터 7까지, 그 이후**의 프론트엔드 내용을 포함하고 있어요. - - 만약 스프린트 미션 9부터 프론트엔드 코드를 Next가 아닌 React로 구현하고 싶다면 react 브랜치를 사용해요. - -3. **next (part3,4): 스프린트 미션 8 FE 요구사항~** - - - Next.js를 사용해 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등 고급 기능을 구현합니다. - - **스프린트 미션 8부터** 시작하는 프론트엔드 내용을 포함하고 있어요. - - 만약 스프린트 미션 9부터 프론트엔드 코드를 React가 아닌 Next로 구현하고 싶다면 next 브랜치를 사용해요. - -> _스프린트 미션 내 백엔드 요구사항은 [백엔드 레포지토리](https://github.com/codeit-sprint-fullstack/4-sprint-mission-be)의 브랜치에서 관리해주세요_ - ---- - -본 프로젝트는 [코드잇](https://www.codeit.kr)의 소유이며, 교육 목적으로만 사용됩니다. © 2024 Codeit. All rights reserved. diff --git "a/Rectangle_2993/\355\214\220\353\213\244\353\247\210\354\274\223\354\202\260\354\261\205.jpg" "b/Rectangle_2993/\355\214\220\353\213\244\353\247\210\354\274\223\354\202\260\354\261\205.jpg" new file mode 100644 index 0000000..d08d661 Binary files /dev/null and "b/Rectangle_2993/\355\214\220\353\213\244\353\247\210\354\274\223\354\202\260\354\261\205.jpg" differ diff --git a/Section1/Register.jpg b/Section1/Register.jpg new file mode 100644 index 0000000..29c4a4a Binary files /dev/null and b/Section1/Register.jpg differ diff --git a/Section1/search.jpg b/Section1/search.jpg new file mode 100644 index 0000000..d89c22e Binary files /dev/null and b/Section1/search.jpg differ diff --git a/Section1/section1_img1.jpg b/Section1/section1_img1.jpg new file mode 100644 index 0000000..965e25c Binary files /dev/null and b/Section1/section1_img1.jpg differ diff --git a/footer.css b/footer.css new file mode 100644 index 0000000..1ca2a93 --- /dev/null +++ b/footer.css @@ -0,0 +1,71 @@ +footer { + width: 100%; + height: 200px; + padding: 32px 0; /* Remove fixed horizontal padding */ + background: #111827; +} + +footer ul#menubar { + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + padding: 0 200px; /* Horizontal padding for the entire list */ + margin: 0; +} + +footer ul#menubar li { + color: white; + font-size: 2.4em; +} + +footer ul#menubar li#left { + margin-right: auto; /* Left-aligned */ +} + +footer ul#menubar li#center { + display: flex; + gap: 30px; /* Space between Privacy Policy and FAQ */ +} + +footer ul#menubar li#right { + display: flex; + gap: 10px; /* Space between SNS icons */ + margin-left: auto; /* Right-aligned */ +} + +footer ul#menubar li a { + text-decoration: none; + color: white; + cursor: pointer; +} + +footer ul#menubar li#right img { + width: 40px; /* Icon size */ + height: 40px; /* Icon size */ + transition: transform 0.2s; /* Smooth hover effect */ +} + +footer ul#menubar li#right img:hover { + transform: scale(1.1); /* Enlarge icon on hover */ +} + +/* Responsive design adjustments */ +@media (max-width: 1920px) { + footer { + padding: 32px 0; /* Keep top and bottom padding */ + } + + footer ul#menubar { + padding: 0 200px; /* Maintain left and right padding */ + } + + footer ul#menubar li#center { + flex-grow: 1; /* Allow center items to take available space */ + justify-content: center; /* Center-align the center items */ + } + + footer ul#menubar li#right { + margin-left: 0; /* Adjust right items */ + } +} diff --git a/gnb.css b/gnb.css new file mode 100644 index 0000000..4c714c9 --- /dev/null +++ b/gnb.css @@ -0,0 +1,53 @@ + + +header.gnb { + position: relative; + width: 100%; /* 전체 너비를 차지하도록 설정 */ + height: auto; /* 필요에 따라 높이 자동 조정 */ + padding: 10px 20px; /* 기본 좌우 여백 */ + box-sizing: border-box; /* 패딩을 포함한 너비 계산 */ + background: w; /* 하늘색 배경 */ + display: flex; /* Flexbox로 내부 요소 배치 */ + align-items: center; /* 세로 중앙 정렬 */ + border-bottom: 1px solid #DFDFDF; /* 하단 경계선 */ +} + +header.gnb div#Frame_2609410 { + display: flex; + justify-content: space-between; /* 로고와 버튼 간의 간격 확보 */ + align-items: center; /* 세로 중앙 정렬 */ + width: 100%; /* Frame의 너비를 부모 요소에 맞춤 */ + max-width: 1920px; /* 최대 너비 제한 */ + margin: 0 auto; /* 중앙 정렬 */ +} + +header.gnb div#Frame_2609410 img#logo { + width: 300px; /* 로고 크기 */ + height: 100px; +} + +header.gnb div#Frame_2609410 span#btn_small_48 { + display: inline-block; + width: 100px; + height: 48px; + padding-top: 18px; + background: #3692FF; + color: white; /* 버튼 글자색 */ + font-family: Pretendard; + font-size: 16px; + font-weight: 600; + line-height: 26px; + text-align: center; + border-radius: 8px; + margin-left: auto; /* 버튼을 오른쪽으로 밀어줌 */ + cursor: pointer; +} + +/* 화면 너비가 1920px 이상일 때 */ +@media (min-width: 1920px) { + header.gnb { + padding: 10px 100px; /* 좌우 여백 증가 */ + } +} + + diff --git a/gnb/Group 19.png b/gnb/Group 19.png new file mode 100644 index 0000000..086534b Binary files /dev/null and b/gnb/Group 19.png differ diff --git a/gnb/Group 19@2x.png b/gnb/Group 19@2x.png new file mode 100644 index 0000000..41b8699 Binary files /dev/null and b/gnb/Group 19@2x.png differ diff --git a/gnb/Group 19@3x.png b/gnb/Group 19@3x.png new file mode 100644 index 0000000..94c6311 Binary files /dev/null and b/gnb/Group 19@3x.png differ diff --git a/log_in.css b/log_in.css new file mode 100644 index 0000000..dfbcef3 --- /dev/null +++ b/log_in.css @@ -0,0 +1,118 @@ +/* CSS for centering the section */ +body { + + display: flex; + align-items: center; + justify-content: center; + + height: 100vh; + /* Full viewport height */ + margin: 0; +} + +section { + width: 640px; + height: 618px; + opacity: 1; + gap: 40px; +} + +article.logo { + display: flex; + align-items: center; + justify-content: center; +} + +.logo img#logo { + width: 396px; + height: 132px; +} + +.logIn_webForm p { + font-family: Pretendard; + font-size: 18px; + font-weight: 700; + line-height: 26px; + text-align: left; +} + +.logIn_webForm input { + width: 640px; + height: 56px; + border-radius: 5px; + background: #F3F4F6; + font-size: 20px; + border: solid 0px black; + text-indent: 1em; +} + +.logIn_webForm input:focus { + border: solid 5px skyblue; + outline: none; +} + +.logIn_webForm button { + margin: 15px 0px; + width: 100%; + height: 56px; + background: #9CA3AF; + color: white; + border-radius: 40px; + font-size : 18px; + font-weight: bold; +} + + + +nav ul { + list-style-type: none; + margin: 0; + display: flex; + justify-content: space-between; + align-items: center; + background: #E6F2FF; + padding: 15px 20px; +} + +nav ul li { + display: inline-flex; + align-items: center; +} + +nav ul li#link { + margin-left: 15px; + margin-right: auto; +} + +nav ul li#diff_web_logIn { + margin-right: 5px; +} + +nav ul li#diff_web_logIn img { + border-radius: 40px; + padding: 10px; + width: 30px; + height: 30px; +} + +nav ul li#diff_web_logIn img#Google { + background: white; /* Background for Google logo */ +} + +nav ul li#diff_web_logIn img#Kakao { + background: #F5E14B; /* Background for Kakao logo */ +} + +nav ul li#link a { + font-family: Pretendard; + font-size: 16px; + font-weight: 900; + line-height: 26px; + text-align: center; + text-decoration: none; + color: #1F2937; +} + +nav p{ + text-align:center; +} \ No newline at end of file diff --git a/log_in.html b/log_in.html new file mode 100644 index 0000000..b9d4f74 --- /dev/null +++ b/log_in.html @@ -0,0 +1,52 @@ + + + + + + 판다마켓-로그인화면 + + + + +
+ +
+
+ + +

이메일

+ + + + + +

비밀번호

+ + + + + + + + +
+
+
+ + + +
+ + + + \ No newline at end of file diff --git a/log_in/google_logo.jpg b/log_in/google_logo.jpg new file mode 100644 index 0000000..be65465 Binary files /dev/null and b/log_in/google_logo.jpg differ diff --git a/log_in/kakao_logo.jpg b/log_in/kakao_logo.jpg new file mode 100644 index 0000000..16c66aa Binary files /dev/null and b/log_in/kakao_logo.jpg differ diff --git a/log_in/login_logo.jpg b/log_in/login_logo.jpg new file mode 100644 index 0000000..3d3b142 Binary files /dev/null and b/log_in/login_logo.jpg differ diff --git a/section1.css b/section1.css new file mode 100644 index 0000000..fba2eff --- /dev/null +++ b/section1.css @@ -0,0 +1,55 @@ +section#section1 { + display: flex; /* Flexbox 사용 */ + flex-direction: column; /* 세로 방향으로 배치 */ + justify-content: flex-end; /* 아래쪽 정렬 */ + align-items: center; /* 수평 중앙 정렬 */ + position: relative; + width: 100%; + height: 540px; + gap: 0px; + opacity: 1; /* 불투명도 조정 */ + background: rgba(207, 229, 255, 1); +} + +section#section1 div#section1_box { + display: flex; + justify-content: center; /* 중앙 정렬 */ + align-items: center; + width: 1110px; /* 고정 너비 설정 */ + height: 397px; + opacity: 1; /* 불투명도 조정 */ +} + +section#section1 div#section1_box button#cta_button { + width: 200px; /* Slightly larger button */ + height: 60px; + justify-content: center; /* 중앙 정렬 */ + align-items: center; + background-color: #3692FF; /* Blue background for the button */ + color: #FFFFFF; /* White text */ + border: none; + border-radius: 8px; + font-size: 18px; + font-weight: 600; + cursor: pointer; + text-align: center; /* Center text in button */ + line-height: 60px; /* Vertically center text */ +} + +section#section1 div#section1_box span { + display: block; + font-family: Pretendard; + font-size: 40px; /* 원래 크기로 복원 */ + font-weight: 700; /* 원래 굵기로 복원 */ + line-height: 56px; + text-align: left; + background-color: #CFE5FF; + color: #374151; /* 원래 색상으로 복원 */ +} + +section#section1 div#section1_box img { + width: 746px; /* 이미지 너비 설정 */ + height: 397px; /* 이미지 높이 설정 */ + opacity: 1; /* 불투명도 조정 */ + object-fit: cover; /* 비율 유지하면서 잘림 방지 */ +} diff --git a/section2.css b/section2.css new file mode 100644 index 0000000..7297c26 --- /dev/null +++ b/section2.css @@ -0,0 +1,201 @@ +section#section2 { + display: flex; /* Flexbox 사용 */ + flex-direction: column; /* 세로 방향으로 배치 */ + align-items: center; /* 중앙 정렬 */ + justify-content: center; /* 중앙 정렬 */ + width: 100%; /* 전체 너비 사용 */ + padding: 20px; /* 필요한 패딩 추가 */ + gap: 20px; /* 각 article 사이의 간격 조정 */ + opacity: 1; /* 불투명도 조정 */ +} + +section#section2 div#article1 { + display: flex; /* Flexbox 사용 */ + justify-content: center; /* 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + width: 1110px; /* 고정 너비 */ + height: auto; /* 높이를 자동으로 설정 */ + gap: 20px; /* 간격 조정 */ + opacity: 1; /* 불투명도 조정 */ +} + +section#section2 div#article1 div#a1_box { + display: flex; /* Flexbox 사용 */ + width: 988px; /* 고정 너비 */ + height: auto; /* 높이를 자동으로 설정 */ + gap: 20px; /* 간격 조정 */ + margin: 0 auto; /* 중앙 정렬을 위해 자동 마진 설정 */ +} + +section#section2 div#article1 div#a1_box img { + width: 588px; /* 이미지 크기 조정 */ + height: auto; /* 높이를 자동으로 설정하여 비율 유지 */ + object-fit: cover; /* 이미지가 잘리지 않게 크기 조정 */ +} + +section#section2 div#article1 div#a1_box div#text_box { + display: flex; /* Flexbox 사용 */ + flex-direction: column; /* 세로 정렬 */ + justify-content: center; /* 중앙 정렬 */ + width: auto; /* 자동 너비 설정 */ + height: auto; /* 자동 높이 설정 */ + padding: 10px; /* 패딩 추가 */ + background: #FFFFFF; + border-radius: 8px; /* 모서리 둥글게 */ +} + +section#section2 div#article1 div#a1_box div#text_box p#title { + font-family: Pretendard; + font-size: 30px; /* 원래 크기로 복원 */ + font-weight: 700; /* 원래 굵기로 복원 */ + line-height: 26px; + text-align: left; + color: rgba(54, 146, 255, 1); +} + +section#section2 div#article1 div#a1_box div#text_box p#content { + font-family: Pretendard; + font-size: 40px; /* 원래 크기로 복원 */ + font-weight: 700; /* 원래 굵기로 복원 */ + line-height: 56px; + letter-spacing: 0.02em; + text-align: left; + color: rgba(55, 65, 81, 1); +} + +section#section2 div#article1 div#a1_box div#text_box p#description { + font-family: Pretendard; + font-size: 24px; /* 원래 크기로 복원 */ + font-weight: 500; /* 원래 굵기로 복원 */ + line-height: 32px; + text-align: left; + color: #374151; +} + +/* 두번째 Article2 부분 */ +section#section2 div#article2 { + display: flex; /* Flexbox 사용 */ + justify-content: center; /* 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + width: 1110px; /* 고정 너비 */ + height: auto; /* 높이를 자동으로 설정 */ + gap: 20px; /* 간격 조정 */ + opacity: 1; /* 불투명도 조정 */ +} + +section#section2 div#article2 div#a2_box { + display: flex; /* Flexbox 사용 */ + width: 988px; /* 고정 너비 */ + height: auto; /* 높이를 자동으로 설정 */ + gap: 20px; /* 간격 조정 */ + margin: 0 auto; /* 중앙 정렬을 위해 자동 마진 설정 */ +} + +section#section2 div#article2 div#a2_box img { + width: 588px; /* 이미지 크기 조정 */ + height: auto; /* 높이를 자동으로 설정하여 비율 유지 */ + object-fit: cover; /* 이미지가 잘리지 않게 크기 조정 */ +} + +section#section2 div#article2 div#a2_box div#text_box { + display: flex; /* Flexbox 사용 */ + flex-direction: column; /* 세로 정렬 */ + justify-content: center; /* 중앙 정렬 */ + width: auto; /* 자동 너비 설정 */ + height: auto; /* 자동 높이 설정 */ + padding: 10px; /* 패딩 추가 */ + background: #FFFFFF; + border-radius: 8px; /* 모서리 둥글게 */ +} + +section#section2 div#article2 div#a2_box div#text_box p#title { + font-family: Pretendard; + font-size: 30px; /* 원래 크기로 복원 */ + font-weight: 700; /* 원래 굵기로 복원 */ + line-height: 26px; + text-align: left; + color: rgba(54, 146, 255, 1); +} + +section#section2 div#article2 div#a2_box div#text_box p#content { + font-family: Pretendard; + font-size: 40px; /* 원래 크기로 복원 */ + font-weight: 700; /* 원래 굵기로 복원 */ + line-height: 56px; + letter-spacing: 0.02em; + text-align: left; + color: rgba(55, 65, 81, 1); +} + +section#section2 div#article2 div#a2_box div#text_box p#description { + font-family: Pretendard; + font-size: 24px; /* 원래 크기로 복원 */ + font-weight: 500; /* 원래 굵기로 복원 */ + line-height: 32px; + text-align: left; + color: #374151; +} + +/* 세번째 Article3 부분 */ +section#section2 div#article3 { + display: flex; /* Flexbox 사용 */ + justify-content: center; /* 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + width: 1110px; /* 고정 너비 */ + height: auto; /* 높이를 자동으로 설정 */ + gap: 20px; /* 간격 조정 */ + opacity: 1; /* 불투명도 조정 */ +} + +section#section2 div#article3 div#a3_box { + display: flex; /* Flexbox 사용 */ + width: 988px; /* 고정 너비 */ + height: auto; /* 높이를 자동으로 설정 */ + gap: 20px; /* 간격 조정 */ + margin: 0 auto; /* 중앙 정렬을 위해 자동 마진 설정 */ +} + +section#section2 div#article3 div#a3_box img { + width: 588px; /* 이미지 크기 조정 */ + height: auto; /* 높이를 자동으로 설정하여 비율 유지 */ + object-fit: cover; /* 이미지가 잘리지 않게 크기 조정 */ +} + +section#section2 div#article3 div#a3_box div#text_box { + display: flex; /* Flexbox 사용 */ + flex-direction: column; /* 세로 정렬 */ + justify-content: center; /* 중앙 정렬 */ + width: auto; /* 자동 너비 설정 */ + height: auto; /* 자동 높이 설정 */ + padding: 10px; /* 패딩 추가 */ + background: #FFFFFF; + border-radius: 8px; /* 모서리 둥글게 */ +} + +section#section2 div#article3 div#a3_box div#text_box p#title { + font-family: Pretendard; + font-size: 30px; /* 원래 크기로 복원 */ + font-weight: 700; /* 원래 굵기로 복원 */ + line-height: 26px; + text-align: left; + color: rgba(54, 146, 255, 1); +} + +section#section2 div#article3 div#a3_box div#text_box p#content { + font-family: Pretendard; + font-size: 40px; /* 원래 크기로 복원 */ + font-weight: 700; /* 원래 굵기로 복원 */ + line-height: 56px; + letter-spacing: 0.02em; + text-align: left; + color: rgba(55, 65, 81, 1); +} + +section#section2 div#article3 div#a3_box div#text_box p#description { + font-family: Pretendard; + font-size: 24px; /* 원래 크기로 복원 */ + font-weight: 500; /* 원래 굵기로 복원 */ + line-height: 32px; + text-align: left; + color: #374151; +} diff --git a/section3.css b/section3.css new file mode 100644 index 0000000..4b41cc7 --- /dev/null +++ b/section3.css @@ -0,0 +1,40 @@ +section#section3 { + display: flex; /* Flexbox 사용 */ + flex-direction: column; /* 세로 방향으로 배치 */ + justify-content: flex-end; /* 아래쪽 정렬 */ + align-items: center; /* 수평 중앙 정렬 */ + position: relative; + width: 100%; /* 전체 너비 사용 */ + height: 540px; + gap: 0px; /* 간격 설정 */ + opacity: 1; /* 불투명도 조정 */ + background: rgba(207, 229, 255, 1); /* 배경색 설정 */ +} + +section#section3 div#section3_box { + display: flex; /* Flexbox 사용 */ + justify-content: center; /* 중앙 정렬 */ + align-items: center; /* 수직 중앙 정렬 */ + width: 1110px; /* 고정 너비 설정 */ + height: 397px; /* 고정 높이 설정 */ + gap: 69px; /* 요소 간격 설정 */ + opacity: 1; /* 불투명도 조정 */ + margin: 0 auto; /* 중앙 정렬을 위해 자동 마진 설정 */ +} + +section#section3 div#section3_box p { + font-family: Pretendard; /* 폰트 설정 */ + font-size: 40px; /* 원래 크기로 복원 */ + font-weight: 700; /* 원래 굵기로 복원 */ + line-height: 56px; /* 줄 높이 설정 */ + text-align: left; /* 왼쪽 정렬 */ + background-color: #CFE5FF; /* 배경색 설정 */ + color: #374151; /* 원래 색상으로 복원 */ +} + +section#section3 div#section3_box img { + width: 746px; /* 이미지 너비 설정 */ + height: 397px; /* 이미지 높이 설정 */ + opacity: 1; /* 불투명도 조정 */ + object-fit: cover; /* 비율 유지하면서 잘림 방지 */ +} diff --git a/section3/section3.jpg b/section3/section3.jpg new file mode 100644 index 0000000..af15a72 Binary files /dev/null and b/section3/section3.jpg differ