💄반응형 웹 CSS 스타일링

Yoonyesol · Sep 27, 2023 · c2af868 · c2af868 · Yoonyesol · Sep 27, 2023
1 parent f2807c7
commit c2af868
Show file tree

Hide file tree

Showing 12 changed files with 132 additions and 42 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -3,10 +3,10 @@ logo192.png,1695313368934,3ee59515172ee198f3be375979df15ac5345183e656720a381b887
 logo512.png,1695313369296,ee7e2f3fdb8209c4b6fd7bef6ba50d1b9dba30a25bb5c3126df057e1cb6f5331
 manifest.json,1695313367081,aff3449bdc238776f5d6d967f19ec491b36aed5fb7f23ccff6500736fd58494a
 robots.txt,1695313369716,bfe106a3fb878dc83461c86818bf74fc1bdc7f28538ba613cd3e775516ce8b49
-asset-manifest.json,1695750042919,105966927201517d4e6a6db5fa431c977e5dd89e0afee39ad5bacc40857aacc9
-index.html,1695750042918,90ddc7617a1941f8004a99b972ea2df9602bccfa70d5378456e82ef0ba273982
-static/js/main.9d253ccb.js.LICENSE.txt,1695750042927,75042a024b5acf6cc28a19c08854adac17613d65f00ff5871ed066ba7abfcd82
-static/css/main.207af715.css,1695750042927,8886575541129f8f2171c28a4565391e46f77aec791b762f73df68d74673dddd
-static/css/main.207af715.css.map,1695750042926,70673e113088aaee6496f1a71a45dedb04f759055ed8986ed5239ae3ff62c4da
-static/js/main.9d253ccb.js,1695750042928,4d8368d207a6dc6694f4c96dcf841732807bdd28a914598e5f77cc489facde65
-static/js/main.9d253ccb.js.map,1695750042927,851d517b4d363c05a2064f55cccd463ba452ed590467f940149c7a9e2b8fb97a
+asset-manifest.json,1695821245573,c41edea6a0b2f0030bcd9bbaf4431909ed055185ff2f977a8c7c44856fa5d759
+static/css/main.33b934ae.css,1695821245587,90948cc2a0e0b2e126c87bc2f231ff7bf8c80fccaaf6c8ad2c42441eb07d0c01
+index.html,1695821245572,7b01893722c9bea2cc7abe4131950421a27ceaf312a31674d081ef1478610a84
+static/css/main.33b934ae.css.map,1695821245588,1aa21518b6c956636a2a5ce882f33fc487c1ad4736e7567f2fa6442263dc44e4
+static/js/main.de91d426.js.LICENSE.txt,1695821245587,75042a024b5acf6cc28a19c08854adac17613d65f00ff5871ed066ba7abfcd82
+static/js/main.de91d426.js,1695821245587,5fb979999e3d0e04ce46f897ab21fb79c96ab411b62b6143f19e28396af45caf
+static/js/main.de91d426.js.map,1695821245595,669d244a1b3f5e3f0024d061d1b710db8480b242b9e4514276512eb6c0a796aa
diff --git a/src/components/Button.css b/src/components/Button.css
@@ -9,7 +9,6 @@
   color: #563a3d;
   background-color: transparent;
 
-  white-space: nowrap;
   /* font-family: "Noto Serif KR"; */
   font-family: "Gothic A1", sans-serif;
 }
@@ -24,6 +23,11 @@
   color: white;
 }
 
+.Button.red {
+  background-color: #ec5e5e;
+  color: white;
+}
+
 .Button.little {
   color: white;
   padding: 5px 10px;
@@ -45,3 +49,15 @@
   font-weight: bold;
   font-size: 16px;
 }
+
+@media screen and (min-width: 280px) and (max-width: 650px) {
+  .Button {
+    padding: 10px 15px;
+    font-size: 15px;
+  }
+
+  .Button.little {
+    padding: 5px 10px;
+    font-size: 12px;
+  }
+}
diff --git a/src/components/Card.css b/src/components/Card.css
@@ -1,7 +1,7 @@
 .card {
   position: relative;
   margin: 0;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26); */
   border-radius: 20px;
   padding: 1rem;
   overflow: hidden;

diff --git a/src/components/Header.css b/src/components/Header.css
@@ -3,29 +3,47 @@ header {
 
   display: flex;
   align-items: center;
-  /* border-bottom: 1px solid #e7e1d8; */
 }
 
 header > div {
   display: flex;
 }
 
