<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ Yeseul Lee - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/korean/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ Yeseul Lee - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/korean/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Fri, 22 May 2026 15:16:07 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/korean/news/author/yeseul/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ 자바스크립트 Void 0 - 도대체 javascript:void(0);는 무슨 뜻일까? ]]>
                </title>
                <description>
                    <![CDATA[  > Void란 단어를 사전에서 찾아보면 “완전히 비어있는 공간”이라는 뜻을 찾아볼 수 있습니다. 하지만 이 단어를 프로그래밍에서 사용한다면 “아무것도” 반환하지 않는 걸 확인할 수 있습니다. 정확히 말하면, “빈 값”을 반환합니다. void 키워드란? 함수가 비어있단(void) 뜻은, 그 함수가 아무것도 반환하지 않은 것을 의미합니다. 이것은 자바스크립트에서 함수가 직접적으로 undefined 을 반환하는 것과 ]]>
                </description>
                <link>https://www.freecodecamp.org/korean/news/jabaseukeuribteu-void-0-dodaece-javascript-void-0-neun-museun-ddeusilgga/</link>
                <guid isPermaLink="false">63d922f341a99b065fb5ab11</guid>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Yeseul Lee ]]>
                </dc:creator>
                <pubDate>Wed, 01 Feb 2023 09:29:17 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/korean/news/content/images/2023/01/68747470733a2f2f63646e2d6d656469612d322e66726565636f646563616d702e6f72672f77313238302f3566396339383131373430353639643161346361313766622e6a7067.jpg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>기사 원문:</strong> <a href="https://www.freecodecamp.org/news/javascript-void-keyword-explained/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">JavaScript Void 0 – What Does javascript:void(0); Mean?</a>
      </p><h4></h4><blockquote>Void란 단어를 사전에서 찾아보면 “완전히 비어있는 공간”이라는 뜻을 찾아볼 수 있습니다. 하지만 이 단어를 프로그래밍에서 사용한다면 “아무것도” 반환하지 않는 걸 확인할 수 있습니다. 정확히 말하면, “빈 값”을 반환합니다.</blockquote><h1 id="void-">void 키워드란?</h1><p>함수가 비어있단(void) 뜻은, 그 함수가 아무것도 반환하지 않은 것을 의미합니다. 이것은 자바스크립트에서 함수가 직접적으로 <code>undefined</code>을 반환하는 것과 비슷합니다.</p><pre><code class="language-javascript">function und() {
  return undefined;
}
und();
</code></pre><p>또는 다음과 같이 작성하여 간접적으로 <code>undefined</code>을 반환할 수도 있습니다.</p><pre><code class="language-javascript">function und() {}
und();
</code></pre><p>2개의 숫자를 더하거나, 숫자 5개의 평균을 구하는 등의 표현식(Expressions)이나 문장(Statements)을 위의 함수에서 사용해도, 그 결과가 반환되지 않습니다.</p><p>이제 우리는 <code>void</code> 키워드가 무엇인지 압니다. 그렇다면 <code>javascript:void(0)</code>은 무엇일까요?</p><h1 id="javascript-void-0-"><code>javascript:void(0)</code>란?</h1><p>만약 <code>javascript:void(0)</code>를 반으로 나눈다면, <code>javascript:</code>와 <code>void(0)</code>가 됩니다. 각 부분에 대해 자세히 살펴보겠습니다.</p><h3 id="javascript-"><code>javascript:</code></h3><p>이것은 <strong>가상 URL</strong>이라고 할 수 있습니다. 브라우저에서 <code>&lt;a&gt;</code>태그의 <code>href</code>의 값으로 <code>javascript:</code>을 받는다면 이 값을 참조된 경로로 취급하지 않고, 쌍점(:) 뒤에 오는 것을 자바스크립트의 코드로 해석합니다.</p><p>예를 들어,</p><pre><code class="language-html">&lt;a href="javascript:console.log('javascript');alert('javascript')"&gt;Link&lt;/a&gt;
</code></pre><p>“Link”를 클릭하면 결과는 다음과 같습니다.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/10/image-119.png" class="kg-image" alt="콘솔 로그와 alert창이 뜬 브라우저 스크린샷" width="600" height="400" loading="lazy"></figure><p>위에서 본 것처럼, 브라우저는 <code>href</code>를 참조된 경로로 취급하지 않습니다. 대신 “javascript:” 이후부터 쌍반점(;)을 기준으로 나눠서 각각의 자바스크립트의 코드로 처리합니다.</p><h3 id="void-0-"><code>void(0)</code></h3><p>void 연산자는 주어진 표현식을 평가하고 <code>undefined</code>를 반환합니다.</p><p>예를 들어,</p><pre><code class="language-javascript">const result = void (1 + 1);
console.log(result);
// undefined
</code></pre><p><code>1 + 1</code>의 연산은 실행이 되지만 <code>undefined</code>가 반환됩니다. 또 다른 예제를 통해 확인해보겠습니다.</p><pre><code class="language-html">&lt;body&gt;
  &lt;h1&gt;Heading&lt;/h1&gt;
  &lt;script&gt;
    void ((document.body.style.backgroundColor = "red"),
    (document.body.style.color = "white"));
  &lt;/script&gt;
