Merge branch 'update'

docs/blog/posts/2023-09-21-python_logging.md

@@ -43,7 +43,7 @@ Python이 기본 제공하는 다양한 Log Handler 중에 [TimedRotatingFileHan
 |  W0 - W6  |           요일 (0=월요일)            | 최초 롤오버 시간 계산에 사용 |
 | midnight  | `atTime` 미입력 시 자정에 롤오버[^1] | 최초 롤오버 시간 계산에 사용 |
 
-[^1]: `atTime` 입력 시 해당 시간에 롤오버
+[^1]: `atTime` 입력 시 해당 시간에 롤오버  
 
 !!! tip
     `file_handler.suffix = "%Y%m%d.log"`와 같이 `suffix` 속성을 설정할 경우 롤오버 시 생성되는 파일의 파일명 규칙을 수정할 수 있지만, 이 경우 `backupCount` 속성이 제대로 작동하지 않게 된다.  

docs/blog/posts/2024-02-13-css_units.md

@@ -48,7 +48,7 @@ CSS에서 주로 사용하는 단위에 대한 내용은 MDN Web Docs의 [CSS va
 
     ```css
     html {
-        font-size: 16px;
+      font-size: 16px;
     }
     ```
 

docs/blog/posts/2024-02-15-css_tips.md

@@ -0,0 +1,61 @@
+---
+slug: css-tips
+title: CSS 활용 팁
+date:
+    created: 2024-02-15
+description: >
+    각종 CSS 활용 팁 정리
+categories:
+    - Front-End
+tags:
+    - CSS
+---
+
+각종 CSS 활용 팁 정리  
+
+<!-- more -->
+
+---
+
+## 태그 박스 사이즈 관련 팁
+
+태그에 각종 css의 옵션을 넣다 보면 태그 박스의 바깥쪽에 요소들이 붙어 디자인이 깨지는 현상이 발생한다.  
+
+`box-sizing`은 박스의 크기를 어떤 것을 기준으로 계산할 지를 정하는 속성인데, `border-box`는 테그 박스의 테두리를 기준으로 박스의 크기를 정하기 때문에 이런 문제를 해결할 수 있다.  
+
+```css
+.container {
+  width: 100;
+  height: 100;
+  box-sizing: border-box;
+  border: solid royalblue 10px;
+  padding: 5px;
+}
+```
+
+## 전환 효과
+
+`transition` 속성을 사용하면 `hover`와 같이 특정 상황에서만 변화가 있는 스타일을 사용하거나 반응형 웹페이지에서 스타일이 변화할 때, 스타일이 변화하는 액션이 자연스러워지는 전환 효과를 사용할 수 있다.  
+
+```css
+.container .item {
+  width: 100;
+  height: 100;
+  transition: 1s;
+  background-color: royalblue;
+}
+
+.container .item:hover {
+  width: 200;
+  background-color: orange;
+}
+```
+
+## 태그 레이어 순서 설정
+
+다양한 내용을 한 페이지에 담다보면 그림 등 컨텐츠가 겹쳐서 원하는 내용이 가려지는 문제가 발생한다.  
+
+웹 페이지의 태그들의 레이어 순서를 정하기 위해 사용하는 속성인 `z-index`을 사용하면 이런 문제를 해결할 수 있다.  
+
+!!! tip
+    모든 태그의 기본 `z-index`는 0으로 설정되어 있으며, 숫자가 클수록 앞에서 보임