diff --git a/src/components/Box/Box.jsx b/src/components/Box/Box.jsx index 01ffd3c..e1caa0b 100644 --- a/src/components/Box/Box.jsx +++ b/src/components/Box/Box.jsx @@ -15,6 +15,12 @@ const boxStyle = css` gap: 10px; padding: 0 20px; box-sizing: border-box; + + @media (max-width: 768px) { + width: 170px; /* 작은 화면에서 박스 크기 줄이기 */ + height: 170px; + padding: 0 15px; /* 패딩 조정 */ + } `; const imageStyle = css` @@ -22,6 +28,15 @@ const imageStyle = css` display: flex; flex-direction: row-reverse; gap: 5px; + + img { + width: 60px; /* 기본 이미지 크기 */ + height: auto; + + @media (max-width: 768px) { + width: 30px; /* 작은 화면에서 이미지 크기 줄이기 */ + } + } `; const titleStyle = css` @@ -33,6 +48,11 @@ const titleStyle = css` line-height: normal; letter-spacing: -1.56px; padding-top: 10px; + + @media (max-width: 768px) { + font-size: 18px; /* 작은 화면에서 제목 크기 줄이기 */ + padding-top: 5px; + } `; const contentStyle = css` @@ -45,6 +65,12 @@ const contentStyle = css` letter-spacing: -1.17px; padding-top: 5px; padding-bottom: 10px; + + @media (max-width: 768px) { + font-size: 12px; /* 작은 화면에서 내용 크기 줄이기 */ + padding-top: 3px; + padding-bottom: 5px; + } `; const Box = ({ images, title, content }) => { diff --git a/src/pages/Home/BetatestBanner/BetatestStyle.js b/src/pages/Home/BetatestBanner/BetatestStyle.js index 6db5574..29170c2 100644 --- a/src/pages/Home/BetatestBanner/BetatestStyle.js +++ b/src/pages/Home/BetatestBanner/BetatestStyle.js @@ -28,16 +28,16 @@ export const containerStyle = css` export const title = css` color: white; - font-family: 'Pretendard-Bold'; - font-size: 30px; - font-style: normal; - font-weight: 600; - line-height: 2.4rem; - letter-spacing: -1.6px; - text-align: center; + font-family: 'Pretendard-Bold'; + font-size: 30px; + font-style: normal; + font-weight: 600; + line-height: 2.4rem; + letter-spacing: 0px; + text-align: center; @media (max-width: 768px) { - font-size: 22px; + font-size: 20px; } `; @@ -75,8 +75,8 @@ export const buttonStyle = css` border: none; border-radius: 5px; cursor: pointer; - transition: background-color 0.3s; - font-family: 'Pretendard-Bold'; + transition: background-color 0.3s; + font-family: 'Pretendard'; &:hover { background-color: #dd4526; diff --git a/src/pages/Home/Feature.jsx b/src/pages/Home/Feature.jsx index a75d6fa..47c9408 100644 --- a/src/pages/Home/Feature.jsx +++ b/src/pages/Home/Feature.jsx @@ -20,13 +20,13 @@ const containerStyle = css` @media (max-width: 768px) { h1 { - font-size: 24px; + font-size: 22px; } p { - font-size: 15px; + font-size: 14px; } img { - width: 70%; + width: 90%; } } `; diff --git a/src/pages/Home/Feature2.jsx b/src/pages/Home/Feature2.jsx index a305403..ad8b12d 100644 --- a/src/pages/Home/Feature2.jsx +++ b/src/pages/Home/Feature2.jsx @@ -21,7 +21,7 @@ const containerStyle = css` @media (max-width: 768px) { padding: 4rem 1rem; p { - font-size: 24px; + font-size: 15px; } img { width: 90%; diff --git a/src/pages/Home/Fy.jsx b/src/pages/Home/Fy.jsx index 58a998f..c4c01c8 100644 --- a/src/pages/Home/Fy.jsx +++ b/src/pages/Home/Fy.jsx @@ -16,13 +16,13 @@ const containerStyle = css` flex-direction: column; padding: 2rem 1rem; h1 { - font-size: 24px; + font-size: 22px; } p { - font-size: 16px; + font-size: 14px; } img { - width: 50%; + width: 40%; } } `; diff --git a/src/pages/Home/Intro.jsx b/src/pages/Home/Intro.jsx index e4687e8..ecf416f 100644 --- a/src/pages/Home/Intro.jsx +++ b/src/pages/Home/Intro.jsx @@ -20,13 +20,13 @@ const containerStyle = css` @media (max-width: 768px) { padding: 4rem 1rem; h1 { - font-size: 30px; + font-size: 20px; } p { - font-size: 20px; + font-size: 15px; } img { - width: 100%; + width: 90%; } } `; @@ -68,13 +68,19 @@ const sectionStyle = css` const textStyle = css` color: black; font-family: 'Pretendard-Medium'; - font-size: 18px; + font-size: 18px; font-weight: 400; line-height: 24px; letter-spacing: -1.4px; margin-bottom: 40px; + + @media (max-width: 768px) { + font-size: 13px !important; + margin-top: 20px; + } `; + const Feature = () => { return (