&lt;/body&gt;
</code></pre><p>위 코드의 결과는 다음과 같습니다.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/10/image-122.png" class="kg-image" alt="빨간 배경의 하얀 글자 사진" width="600" height="400" loading="lazy"></figure><p>다음은 또 다른 예시입니다.</p><pre><code class="language-javascript">console.log(void 0 === undefined);
// true
</code></pre><h3 id="javascript-void-0--1"><code>javascript:</code>와 <code>void(0)</code>의 결합</h3><p>때에 따라 링크를 클릭했을 때, 다른 페이지로 이동하거나 페이지가 다시 로딩되는 것을 원하지 않을 때가 있습니다. <code>javascript:</code>을 사용하면 현재 페이지에 아무런 변화 없이 코드를 실행할 수 있습니다.</p><p><code>void(0)</code>를 사용하는 것은 <strong>아무것도</strong> 하지 말라는 뜻입니다. 즉, 다시 로딩하지 않고, 경로를 이동하지 않고, 어떤 코드도 실행하지 말라는 것과 같습니다.</p><p>예를 들어,</p><pre><code class="language-html">&lt;a href="javascript:void(0)"&gt;Link&lt;/a&gt;
</code></pre><p>“Link”라는 단어는 브라우저에서 링크로 처리됩니다. 예를 들어 포커스를 줄 수는 있지만 “Link”를 클릭하더라도 새 페이지로 이동하지 않습니다.</p><p><code>0</code>은 <code>void</code>에게 전달된 인수(Arguments)이며, 아무것도 하지 않고, 아무것도 반환하지 않습니다.</p><p>위에서 보다시피, 자바스크립트 코드 또한 <code>void</code>메서드에 인수로 전달될 수 있습니다. 이렇게 하면 링크 요소가 코드를 실행할 수 있지만 여전히 동일한 페이지를 유지합니다.</p><p>예를 들어:</p><pre><code class="language-html">&lt;a
  id="link"
  href="javascript:void(
document.querySelector('#link').style.color = 'green'
)"
  &gt;Link&lt;/a
&gt;
</code></pre><p>“Link” 버튼을 클릭하면 다음과 같은 결과가 나타납니다.</p><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/10/image-121.png" class="kg-image" alt="초록색의 Link 글자" width="600" height="400" loading="lazy"></figure><p><code>void</code>를 사용하면 브라우저에 아무것도 반환하지 말라고 (또는 <code>undefined</code>를 반환하라고) 지시합니다.</p><p><code>javascript:void(0)</code>를 사용한 또 다른 사례는, 때때로 <code>&lt;a&gt;</code>태그를 사용해 링크를 클릭했을 때, 자바스크립트의 코드를 실행하고 싶지만, 경로를 바꾸는 게 불필요한 경우가 있습니다. 이럴 때, 실행하고 싶은 표현식을 <code>void</code>에 인수로 전달하면 됩니다.</p><h1 id="-">결론</h1><p>이 짧은 글에서 우리는 <code>void</code>연산자가 무엇인지, 어떻게 작동하는지, <code>&lt;a&gt;</code>태그 속성(Attributes)의 <code>href</code>에서 가상 URL인 <code>javascript:</code>가 어떻게 사용되는지 알아봤습니다.</p><p>이것은 클릭 시 페이지가 다른 페이지로 이동하거나 현재 페이지를 다시 로딩하지 않는 확실한 방법입니다.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ CSS로 무엇이든 중앙 정렬하는 방법 - Div, 텍스트 등 ]]>
                </title>
                <description>
                    <![CDATA[  > 중앙 정렬은 CSS에서 가장 어려운 것 중 하나입니다. 방법 자체를 이해하는 것은 그다지 어렵지 않지만, 너무나도 다양한 방법이 존재한다는 사실이 중앙 정렬을 어렵게 합니다. 중앙 정렬 하는 방법은 HTML 요소에 따라 혹은 수평 중앙 정렬인지, 수직 중앙 정렬인지에 따라 달라질 수 있습니다. 이 튜토리얼에서는 다양한 요소를 수평, 수직 ]]>
                </description>
                <link>https://www.freecodecamp.org/korean/news/cssro-mueosideun-jungang-jeongryeolhaneun-bangbeob-div-tegseuteu-deung/</link>
                <guid isPermaLink="false">63ee012335fac40657f495a8</guid>
                
                    <category>
                        <![CDATA[ CSS ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Yeseul Lee ]]>
                </dc:creator>
                <pubDate>Wed, 11 Jan 2023 10:43:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/korean/news/content/images/2023/02/avocado.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>기사 원문:</strong> <a href="https://www.freecodecamp.org/news/how-to-center-anything-with-css-align-a-div-text-and-more/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to Center Anything with CSS - Align a Div, Text, and More</a>
      </p><h4></h4><blockquote>중앙 정렬은 CSS에서 가장 어려운 것 중 하나입니다.</blockquote><p>방법 자체를 이해하는 것은 그다지 어렵지 않지만, 너무나도 다양한 방법이 존재한다는 사실이 중앙 정렬을 어렵게 합니다.</p><p>중앙 정렬 하는 방법은 HTML 요소에 따라 혹은 수평 중앙 정렬인지, 수직 중앙 정렬인지에 따라 달라질 수 있습니다.</p><p>이 튜토리얼에서는 다양한 요소를 수평, 수직 및 상하좌우로 중앙에 배치하는 방법에 대해 살펴보겠습니다.</p><h3 id="css-interactive-scrim-">CSS로 무엇이든 중앙 정렬하는 방법을 설명하는 대화형의 비디오(Interactive Scrim)</h3><figure class="kg-card kg-embed-card"><iframe src="https://scrimba.com/scrim/co4db41c6a8d6458e2d84500b?embed=freecodecamp,mini-header" width="100%" height="420" title="Embedded content" loading="lazy" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-weight: 400; font-stretch: inherit; line-height: inherit; font-family: Lato, sans-serif; font-size: 22px; vertical-align: middle; color: rgb(10, 10, 35); letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"></iframe></figure><h2 id="-">수평 중앙 정렬하는 방법</h2><p>수평 중앙 정렬하는 것은 대체적으로 수직 중앙 정렬하는 것보다 쉽습니다. 다음은 수평 중앙 정렬할 수 있는 몇 가지 일반적인 요소와 이를 사용하는 다양한 방법입니다.</p><h3 id="css-text-align-center-">CSS에서 Text-Align Center 속성으로 텍스트를 중앙 정렬하는 방법</h3><p>텍스트 또는 링크를 수평 중앙에 정렬하려면, <code>text-align</code> 속성을 사용하여 값을 <code>center</code>로 주면 됩니다.</p><pre><code class="language-html">&lt;div class="container"&gt;
  &lt;p&gt;Hello, (centered) World!&lt;/p&gt;
