style: 초기 페이지 스타일 적용

.gitignore

@@ -13,3 +13,6 @@ _includes/notes_graph.json
 
 # Obsidian config
 .obsidian/
+.makemd/
+.space/
+.Tags/

Gemfile

@@ -8,3 +8,4 @@ gem "jekyll", "~> 4.3"
 gem "jekyll-last-modified-at", git: "https://github.com/maximevaillancourt/jekyll-last-modified-at", branch: "add-support-for-files-in-git-submodules"
 gem "webrick", "~> 1.8"
 gem "nokogiri"
+gem 'wdm', '>= 0.1.0' if Gem.win_platform?

Gemfile.lock

@@ -67,11 +67,11 @@ GEM
     rb-fsevent (0.11.2)
     rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rexml (3.3.7)
+    rexml (3.3.8)
     rouge (4.4.0)
     safe_yaml (1.0.5)
-    sass-embedded (1.79.3)
-      google-protobuf (~> 4.27)
+    sass-embedded (1.80.3)
+      google-protobuf (~> 4.28)
       rake (>= 13)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)

_config.yml

@@ -1,12 +1,12 @@
-title:               My digital garden
-include:             ['_pages']
-exclude:             ['_includes/notes_graph.json']
+title: 🐤 Monicx AWS Note
+include: ["_pages"]
+exclude: ["_includes/notes_graph.json"]
 # You may need to change the base URL depending on your deploy configuration.
-baseurl:             ''
+baseurl: ""
 
 # If you are using a host that cannot resolve URLs that do
 # not end with .html (such as Neocities), set this to 'true'.
-use_html_extension:  false
+use_html_extension: false
 
 # Set to `true` to open non-internal links in new tabs, or
 # set to `false` to open non-internal links in current tab.
@@ -17,20 +17,20 @@ open_external_links_in_new_tab: true
 # as their browser will communicate with Twitter's servers.
 embed_tweets: false
 
-permalink:           pretty
+permalink: pretty
 relative_permalinks: false
 
 plugins:
   - jekyll-last-modified-at
 
 sass:
-  sass_dir:          _sass
-  style:            :compressed
+  sass_dir: _sass
+  style: :compressed
 
 collections:
   notes:
     output: true
-    permalink: /:slug
+    permalink: /:collection/:name
 
 defaults:
   - scope:

_includes/footer.html

@@ -1 +1,45 @@
-This is the footer. Include anything you'd like here, like a link to an <a class="internal-link" href="{{ site.baseurl }}/about">About</a> page.
+<footer>
+    <div class="social-icons">
+        <a href="https://github.com/Monixc" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-github"></i>
+        </a>
+        <a href="https://monicx.tistory.com/" target="_blank" rel="noopener noreferrer">
+            <i class="fas fa-blog"></i>
+        </a>
+        <a href="https://www.instagram.com/dev.monicx" target="_blank" rel="noopener noreferrer">
+            <i class="fab fa-instagram"></i>
+        </a>
+    </div>
+
+</footer>
+
+<style>
+    footer {
+        text-align: center;
+        padding: 2em 0;
+    }
+
+    .social-icons {
+        display: flex;
+        justify-content: center;
+        margin-bottom: 1em;
+    }
+
+    .social-icons a {
+        margin: 0 10px;
+        color: #333;
+        font-size: 1.5em;
+        text-decoration: none;
+        border-bottom: none;
+    }
+
+    .social-icons a:hover {
+        color: #FF9800;
+    }
+
+    .social-icons a:after {
+        content: none;
+    }
+</style>
+
+<script src="https://kit.fontawesome.com/7d4b429529.js" crossorigin="anonymous"></script>

_includes/head.html

@@ -5,18 +5,22 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.title }}{% endif %}">
+  <meta name="description"
+    content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.title }}{% endif %}">
 
   <meta property="og:site_name" content="{{ site.title }}">
 
   <link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
 
   <link rel="stylesheet" href="{{ site.baseurl }}/styles.css">
 
+  <link rel="stylesheet" as="style" crossorigin
+    href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css" />
+
   {% if page.excerpt %}
-  <meta property="og:description" content="{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}"/>
+  <meta property="og:description" content="{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}" />
   {% else %}
-  <meta property="og:description" content="{{ site.title | strip_html | strip_newlines | truncate: 160 }}"/>
+  <meta property="og:description" content="{{ site.title | strip_html | strip_newlines | truncate: 160 }}" />
   {% endif %}
 
   {% if page.title %}
@@ -40,9 +44,9 @@
 
   <title>
     {% if page.id == "home" %}