-header .header-text {
+.header-text {
   width: 50%;
+  font-weight: bold;
   font-size: 25px;
   justify-content: center;
+  text-align: center;
 }
 
-header .header-left-btn {
+.header-left-btn {
   width: 25%;
   justify-content: start;
 }
 
-header .header-right-btn {
+.header-right-btn {
   width: 25%;
   justify-content: end;
 }
 
 header button {
   font-family: "Noto Serif KR";
 }
+
+@media screen and (min-width: 280px) and (max-width: 650px) {
+  .header-text {
+    width: 45%;
+    font-size: 20px;
+  }
+
+  .header-left-btn {
+    width: 27.5%;
+    justify-content: start;
+  }
+
+  .header-right-btn {
+    width: 27.5%;
+    justify-content: end;
+  }
+}
diff --git a/src/diary/DiaryEditor.css b/src/diary/DiaryEditor.css
@@ -13,8 +13,8 @@ h4 {
 .input-date,
 input[type="file"]::file-selector-button,
 .genre-edit-div input,
-.genre-title-wrapper select,
-.genre-title-wrapper input,
+.genre-wrapper select,
+.title-wrapper input,
 .text-wrapper textarea {
   border: none;
   border-radius: 20px;
@@ -71,19 +71,19 @@ input[type="file"]::file-selector-button,
   margin-left: 20px;
 }
 
-.genre-title-wrapper select {
+.genre-title-wrapper {
+  display: flex;
+}
+
+.genre-wrapper select {
   border-radius: 20px 0 0 20px;
   height: 40px;
 }
 
-.genre-title-wrapper input {
+.title-wrapper input {
   border-radius: 0px 20px 20px 0px;
 }
 
-.genre-title-wrapper {
-  display: flex;
-}
-
 .text-wrapper textarea {
   box-sizing: border-box;
   width: 100%;
@@ -96,3 +96,35 @@ input[type="file"]::file-selector-button,
   justify-content: space-between;
   align-items: center;
 }
+
+@media screen and (min-width: 280px) and (max-width: 650px) {
+  h4 {
+    font-size: 15px;
+  }
+
+  .input-date,
+  input[type="file"]::file-selector-button,
+  .genre-edit-div input,
+  .genre-wrapper select,
+  .title-wrapper input,
+  .text-wrapper textarea {
+    padding: 8px 14px;
+    font-size: 15px;
+  }
+
+  .genre-wrapper select {
+    border-radius: 20px 0 0 20px;
+    padding: 8px 10px;
+    height: 35px;
+    width: 85px;
+  }
+
+  .title-wrapper input {
+    border-radius: 0px 20px 20px 0px;
+    width: 140px;
+  }
+
+  .text-wrapper textarea {
+    padding: 10px 20px;
+  }
+}
diff --git a/src/diary/DiaryEditor.js b/src/diary/DiaryEditor.js
@@ -123,7 +123,7 @@ const DiaryEditor = ({ isEdit, originData }) => {
         headText={isEdit ? "수정하기" : "새 일기 쓰기"}
         rightBtn={
           isEdit && (
-            <Button type="dark-brown" text="삭제하기" onClick={removeHandler} />
+            <Button type="red" text="삭제하기" onClick={removeHandler} />
           )
         }
       />
@@ -157,9 +157,9 @@ const DiaryEditor = ({ isEdit, originData }) => {
               />
             </div>
           </div>
-          <div className="genre-edit-div">
-            {genreEditorShown && (
-              <div className="genre-editor">
+          {genreEditorShown && (
+            <div className="genre-edit-div">
+              <div className={"genre-editor"}>
                 <input
                   placeholder="장르"
                   ref={userGenreRef}
@@ -181,9 +181,8 @@ const DiaryEditor = ({ isEdit, originData }) => {
                   </li>
                 ))}
               </div>
-            )}
-          </div>
-
+            </div>
+          )}
           <div className="genre-title-wrapper">
             <div className="genre-wrapper">
               <select value={genre} onChange={(e) => setGenre(e.target.value)}>

diff --git a/src/diary/DiaryItem.css b/src/diary/DiaryItem.css
@@ -11,12 +11,13 @@
 
 .diary-image {
   cursor: pointer;
-  min-width: 100px;
-  height: 100px;
+  width: 120px;
+  height: 120px;
   border-radius: 20px;
   display: flex;
   justify-content: center;
   background-color: #f9f8f3;
+  overflow: hidden;
 }
 
 .diary-image img {
@@ -54,3 +55,24 @@
 .button-wrapper {
   min-width: 70px;
 }
+
+@media screen and (min-width: 280px) and (max-width: 650px) {
+  .diary-item {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .diary-date {
+    margin: 10px 0;
+  }
+
+  .diary-info {
+    margin-left: 0px;
+    text-align: center;
+  }
+
+  .content-preview {
+    width: 100%;
+    margin-bottom: 10px;
+  }
+}
diff --git a/src/diary/DiaryList.css b/src/diary/DiaryList.css
@@ -1,20 +1,18 @@
 .menu {
   margin: 20px 0px;
-
   display: flex;
-  justify-content: space-between;
 }
 
-.menu .right-items {
+.menu .right-item {
   flex-grow: 1; /*left-items 제외한 전체 영역의 넓이를 갖게 됨*/
 }
 
-.menu .right-items button {
+.menu .right-item button {
   width: 100%;
 }
 
 .control-menu {
-  margin-right: 10px;
+  width: 90%;
   border: none;
   border-radius: 20px;
   background-color: #b18c79;

diff --git a/src/diary/DiaryList.js b/src/diary/DiaryList.js
@@ -59,7 +59,7 @@ const DiaryList = ({ diaryList }) => {
             optionList={sortOption}
           />
         </div>
-        <div className="right-items">
+        <div className="right-item">
           <Button
             type="dark-brown"
             text="새 일기 작성"

diff --git a/src/diary/SearchBar.css b/src/diary/SearchBar.css
@@ -21,3 +21,7 @@
   font-family: "Gothic A1", sans-serif;
   font-size: 16px;
 }
+
+.search button {
+  white-space: nowrap;
+}
diff --git a/src/pages/Diary.css b/src/pages/Diary.css
@@ -15,13 +15,14 @@ h4 {
 }
 
 .diary-detail-img {
-  align-items: center;
   text-align: center;
+  align-items: center;
+  height: 180px;
 }
 
 .diary-detail-img img {
   border-radius: 20px;
-  height: 180px;
+  height: 90%;
 }
 
 .diary-detail-genre-title-wrapper,

diff --git a/src/pages/Diary.js b/src/pages/Diary.js
@@ -58,13 +58,13 @@ const Diary = () => {
         }
       />
       <div>
-        {data.img && (
-          <section>
+        <section>
+          {data.img && (
             <div className="diary-detail-img">
               <img alt="이미지" src={data.img}></img>
             </div>
-          </section>
-        )}
+          )}
+        </section>
         <section>
           <h4>장르 | 제목</h4>
           <div className="diary-detail-genre-title-wrapper">