Update: [review-note] btn-new 아이콘, 위치 수정

sthgml · Aug 25, 2023 · 1ca9b69 · 1ca9b69 · sthgml · Aug 26, 2023
1 parent eac75f7
commit 1ca9b69
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 7 deletions.
diff --git a/HTML-CSS/review-note/index.css b/HTML-CSS/review-note/index.css
@@ -150,18 +150,37 @@ h1 {
 
 /* ---- 새기록 만들기 ---- */
 
-.btn-new{
+.x-1,
+.x-2 {
+    width: 32px;
+    height: 3px;
+    background-color: var(--bg-2);
+    position: absolute;
+    top: 31px;
+    left: 16px;
+    transition: all 0.4s;
+}
 
-    position:fixed;
-    bottom: 40px;
-    right: 40px;
+.x-1 {
+    transform: rotate(90deg);
+}
+
+.x-2 {
+    transform: rotate(0deg);
+}
+
+.btn-new{
+    position: sticky;
+    margin-left: 16px;
+    top: 88vh;
 
     width: 65px;
     height: 65px;
     border-radius: 50%;
 
     box-shadow: 0 0 16px var(--bg-4);
     z-index: 10;
+    order: 10;
 }
 
 .guide {
@@ -170,6 +189,7 @@ h1 {
     width: 120px;
     text-align: center;
     background-color: var(--bg-2);
+    box-shadow: 0 0 16px var(--bg-3);
     opacity: 0;
 
     top: -2em;
@@ -185,10 +205,28 @@ h1 {
     transform: translateY(-1em);
 }
 
+.btn-new:hover .x-1 {
+    transform: rotate(180deg);
+}
+
+.btn-new:hover .x-2 {
+    transform: rotate(90deg);
+}
+
 /* ---- 오래된 기록들 ---- */
 
-[class^="quote"] {
+h2.title::before {
+    content: '';
+    background: url("./images/quote-start.png") center/contain no-repeat;
+    width: 60px;
+    height: 60px;
+}
+
+h2.title::after {
+    content: '';
+    background: url("./images/quote-end.png") center/contain no-repeat;
     width: 60px;
+    height: 60px;
 }
 
 .old {

diff --git a/HTML-CSS/review-note/index.html b/HTML-CSS/review-note/index.html
@@ -41,13 +41,18 @@ <h1><p class="a11y-hidden">당장복습헤_logo</p><a href="./"><img src="./imag
                 <li class="tap-month"><img src="./images/icon/icon-m-of-month.png" alt="icon-m-of-month" class="icon-m-of-month">한 달</li>
             </ul>
         </nav>
+
         <button type="button" class="btn-new">
-            <img src="./images/icon/icon-edit-bk.png" alt="btn-new">
+            <div class="x-1"></div>
+            <div class="x-2"></div>
             <p class="guide">당장 복습하기!</p>
         </button>
 
         <section class="old">
-            <h2 class="title typing"><img src="./images/quote-start.png" alt="quote-start" class="quote-start"><span class="mark">당장</span>&nbsp;기록했던 내용들을 다시 타이핑 해보면서 복습해보세요!<img src="./images/quote-end.png" alt="quote-end" class="quote-end"></h2>
+            <h2 class="title typing">
+                <span class="mark">당장</span>
+                &nbsp;기록했던 내용들을 다시 타이핑 해보면서 복습해보세요!
+            </h2>
             <div class="category-24hr">
                 <h3 class="title"><img src="./images/icon/icon-d-of-day.png" alt="icon-d-of-day" class="icon-d-of-day"><strong>24시간 </strong> &nbsp;| 지금 복습하면&nbsp; <strong style="color:var(--primary)">60%</strong>&nbsp;를 더 기억할 수 있어요!</h3>
                 <ul class="note-list">