-      {{ site.title }}
+    {{ site.title }}
     {% else %}
-      {{ page.title }} &mdash; {{ site.title }}
+    {{ page.title }} &mdash; {{ site.title }}
     {% endif %}
   </title>
-</head>
+</head>

_includes/link-previews.html

@@ -1,8 +1,8 @@
 <!-- That file is not particularly elegant. This will need a refactor at some point. -->
 <style>
   content a.internal-link {
-    border-color: #8b88e6;
-    background-color: #efefff;
+    border: none;
+    background-color: #fff4b3;
   }
 
   #tooltip-wrapper {
@@ -15,21 +15,21 @@
     width: 400px;
     height: 250px;
     font-size: 0.8em;
-    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
     opacity: 0;
     transition: opacity 100ms;
   }
 
   #tooltip-wrapper:after {
-		content: "";
-		position: absolute;
-		z-index: 1;
-		bottom: 0;
-		left: 0;
-		pointer-events: none;
-		background-image: linear-gradient(to bottom, rgba(255,255,255, 0), rgba(255,255,255, 1) 90%);
-		width: 100%;
-		height: 75px;
+    content: "";
+    position: absolute;
+    z-index: 1;
+    bottom: 0;
+    left: 0;
+    pointer-events: none;
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
+    width: 100%;
+    height: 75px;
   }
 </style>
 