&lt;/div&gt;
</code></pre><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* 수평 중앙 정렬하기 */
  text-align: center;
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/image-15.png" class="kg-image" alt="CSS를 통해 Hello, World 텍스트가 중앙 상단에 위치한 모습" width="600" height="400" loading="lazy"></figure><h3 id="css-margin-auto-div-">CSS에서 Margin Auto로 Div를 중앙 정렬하는 방법</h3><p><code>div</code>처럼 블록 레벨 요소(화면 전체를 차지하는 요소 —옮긴이)를 가지고 있는 태그를 중앙 정렬하기 위해선 <code>margin</code> 속성을 사용하여 값을 <code>0 auto</code>로 주면 됩니다.</p><pre><code class="language-html">&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수평 중앙 정렬하기 */
  margin: 0 auto;
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/box-centered-horizontally.jpg" class="kg-image" alt="CSS를 통해 빨간 상자가 중앙 상단에 위치한 모습" width="600" height="400" loading="lazy"></figure><h3 id="flexbox-div-">Flexbox를 사용하여 Div를 수평 중앙 정렬하는 방법</h3><p>Flexbox는 가장 현대적으로 페이지를 중앙 정렬하는 방법이며 반응형 레이아웃을 이전보다 훨씬 쉽게 디자인할 수 있습니다. 그러나 인터넷 익스플로러와 같은 일부 레거시 브라우저에서는 전적으로 지원되지 않습니다.</p><p>Flexbox를 사용하여 요소를 수평 중앙에 정렬하려면 부모 요소에 <code>display: flex</code> 그리고 <code>justify-content: center</code>를 적용하기만 하면 됩니다.</p><pre><code class="language-html">&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 자식 요소(.child)를 중앙 정렬하기 */
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/box-centered-horizontally.jpg" class="kg-image" alt="CSS를 통해 빨간 상자가 중앙 상단에 위치한 모습" width="600" height="400" loading="lazy"></figure><h2 id="--1">수직 중앙 정렬하는 방법</h2><p>Flexbox와 같은 현대적인 방법 없이 요소를 수직 중앙 정렬하는 것은 꽤 번거로운 일이 될 수 있습니다. 이번엔 예전 방식으로 수직 중앙 정렬을 먼저 실행 해보고, Flexbox를 사용하는 방법도 함께 살펴보겠습니다.</p><h3 id="css-absolute-margin-div-">CSS Absolute 배치와 Margin을 마이너스 값으로 설정하여 Div를 수직 중앙 정렬하는 방법</h3><p>이 방법은 요소를 수직으로 중앙정렬하는데 오랫동안 사용되어 왔습니다. 이 경우에는 중앙에 정렬하려는 요소의 높이를 알아야 합니다.</p><p>먼저 부모 요소의 <code>position</code>속성을 &nbsp;<code>relative</code>로 설정합니다.</p><p>그 다음 자식 요소의 <code>position</code>속성을 <code>absolute</code>로 설정하고 <code>top</code> 또한 <code>50%</code>로 설정합니다.</p><pre><code class="language-html">&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/box-centered-vertically-1.jpg" class="kg-image" alt="CSS를 통해 빨간 상자가 왼쪽 중앙 조금 아래에 위치한 모습" width="600" height="400" loading="lazy"></figure><p>하지만 이것은 자식 요소의 상단 가장자리만을 수직으로 중앙에 맞춥니다.</p><p>자식 요소 전체를 수직 중앙에 정렬하려면 <code>margin-top</code>속성을 <code>-(자식 요소 높이의 절반)</code>으로 설정합니다.</p><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* 이 요소 높이의 절반 */
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/box-centered-vertically-final.jpg" class="kg-image" alt="CSS를 통해 빨간 상자가 왼쪽 중앙에 위치한 모습" width="600" height="400" loading="lazy"></figure><h3 id="css-transform-translate-div-">CSS의 Transform과 Translate를 사용하여 Div를 수직 중앙 정렬하는 방법</h3><p>중앙에 정렬하려는 요소의 높이를 모른다면(또는 알더라도), 이것은 꽤나 유용한 방법입니다.</p><p>이 방법은 위의 Margin을 마이너스 값으로 설정하는 방법과 아주 유사합니다. 부모 요소의 <code>position</code>속성을 &nbsp;<code>relative</code>로 설정합니다.</p><p>자식 요소의 경우 <code>position</code>속성을 <code>absolute</code>로 설정하고 <code>top</code>을 <code>50%</code>로 설정합니다. 이제 Margin을 마이너스 값으로 설정하여 자식요소를 중앙 정렬하는 대신에, 단순히 <code>transform: translate(0, -50%)</code>를 사용하면 됩니다.</p><pre><code class="language-html">&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 수직 중앙 정렬하기 */
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/box-centered-vertically-final.jpg" class="kg-image" alt="CSS를 통해 빨간 상자가 왼쪽 중앙에 위치한 모습" width="600" height="400" loading="lazy"></figure><p><code>translate(0, -50%)</code>은 <code>translateX(0)</code>와 <code>translateY(-50%)</code>의 줄임말입니다. 또한 <code>transform: translateY(-50%)</code>을 사용하여 자식 요소를 수직으로 중앙에 정렬할 수도 있습니다.</p><h3 id="flexbox-div--1">Flexbox를 사용하여 Div를 수직 중앙 정렬하는 방법</h3><p>요소를 수평 중앙 정렬 하는 것처럼, Flexbox를 사용하면 요소를 수직으로 중앙에 정렬하는 방법은 정말 쉽습니다.</p><p>요소를 수직 중앙 정렬하려면 부모 요소에 <code>display: flex</code>와 <code>align-items: center</code>를 적용합니다.</p><pre><code class="language-html">&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 수직 중앙 정렬하기 */
  display: flex;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/box-centered-vertically-final.jpg" class="kg-image" alt="CSS를 통해 빨간 상자가 왼쪽 중앙에 위치한 모습" width="600" height="400" loading="lazy"></figure><h2 id="--2">상하좌우 정중앙 정렬하는 방법</h2><h3 id="css-absolute-margin-div--1">CSS Absolute 배치와 Margin을 마이너스 값으로 설정하여 Div를 상하좌우 정중앙 정렬하는 방법</h3><p>이 방법은 요소를 수직으로 중앙에 정렬하는 위의 방법과 매우 유사합니다. 그와 마찬가지로 중앙에 정렬하려는 요소의 너비와 높이를 알아야 합니다.</p><p>부모 요소의 <code>position</code> 속성을 <code>relative</code>로 설정합니다.</p><p>그 다음에, 자녀의 <code>position</code>속성을 <code>absolute</code> 그리고 <code>top</code>을 <code>50%</code>로, <code>left</code>를 <code>50%</code>로 설정합니다. 이것은 단지 자식 요소의 왼쪽 상단 모서리를 수직 및 수평으로 중앙에 맞춥니다.</p><p>자식 요소 전체를 중앙에 정렬하려면 자식 요소 높이의 절반 값에 마이너스를 붙인 <code>margin-top</code>과 자식 요소 너비의 절반 값에 마이너스를 붙인 <code>margin-left</code>를 적용합니다.</p><pre><code class="language-html">&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 상하좌우 정중앙 정렬하기 */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* 자식 요소 전체를 중앙 정렬하기 위해, 상단 및 왼쪽 margin을 마이너스 값으로 적용하기 */
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/box-centered-vertically-and-horizontally.jpg" class="kg-image" alt="CSS를 통해 빨간 상자가 정중앙에 위치한 모습" width="600" height="400" loading="lazy"></figure><h3 id="css-transform-translate-div--1">CSS의 Transform과 Translate를 사용하여 Div를 상하좌우 정중앙 정렬하는 방법</h3><p>중앙에 정렬하려는 요소의 높이와 너비를 정확히 모르고, Flexbox 또한 사용할 수 없을 경우에 이 방법을 사용하여 요소를 수직 및 수평으로 중앙에 정렬 할 수 있습니다.</p><p>먼저, 부모 요소의 <code>position</code>속성을 &nbsp;<code>relative</code>로 설정합니다.</p><p>다음에, 자녀의 <code>position</code>속성을 <code>absolute</code> 그리고 <code>top</code>을 <code>50%</code>로, <code>left</code>를 <code>50%</code>로 설정합니다.</p><p>마지막으로, 자식 요소 전체를 중앙에 정렬하기 위해서 <code>transform: translate(-50%, -50%)</code>로 설정합니다.</p><pre><code class="language-html">&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 설정 */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* 상하좌우 정중앙 정렬하기 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/box-centered-vertically-and-horizontally.jpg" class="kg-image" alt="CSS를 통해 빨간 상자가 정중앙에 위치한 모습" width="600" height="400" loading="lazy"></figure><h3 id="flexbox-div--2">Flexbox를 사용하여 Div를 상하좌우 정중앙 정렬하는 방법</h3><p>Flexbox는 요소를 상하좌우 정중앙 정렬하는 방법 중, 가장 쉬운 방법입니다.</p><p>이 방법은 단지 앞서 보았던 두 가지 Flexbox 사용법의 조합일 뿐입니다. 자식 요소를 수직과 수평으로 중앙에 정렬하려면 <code>justify-content: center</code>와 <code>align-items: center</code>를 부모 요소에 적용하면 됩니다.</p><pre><code class="language-html">&lt;div class="container"&gt;
  &lt;div class="child"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre><pre><code class="language-css">.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* 상하좌우 정중앙 정렬하기 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}