@@ -53,9 +53,9 @@
   var linkHistories = {};
 
   function hideTooltip() {
-    opacityTimeout = setTimeout(function() {
+    opacityTimeout = setTimeout(function () {
       tooltipWrapper.style.opacity = 0;
-      contentTimeout = setTimeout(function() {
+      contentTimeout = setTimeout(function () {
         tooltipContent.innerHTML = '';
         tooltipWrapper.style.display = 'none';
       }, transitionDurationMs + 1);
@@ -70,7 +70,7 @@
     if (event.target.host === window.location.host) {
       if (!linkHistories[event.target.href]) {
         iframe.src = event.target.href
-        iframe.onload = function() {
+        iframe.onload = function () {
           tooltipContentHtml = ''
           tooltipContentHtml += '<div style="font-weight: bold;">' + iframe.contentWindow.document.querySelector('h1').innerHTML + '</div>'
           tooltipContentHtml += iframe.contentWindow.document.querySelector('content').innerHTML
@@ -79,62 +79,62 @@
           linkHistories[event.target.href] = tooltipContentHtml
 
           tooltipWrapper.style.display = 'block';
-          setTimeout(function() {
+          setTimeout(function () {
             tooltipWrapper.style.opacity = 1;
           }, 1)
-        } 
+        }
       } else {
         tooltipContent.innerHTML = linkHistories[event.target.href]
         tooltipWrapper.style.display = 'block';
-        setTimeout(function() {
+        setTimeout(function () {
           tooltipWrapper.style.opacity = 1;
         }, 1)
       }
 
 
       tooltipWrapper.style.left = elem_props.left - (tooltipWrapper.offsetWidth / 2) + (elem_props.width / 2) + "px";
       if ((window.innerHeight - elem_props.top) < (tooltipWrapper.offsetHeight)) {
-          tooltipWrapper.style.top = elem_props.top + top - tooltipWrapper.offsetHeight - 10 + "px";
+        tooltipWrapper.style.top = elem_props.top + top - tooltipWrapper.offsetHeight - 10 + "px";
       } else if ((window.innerHeight - elem_props.top) > (tooltipWrapper.offsetHeight)) {
-          tooltipWrapper.style.top = elem_props.top + top + 35 + "px";
+        tooltipWrapper.style.top = elem_props.top + top + 35 + "px";
       }
 
       if ((elem_props.left + (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) {
-          tooltipWrapper.style.left = "10px";
+        tooltipWrapper.style.left = "10px";
       } else if ((document.body.clientWidth - elem_props.left - (elem_props.width / 2)) < (tooltipWrapper.offsetWidth / 2)) {
-          tooltipWrapper.style.left = document.body.clientWidth - tooltipWrapper.offsetWidth - 20 + "px";
+        tooltipWrapper.style.left = document.body.clientWidth - tooltipWrapper.offsetWidth - 20 + "px";
       }
     }
   }
 
   function setupListeners(linkElement) {
-    linkElement.addEventListener('mouseleave', function(_event) {
+    linkElement.addEventListener('mouseleave', function (_event) {
       hideTooltip();
     });
 
-    tooltipWrapper.addEventListener('mouseleave', function(_event) {
+    tooltipWrapper.addEventListener('mouseleave', function (_event) {
       hideTooltip();
     });
 
-    linkElement.addEventListener('touchend', function(_event) {
+    linkElement.addEventListener('touchend', function (_event) {
       hideTooltip();
     });
 
-    tooltipWrapper.addEventListener('touchend', function(_event) {
+    tooltipWrapper.addEventListener('touchend', function (_event) {
       hideTooltip();
     });
 
-    linkElement.addEventListener('mouseenter', function(event) {
+    linkElement.addEventListener('mouseenter', function (event) {
       clearTimeout(opacityTimeout);
       clearTimeout(contentTimeout);
       showTooltip(event);
     });
 
-    tooltipWrapper.addEventListener('mouseenter', function(event) {
+    tooltipWrapper.addEventListener('mouseenter', function (event) {
       clearTimeout(opacityTimeout);
       clearTimeout(contentTimeout);
     });
   }
 
   document.querySelectorAll('{{ include.wrapperQuerySelector }} a').forEach(setupListeners);
-</script>
+</script>

_layouts/default.html

@@ -1,13 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  {% include head.html %}
-  <body>
-    <nav>{% include nav.html %}</nav>
-    <div class="wrapper">
-      <main>{{ content }}</main>
-      <footer>{% include footer.html %}</footer>
-    </div>
+{% include head.html %}
 
-    {% include link-previews.html wrapperQuerySelector="content" %}
-  </body>
-</html>
+<body>
+  <nav>{% include nav.html %}</nav>
+  <div class="wrapper" style="width: 100%; max-width: none; ">
+    <main>{{ content }}</main>
+    <footer>{% include footer.html %}</footer>
+  </div>
+
+  {% include link-previews.html wrapperQuerySelector="content" %}
+</body>
+
+</html>

_notes/AWS 정리/AWS.md

@@ -1,3 +1,6 @@
+---
+---
+
 > 다양한 퍼블릭 클라우드 컴퓨팅 서비스를 제공하는 Amazon의 자회사
 
 - AWS는 200개 이상의 클라우드 서비스를 제공 중

_notes/AWS 정리/IaaS.md

@@ -1,3 +1,6 @@
+---
+---
+
 > [!note] Infrastructure as a Service
 > [[인프라]] 에 대한 [[클라우드 서비스]] 유형을 의미
 

_notes/AWS 정리/PaaS.md

@@ -1,3 +1,6 @@
+---
+---
+
 > [!note] Platform as a Service
 > [[플랫폼]] 형태로 제공되는 [[클라우드 서비스]] 유형
 

_notes/AWS 정리/SaaS.md

@@ -1,3 +1,6 @@
+---
+---
+
 >[!note] Software as a Service
 >소프트웨어 영역까지 [[클라우드 공급자]] 가 관리 및 제공하는 유형
 

_notes/AWS 정리/가용 영역.md

@@ -1,3 +1,6 @@
+---
+---
+
 > [!note] 가용 영역
 > [[리전]] 내 구성되는 하나 이상의 개별 데이터 센터
 

_notes/AWS 정리/리전.md

@@ -1,3 +1,6 @@
+---
+---
+
 > [!note] 리전
  [[클라우드 서비스]] 를 위해 자원이 모여 있는 물리적 데이터 센터의 지리적 위치
 

_notes/AWS 정리/온프레미스.md

@@ -1,3 +1,6 @@
+---
+---
+
 > [!note] 온프레미스(on-premises)
 > 사용자 입장에서 공간, 자원 등 모든 것을 자체적으로 구축 및 운영하는 방식
 

_notes/AWS 정리/클라우드 구축 모델.md

@@ -1,3 +1,6 @@
+---
+---
+
 [[클라우드 서비스]] 를 위한 자원의 소유권, 위치, 주체에 따라 퍼블릭 클라우드, 프라이빗 클라우드, 하이브리드 클라우드 구축 모델로 분류
 
 ### 퍼블릭 클라우드

_notes/AWS 정리/클라우드 서비스.md

@@ -1,3 +1,6 @@
+---
+---
+
 ### 서비스 제공 형태
 [[클라우드 컴퓨팅]]은 서비스 제공 형태에 따라 [[클라우드 구축 모델#퍼블릭 클라우드]], [[클라우드 구축 모델#프라이빗 클라우드]], [[클라우드 구축 모델#하이브리드 클라우드]]로 구분된다.
 

_notes/AWS 정리/클라우드 컴퓨팅.md

@@ -1,3 +1,6 @@
+---
+---
+
 > [!note] 클라우드 컴퓨팅
 >  인터넷을 통해 IT 자원 요구에 따라 사용한 만큼 비용을 지불하는 서비스