</code></pre><figure class="kg-card kg-image-card"><img src="https://www.freecodecamp.org/news/content/images/2020/11/box-centered-vertically-and-horizontally.jpg" class="kg-image" alt="CSS를 통해 빨간 상자가 정중앙에 위치한 모습" width="600" height="400" loading="lazy"></figure><p>여러분들은 누구 못지않게 요소들을 중앙에 정렬할 수 있는 모든 방법을 배웠습니다. 자 이제 많은 것들을 중앙 정렬해 보세요.</p> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Git 체크아웃에 대한 설명: Git에서 브랜치를 체크아웃(변경 또는 전환)하는 방법 ]]>
                </title>
                <description>
                    <![CDATA[  > git checkout 명령어는 브랜치 간 전환 또는 현재 작업 중인 파일들을 복원할 때 사용됩니다. 이 명령에는 여러 가지 옵션이 있지만 이 글에서 다루지 않을 것이며, git 문서 [https://git-scm.com/docs/git-checkout]에서 모든 옵션을 확인할 수 있습니다. 특정 커밋으로 체크아웃하는 방법 특정 커밋으로 이동하려면 다음 명령어를 실행하세요. git checkout specific-commit-id 특정 커밋 ]]>
                </description>
                <link>https://www.freecodecamp.org/korean/news/git-cekeuause-daehan-seolmyeong-giteseo-beuraencireul-cekeuaus-byeongyeong-ddoneun-jeonhwan-haneun-bangbeob/</link>
                <guid isPermaLink="false">64149d3a20ccd505976712d5</guid>
                
                    <category>
                        <![CDATA[ Git ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Yeseul Lee ]]>
                </dc:creator>
                <pubDate>Fri, 06 Jan 2023 17:03:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/korean/news/content/images/2023/03/68747470733a2f2f63646e2d6d656469612d322e66726565636f646563616d702e6f72672f77313238302f3566396339653562373430353639643161346361336361632e6a7067.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>기사 원문:</strong> <a href="https://www.freecodecamp.org/news/git-checkout-explained/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">Git Checkout Explained: How to Checkout, Change, or Switch a Branch in Git</a>
      </p><h4></h4><blockquote><code>git checkout</code> 명령어는 브랜치 간 전환 또는 현재 작업 중인 파일들을 복원할 때 사용됩니다. 이 명령에는 여러 가지 옵션이 있지만 이 글에서 다루지 않을 것이며, <a href="https://git-scm.com/docs/git-checkout">git 문서</a>에서 모든 옵션을 확인할 수 있습니다.</blockquote><h2 id="-">특정 커밋으로 체크아웃하는 방법</h2><p>특정 커밋으로 이동하려면 다음 명령어를 실행하세요.</p><pre><code class="language-bash">git checkout specific-commit-id
</code></pre><p>특정 커밋 ID는 다음 명령을 실행하여 확인할 수 있습니다.</p><pre><code class="language-bash">git log
</code></pre><h2 id="--1">기존 브랜치로 체크아웃하는 방법</h2><p>기존 브랜치로 이동하려면 다음 명령을 실행하세요.</p><pre><code class="language-bash">git checkout BRANCH-NAME
</code></pre><p>보통 Git을 사용할 때, 작업하고 있던 디렉토리에서 커밋되지 않은 변경 사항이 있는 경우 다른 브랜치로 이동할 수 없습니다. 이는 커밋되지 않은 파일들이 손실되기 때문입니다. 이 경우 변경 사항을 처리하기 위해서는 1. 삭제하거나, 2. 커밋하거나, 3. 스태시(Stash: 아직 커밋하지 않은 변경 사항들을 임시로 저장하는 Git의 기능 —옮긴이)해야 합니다.</p><h2 id="--2">새로운 브랜치로 체크아웃하는 방법</h2><p>새로운 브랜치 생성과 동시에 해당 브랜치로 이동하는 명령어를 실행하려면 다음과 같이 입력합니다.</p><pre><code class="language-bash">git checkout -b NEW-BRANCH-NAME
</code></pre><p>이 명령어를 실행하면 바로 새로운 브랜치로 전환됩니다.</p><h2 id="--3">새로운 브랜치로 체크아웃하거나 브랜치를 시작점으로 재설정하는 방법</h2><p>다음 명령은 새 브랜치를 만드는 것과 유사하지만 <code>-B</code> (대문자 B에 주목) 플래그와 선택적인 <code>START-POINT</code> 매개변수를 사용합니다.</p><pre><code class="language-bash">git checkout -B BRANCH-NAME START-POINT
</code></pre><p>만약 <code>BRANCH-NAME</code>이라는 브랜치가 존재하지 않으면, Git은 <code>START-POINT</code>에서 브랜치를 만들고 시작합니다. 만약 <code>BRANCH-NAME</code>이라는 브랜치가 이미 존재한다면, Git은 브랜치를 <code>START-POINT</code>로 재설정합니다. 이것은 <code>-f</code> (force의 약자. 강제로 실행하는 명령어 — 옮긴이) 옵션을 사용하여 <code>git branch</code>를 실행하는 것과 동일합니다.</p><h1 id="--4">체크아웃을 강제로 실행하기</h1><p>작업 디렉토리의 인덱스가 <code>HEAD</code>와 다르면 (즉, 스테이징하지 않은 변경 사항이 있으면), <code>git checkout</code> 명령에 <code>-f</code> 또는 <code>--force</code> 옵션을 전달하여 Git이 브랜치를 전환하도록 강제할 수 있습니다. 기본적으로, 이는 로컬 변경 사항을 삭제하는 데 사용될 수 있습니다.</p><p>다음 명령을 실행하면 Git은 병합되지 않은 항목을 무시합니다.</p><pre><code class="language-bash">git checkout -f BRANCH-NAME

# Alternative
git checkout --force BRANCH-NAME
</code></pre><h1 id="--5">작업 디렉토리에서 변경 내용 되돌리기</h1><p><code>git checkout</code> 명령을 사용하여 작업 디렉토리에서 파일을 변경한 내용을 되돌릴 수 있습니다. 이는 파일을 <code>HEAD</code>의 버전으로 되돌립니다.</p><pre><code class="language-bash">git checkout -- FILE-NAME
</code></pre> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ 24시간제 변환기: AM/PM을 24시간으로 변환하는 방법 ]]>
                </title>
                <description>
                    <![CDATA[  시간을 표시하는 데는 주로 두 가지 방법이 있습니다. 첫 번째로는 AM과 PM을 사용하는 12시간제가 있고, 두 번째로는 24시간제가 있습니다. 대부분의 나라에서는 24시간제 방식을 선호하지만, 12시간제는 라틴 아메리카와 영어권 국가에서 널리 사용됩니다. 12시간제 방식에서는 자정(AM)과 정오(PM)에 모두 12:00이 됩니다. 아래 표는 12시간제와 24시간제 시스템 간의 변환을 보여줍니다. 12시간제24시간제12:00 AM00:0001:00 AM01:0002:00 ]]>
                </description>
                <link>https://www.freecodecamp.org/korean/news/mathematics-converting-am-pm-to-24-hour-clock/</link>
                <guid isPermaLink="false">6403fd181d2b73063c4cea21</guid>
                
                    <category>
                        <![CDATA[ Projects ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Yeseul Lee ]]>
                </dc:creator>
                <pubDate>Thu, 05 Jan 2023 20:24:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/korean/news/content/images/2023/03/68747470733a2f2f7777772e66726565636f646563616d702e6f72672f6e6577732f636f6e74656e742f696d616765732f73697a652f77323030302f323032322f30312f706578656c732d636f74746f6e62726f2d353138353136332e6a7067.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>기사 원문:</strong> <a href="https://www.freecodecamp.org/news/mathematics-converting-am-pm-to-24-hour-clock/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">24 Hour Clock Converter: How to Convert AM/PM to 24 Hour Time</a>
      </p><p></p><h4 id="-am-pm-12-24-">시간을 표시하는 데는 주로 두 가지 방법이 있습니다. 첫 번째로는 <strong>AM</strong>과 <strong>PM</strong>을 사용하는 <strong>12시간제</strong>가 있고, 두 번째로는 <strong>24시간제</strong>가 있습니다.</h4><p>대부분의 나라에서는 24시간제 방식을 선호하지만, 12시간제는 라틴 아메리카와 영어권 국가에서 널리 사용됩니다. 12시간제 방식에서는 자정(AM)과 정오(PM)에 모두 12:00이 됩니다.</p><p>아래 표는 12시간제와 24시간제 시스템 간의 변환을 보여줍니다.</p><!--kg-card-begin: html--><table>
<thead>
<tr>
<th style="text-align: center;">12시간제</th>
<th style="text-align: center;">24시간제</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: center;">12:00 AM</td>
<td style="text-align: center;">00:00</td>
</tr>
<tr>
<td style="text-align: center;">01:00 AM</td>
<td style="text-align: center;">01:00</td>
</tr>
<tr>
<td style="text-align: center;">02:00 AM</td>
<td style="text-align: center;">02:00</td>
</tr>
<tr>
<td style="text-align: center;">03:00 AM</td>
<td style="text-align: center;">03:00</td>
</tr>
<tr>
<td style="text-align: center;">04:00 AM</td>
<td style="text-align: center;">04:00</td>
</tr>
<tr>
<td style="text-align: center;">05:00 AM</td>
<td style="text-align: center;">05:00</td>
</tr>
<tr>
<td style="text-align: center;">06:00 AM</td>
<td style="text-align: center;">06:00</td>
</tr>
<tr>
<td style="text-align: center;">07:00 AM</td>
<td style="text-align: center;">07:00</td>
</tr>
<tr>
<td style="text-align: center;">08:00 AM</td>
<td style="text-align: center;">08:00</td>
</tr>
<tr>
<td style="text-align: center;">09:00 AM</td>
<td style="text-align: center;">09:00</td>
</tr>
<tr>
<td style="text-align: center;">10:00 AM</td>
<td style="text-align: center;">10:00</td>
</tr>
<tr>
<td style="text-align: center;">11:00 AM</td>
<td style="text-align: center;">11:00</td>
</tr>
<tr>
<td style="text-align: center;">12:00 PM</td>
<td style="text-align: center;">12:00</td>
</tr>
<tr>
<td style="text-align: center;">01:00 PM</td>
<td style="text-align: center;">13:00</td>
</tr>
<tr>
<td style="text-align: center;">02:00 PM</td>
<td style="text-align: center;">14:00</td>
</tr>
<tr>
<td style="text-align: center;">03:00 PM</td>
<td style="text-align: center;">15:00</td>
</tr>
<tr>
<td style="text-align: center;">04:00 PM</td>
<td style="text-align: center;">16:00</td>
</tr>
<tr>
<td style="text-align: center;">05:00 PM</td>
<td style="text-align: center;">17:00</td>
</tr>
<tr>
<td style="text-align: center;">06:00 PM</td>
<td style="text-align: center;">18:00</td>
</tr>
<tr>
<td style="text-align: center;">07:00 PM</td>
<td style="text-align: center;">19:00</td>
</tr>
<tr>
<td style="text-align: center;">08:00 PM</td>
<td style="text-align: center;">20:00</td>
</tr>
<tr>
<td style="text-align: center;">09:00 PM</td>
<td style="text-align: center;">21:00</td>
</tr>
<tr>
<td style="text-align: center;">10:00 PM</td>
<td style="text-align: center;">22:00</td>
</tr>
<tr>
<td style="text-align: center;">11:00 PM</td>
<td style="text-align: center;">23:00</td>
</tr>
</tbody>
</table><!--kg-card-end: html--><h2 id="12-">12시간제</h2><p>하루는 자정부터 정오까지(AM 시간) 그리고 정오부터 자정까지(PM 시간) 두 개의 12시간 기간으로 나뉩니다.</p><p>AM과 PM 약어는 라틴어에서 유래했습니다.</p><ul><li>AM은 "ante meridiem"의 약어로, "정오 이전"을 의미합니다.</li><li>PM은 "post meridiem"의 약어로, "정오 이후"를 의미합니다.</li></ul><h2 id="24-">24시간제</h2><p>하루는 자정부터 자정까지이며, 0(자정)에서 23까지 24시간으로 나뉩니다. 시간은 자정 이후로 경과한 시간을 시간과 분으로 나타냅니다.</p><h1 id="12-24-">12시간제에서 24시간제로 변환</h1><p>하루의 첫 시간인 12:00 AM(자정)부터 12시간을 빼면 다음과 같이 표시됩니다:</p><ul><li>12:00 AM = 0:00</li><li>12:15 AM = 0:15</li></ul><p>1:00 AM 부터 12:59 PM 까지는 시간과 분이 그대로 유지됩니다:</p><ul><li>9:00 AM = 9:00</li><li>12:59 PM = 12:59</li></ul><p>1:00 PM 부터 11:59 PM 까지의 시간은 12시간을 더하면 다음과 같이 표시됩니다:</p><ul><li>3:17 PM = 15:17</li><li>11:59 PM = 23:59</li></ul><h1 id="24-12-">24시간제에서 12시간제로 변환</h1><p>하루의 첫 시간인 0:00(자정)부터 시작하여 12시간을 더하고 AM을 추가합니다.</p><ul><li>0:30 = 12:30 AM</li><li>0:55 = 12:55 AM</li></ul><p>1:00부터 11:59까지는 시간 뒤에 AM을 추가합니다.</p><ul><li>2:25 = 2:25 AM</li><li>9:30 = 9:30 AM</li></ul><p>12:00부터 12:59까지는 시간 뒤에 PM을 추가합니다.</p><ul><li>12:15 = 12:15 PM</li><li>12:48 = 12:48 PM</li></ul><p>13:00부터 23:59까지의 시간은 12시간을 빼고 PM을 추가합니다.</p><ul><li>16:55 = 4:55 PM</li><li>21:45 = 9:45 PM</li></ul> ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ 이메일 계정을 다시 만들지 않고 Gmail 사용자 이름을 변경하는 방법 ]]>
                </title>
                <description>
                    <![CDATA[  > 대부분의 사람들은 몇 년 동안 사용한 이메일 계정이 있습니다. 개명을 하거나, 혹은 k-pop 아이돌로 데뷔를 위해 가명을 사용하는 등의 개인적인 이유로 이름을 변경하고 싶다면 어떻게 해야 할까요? 걱정하지 마세요 - 몇 가지 간단한 단계로 변경할 수 있습니다. 하지만 주의사항이 있습니다.  * 이메일 주소, 혹은 아이디(username)을 변경할 수 ]]>
                </description>
                <link>https://www.freecodecamp.org/korean/news/how-to-change-your-gmail-name-without-creating-a-new-email-address/</link>
                <guid isPermaLink="false">6414a28820ccd505976712e9</guid>
                
                    <category>
                        <![CDATA[ Gmail ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Yeseul Lee ]]>
                </dc:creator>
                <pubDate>Tue, 08 Nov 2022 17:26:00 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/korean/news/content/images/2023/03/68747470733a2f2f63646e2d6d656469612d322e66726565636f646563616d702e6f72672f77313238302f3566396339663865373430353639643161346361343333332e6a7067.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p data-test-label="translation-intro">
        <strong>기사 원문:</strong> <a href="https://www.freecodecamp.org/news/how-to-change-your-gmail-name-without-creating-a-new-email-address/" target="_blank" rel="noopener noreferrer" data-test-label="original-article-link">How to Change Your Gmail Name Without Creating a New Email Address</a>
      </p><h4></h4><blockquote>대부분의 사람들은 몇 년 동안 사용한 이메일 계정이 있습니다. 개명을 하거나, 혹은 k-pop 아이돌로 데뷔를 위해 가명을 사용하는 등의 개인적인 이유로 이름을 변경하고 싶다면 어떻게 해야 할까요?</blockquote><p>걱정하지 마세요 - 몇 가지 간단한 단계로 변경할 수 있습니다. 하지만 주의사항이 있습니다.</p><ul><li>이메일 주소, 혹은 아이디(username)을 변경할 수 없습니다. 해당 계정의 <strong>사용자 이름</strong>만 변경할 수 있습니다.</li><li>사람들이 본인의 연락처에 사용자를 다른 이름으로 저장해 둔 경우 해당 이름이 표시됩니다. 이 경우에 사용자의 "새 이름"은 사용자가 보내는 이메일에서만 나타납니다.</li></ul><h1 id="1-gmail-">1 단계 : Gmail 열고 설정으로 이동</h1><p>Gmail을 열고, 오른쪽 상단에 있는 톱니바퀴 아이콘을 클릭합니다.</p><figure class="kg-card kg-image-card"><img src="https://i.ibb.co/YdBTR6h/Gmail-name-change-first-step.png" class="kg-image" alt="Gmail-name-change-first-step.png" width="1352" height="733" loading="lazy"></figure><p>왼쪽 메뉴에서 "모든 설정 보기"를 선택하세요.</p><h1 id="2-">2단계: 계정 탭으로 이동하세요.</h1><p>그런 다음 설정에서 상단 메뉴에서 "계정 및 가져오기" 탭을 선택하세요.</p><figure class="kg-card kg-image-card"><img src="https://i.ibb.co/84mKMn4/Gmail-name-change-edit.png" class="kg-image" alt="Gmail-name-change-edit.png" width="1352" height="733" loading="lazy"></figure><p>"다른 주소에서 메일 보내기:" 옵션을 찾아 "정보 수정" 옵션을 선택하세요.</p><h1 id="3-">3단계: 정보 수정</h1><p>"정보 수정" 버튼을 클릭하면 노란색 상자가 나타납니다. 현재 표시되는 이름을 볼 수 있고 그 아래에 새로운 이름을 입력할 수 있는 공백이 있습니다.</p><p>새로운 이름을 입력하고 해당 옵션을 선택하세요. 그런 다음 변경 사항을 저장하세요.</p><figure class="kg-card kg-image-card"><img src="https://i.ibb.co/5kpHDbK/Gmail-save-new-name.png" class="kg-image" alt="Gmail-save-new-name.png" width="1352" height="734" loading="lazy"></figure><p>짜잔! 이제 이메일을 보낼 때 새 이름이 표시됩니다.</p><h1 id="-">참고 사항</h1><p>이름을 변경할 수 없다면 다음과 같은 이유 때문일 수 있습니다.</p><ul><li>회사에서 해당 기능을 비활성화 했을 수 있습니다.</li><li>최근에 이름을 여러번 변경한 경우 적용이 되지 않을 수 있습니다.</li></ul> ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
