<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>에그지니.Blog</title>
        <link>https://velog.io/</link>
        <description>디자이너 + 개발자 + 해커</description>
        <lastBuildDate>Fri, 11 Feb 2022 02:15:15 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>에그지니.Blog</title>
            <url>https://images.velog.io/images/egg_jini/profile/83f2e0c0-e6da-4a50-862d-11a8315e6609/egg.png</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. 에그지니.Blog. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/egg_jini" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[웹 해킹 연습 사이트 - Webhacking.kr 사용법]]></title>
            <link>https://velog.io/@egg_jini/Webhacking.kr-%EC%82%AC%EC%9A%A9%EB%B2%95</link>
            <guid>https://velog.io/@egg_jini/Webhacking.kr-%EC%82%AC%EC%9A%A9%EB%B2%95</guid>
            <pubDate>Fri, 11 Feb 2022 02:15:15 GMT</pubDate>
            <description><![CDATA[<ul>
<li>windows 11</li>
<li><a href="https://webhacking.kr">webhacking.kr</a></li>
</ul>
<p>사이트를 제작하면서 보안에도 신경을 써야 한다는 생각이 들었습니다.
이곳 저곳 찾아보니 보안에 대해서도 어느 정도 알면 좋지 않을까 해서</p>
<p><a href="https://postimg.cc/VJSg1XRk"><img src="https://i.postimg.cc/13BjGHVw/image.png" alt="image.png"></a></p>
<p>직접 웹 해킹을 해보면서 알아가 보도록 합시다. (물론 합법으로요...)</p>
<h2 id="웹-해킹-연습-사이트">웹 해킹 연습 사이트</h2>
<p>웹 해킹의 다양한 방식적인 부분을 게임(?) 같이 한번씩 해 볼 수 있는 사이트입니다.
워낙 웹 해킹 사이트 중에서도 유명한 사이트라서 한번쯤은 접해 봤을지도 모르겠네요.</p>
<p><a href="https://webhacking.kr">https://webhacking.kr</a></p>
<p>사이트 주소마저 웹해킹입니다.</p>
<h3 id="회원가입">회원가입</h3>
<p>사이트에 접속해서 왼쪽에 Login / Join 버튼을 눌러서 계정을 생성해 주세요.
계정이 있어야 진행이 될 듯 합니다.</p>
<p><a href="https://postimg.cc/5j7806jY"><img src="https://i.postimg.cc/jdKcMfbX/image.png" alt="image.png"></a></p>
<p>간단하게 ID와 비밀번호, 이메일을 적어 주면 바로 계정이 생성이 됩니다.
바로 위에서 로그인을 해 주면, 로그인에 성공했다고 메세지가 뜰 거예요.</p>
<h3 id="문제-풀어보기">문제 풀어보기</h3>
<p>Challenge(old) 라는 메뉴에 들어가면, 간단한 해킹 연습 문제들이 나오게 됩니다.</p>
<p><a href="https://postimg.cc/w3Z3ZJ7V"><img src="https://i.postimg.cc/kXX8VvCk/image.png" alt="image.png"></a></p>
<p>저는 이미 몇 개 풀어 보아서, 완료된 항목은 이렇게 하늘색으로 표시가 되네요.
옆에 아이콘으로 어떤 방식의 문제인지도 알려줍니다. </p>
<p><a href="https://postimg.cc/t7KC2jMv"><img src="https://i.postimg.cc/X7JGNNcW/image.png" alt="image.png"></a></p>
<p>문제를 클릭하면 이렇게 각 문제마다 다른 페이지가 나옵니다. 
어떻게 해야 할지 잘 알 수 있는 문제들도 있지만, 
대게는 뭘 해야할지 모르는.... 그런 문제들도 꽤 많습니다.</p>
<h2 id="문제-풀이">문제 풀이</h2>
<p>우선 제가 풀어 본 몇 가지 문제들을 풀이를 해 드리도록 하겠습니다.
우선 웹 해킹에 대해 공부하기 전에, php나 Js 같은 웹 구성 언어들의 기본적인 문법 등은 알고 있으면 도움이 됩니다.</p>
<p>저는 이미 풀어봐서 처음 모습과 좀 다르게 표시되는 것 때문에, 
다른 계정을 만들어서 진행하였습니다.</p>
<h3 id="1번-문제-php-쿠키">1번 문제 (php, 쿠키)</h3>
<p>1번 문제를 클릭하면, level 의 값과, view source라는 링크가 나오게 됩니다.
우선 view source를 클릭해 보세요. (우클릭으로 새 창에서 열어보세요)</p>
<pre><code class="language-php">&lt;?php  
if(!is_numeric($_COOKIE[&#39;user_lv&#39;])) $_COOKIE[&#39;user_lv&#39;]=1;  
if($_COOKIE[&#39;user_lv&#39;]&gt;=4) $_COOKIE[&#39;user_lv&#39;]=1;  
if($_COOKIE[&#39;user_lv&#39;]&gt;3) solve(1);  
echo &quot;&lt;br&gt;level : {$_COOKIE[&#39;user_lv&#39;]}&quot;;  
?&gt;</code></pre>
<p>이렇게 php 구문만 따로 해석해 보겠습니다.</p>
<p><strong>&#39;user_lv&#39;</strong> 이라는 쿠키가 숫자가 아니면, 쿠키의 값을 1로 정해줍니다.
그리고 쿠키의 값이 4 이상이면, 또 쿠키의 값을 1로 정합니다.
또 쿠키의 값이 3 초과면 1번 문제를 <strong>solve</strong> 했다고 구문이 나와 있습니다.</p>
<p>그렇다면 이 문제는 <strong>&quot;쿠키&quot;</strong> 를 조작하는 문제라고 볼 수 있겠네요.
<a href="https://chrome.google.com/webstore/">Chrome Webstore</a> 에서 <strong>&quot;EditThisCookie&quot;</strong> 라는 확장앱을 설치해 줍니다.</p>
<ul>
<li><a href="https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=ko">설치 바로가기</a></li>
</ul>
<p><a href="https://postimg.cc/hXJkwzQ9"><img src="https://i.postimg.cc/bwLqZ1zF/image.png" alt="image.png"></a></p>
<p>이렇게 확장 프로그램을 실행하면, 쿠키의 이름과 값이 나오게 되죠.
아까 php 구문에서 쿠키의 값이 3이 초과될 경우 성공이라고 했습니다.
그런데 그 구문 앞에 먼저 4 이상이면 1로 다시 세팅한다는 구문이 있어요.
성공하려면, 쿠키의 값이 3 초과 4 미만이여야 한다는 겁니다.
<code>3 &lt; user_lv &lt;4</code></p>
<p>그러면 3.5로 쿠키를 설정해 봅시다.</p>
<p><a href="https://postimg.cc/DWrMkqvb"><img src="https://i.postimg.cc/CKXT8N9J/image.png" alt="image.png"></a></p>
<p>뭐 이미 풀었다고 뜨긴 하지만... 성공입니다.</p>
<h3 id="14번-문제-js">14번 문제 (Js)</h3>
<p>14번 문제는 자바스크립트에 관한 문제인 것 같네요. 이 중에서 제가 그나마 잘 알고 있는 것이 자바스크립트니까 한번 풀어 보겠습니다.</p>
<p>페이지를 열면, 그냥 값을 입력하는 폼만 있고 아무것도 없네요. 
개발자 도구 [F12] 를 눌러서 소스를 한번 보도록 합시다.</p>
<p><a href="https://postimg.cc/WdMnhTQB"><img src="https://i.postimg.cc/K8WspYQ8/image.png" alt="image.png"></a></p>
<p><code>&lt;script&gt;</code> 부분을 펼쳐 보면, </p>
<pre><code class="language-javascript">function ck(){ 
var ul=document.URL; 
ul=ul.indexOf(&quot;.kr&quot;); 
ul=ul*30; 
if(ul==pw.input_pwd.value) { 
location.href=&quot;?&quot;+ul*pw.input_pwd.value; 
} else { 
alert(&quot;Wrong&quot;); } 
}</code></pre>
<p>이렇게 ck라는 함수 (function) 가 있네요.
form 소스를 보니, check 라는 버튼을 클릭하면 이 ck 함수를 실행하게 되어 있습니다.</p>
<p>ck 함수는 변수 ul의 값을 이 사이트의 URL로 정하고, 
이 ul 값에서 &quot;.kr&quot; 이 있는 글자가 몇번째인지를 다시 이 값으로 정하고
마지막으로 이 값에 30을 곱해줍니다. 그래서 최종 결과값이 ul 이 되겠죠.</p>
<p>조건문에서는 ul의 값이 pw.input_pwd.value, 
그러니까 아까 글자 입력하는 칸에 입력한 값이랑 같으면 됩니다.</p>
<p>쉽게 이야기해서, ul의 값을 알아내서 그 칸에 입력하면 된다는거죠.
알아내 봅시다.</p>
<p>아까 개발자 모드 [F12] 에서 두 번째 탭에 보면 <strong>&quot;콘솔&quot;</strong> 이라는 탭이 있습니다.
여기서 간단한 Js 구문을 실행할 수 있죠. 우선 이 코드를 입력해 봅시다.</p>
<pre><code class="language-javascript">alert(document.URL);</code></pre>
<p>여기서 alert는 괄호 안의 값을 알림창으로 출력한다는 내용입니다.</p>
<p><a href="https://postimg.cc/V08ss9nQ"><img src="https://i.postimg.cc/sxBMcw2X/image.png" alt="image.png"></a></p>
<p>이게 첫번째 ul의 값입니다.
이제 이 코드를 입력해 볼까요?</p>
<pre><code class="language-javascript">alert(&quot;https://webhacking.kr/challenge/js-1/&quot;.indexOf(&quot;.kr&quot;);</code></pre>
<p>이번에는 document.URL에서 .kr이 몇 번째 글자인지를 알려줍니다.
<a href="https://postimg.cc/k69XqFxr"><img src="https://i.postimg.cc/PxvLbSJq/image.png" alt="image.png"></a>
18번째라고 하네요.
그러면 여기에 30을 곱해 볼까요? 계산기를 써도 되지만, 자바스크립트로 계산을 할 수도 있답니다.
<a href="https://postimg.cc/tns0jYmQ"><img src="https://i.postimg.cc/gjDG3hVJ/image.png" alt="image.png"></a>
그러면, 540을 입력하고 &quot;check&quot; 버튼을 눌러 봅시다.
<a href="https://postimg.cc/GHs0gTyv"><img src="https://i.postimg.cc/15v9tpR7/image.png" alt="image.png"></a>
성공입니다.</p>
<h3 id="16번-js">16번 (Js)</h3>
<p>자바스크립트 문제가 나름 쉬운지라, 마지막으로 Js 문제만 하나 더 풀어 봅시다.
<a href="https://postimg.cc/k65zQ2C6"><img src="https://i.postimg.cc/QtgDr7nb/image.png" alt="image.png"></a>
이렇게 깜깜한 화면에 노란색 <strong>별</strong> 하나가 있네요.
마찬가지로 개발자 도구 [F12]를 눌러서 스크립트 부분만 확인해 봅시다.</p>
<pre><code class="language-javascript">document.body.innerHTML+=&quot;&lt;font color=yellow id=aa style=position:relative;left:0;top:0&gt;*&lt;/font&gt;&quot;; 
function mv(cd){ 
kk(star.style.left-50,star.style.top-50); 
if(cd==100) star.style.left=parseInt(star.style.left+0,10)+50+&quot;px&quot;; 
if(cd==97) star.style.left=parseInt(star.style.left+0,10)-50+&quot;px&quot;; 
if(cd==119) star.style.top=parseInt(star.style.top+0,10)-50+&quot;px&quot;; 
if(cd==115) star.style.top=parseInt(star.style.top+0,10)+50+&quot;px&quot;; 
if(cd==124) location.href=String.fromCharCode(cd)+&quot;.php&quot;; // do it! } 
function kk(x,y){ rndc=Math.floor(Math.random()*9000000); 
document.body.innerHTML+=&quot;&lt;font color=#&quot;+rndc+&quot; id=aa style=position:relative;left:&quot;+x+&quot;;top:&quot;+y+&quot; onmouseover=this.innerHTML=&#39;&#39;&gt;*&lt;/font&gt;&quot;; }</code></pre>
<p>html 코드도 보면</p>
<pre><code class="language-html">&lt;body bgcolor=&quot;black&quot; onload=&quot;kk(1,1)&quot; onkeypress=&quot;mv(event.keyCode)&quot;&gt;</code></pre>
<p>keypress, 그러니까 키보드를 클릭하는 이벤트가 발생하면 mv 함수를 실행하네요.
그리고 자바스크립트에 cd의 값이 124일때 주석에 //do it! 이라고 되어 있네요.
그러면 onkeypress 이벤트를 그냥 cd = 124로 수정해 보도록 합시다.</p>
<pre><code class="language-html">&lt;body bgcolor=&quot;black&quot; onload=&quot;kk(1,1)&quot; onkeypress=&quot;mv(event.cd=124)&quot;&gt;</code></pre>
<p>그러고 키보드의 아무 키나 눌러보면,
<a href="https://postimg.cc/rDPrVbpB"><img src="https://i.postimg.cc/vmQLzwwZ/image.png" alt="image.png"></a>
바로 풀리네요.
사실 이 문제는 원래 이렇게 푸는 문제가 아닙니다.
별의 위치나 그런 것들을 조합해서 알아내야 하지만, 이렇게 바로 푸는 방법도 있습니다.</p>
<h2 id="마무리">마무리</h2>
<p>이런 문제들을 처음 접해보긴 했지만 풀어 보니 재미있긴 하네요.
여러분들도 사이트에 들어가서 한 번 풀어 보시면 좋을 듯 합니다.
앞으로 보안 관련 글들도 종종 올릴 테니 많이 찾아주세요!</p>
<h2 id="링크">링크</h2>
<ul>
<li><a href="webhacking.kr">연습 사이트</a></li>
<li><a href="http://www.tcpschool.com/php/php_intro_intro">PHP</a></li>
<li><a href="(https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=ko)">쿠키 조작 확장앱</a><img src="https://images.velog.io/images/egg_jini/post/c599bdc3-aaf9-4e13-bea6-5a873458e82e/webhacking.png" alt=""></li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[깃허브 프로필부터 포크까지 
한방에 끝내기]]></title>
            <link>https://velog.io/@egg_jini/%EA%B9%83%ED%97%88%EB%B8%8C</link>
            <guid>https://velog.io/@egg_jini/%EA%B9%83%ED%97%88%EB%B8%8C</guid>
            <pubDate>Fri, 11 Feb 2022 02:09:54 GMT</pubDate>
            <description><![CDATA[<ul>
<li>windows 11<sup> <a href="https://eggdesign.tistory.com/35">더 알아보기</a></sup></li>
<li>github / stackEdit  </li>
</ul>
<p>개발자이거나, 코딩 / 프로그래밍에 관심이 있으시다면
한 번쯤은 <strong>깃허브</strong><sup><a href="#1">1</a></sup> 에 대해 들어 보셨을 겁니다.</p>
<p><em>(아니라도 상관 없어요~^^)</em></p>
<p>이 <strong>블로그</strong>도 깃허브를 이용해서 만들어진 블로그랍니다!
하지만 깃허브 블로그에 관한 내용은 좀 어려우니, 
이번엔 깃허브 사용법을 간단하게 알려 드리도록 하겠습니다!</p>
<h2 id="회원가입">회원가입</h2>
<p><a href="https://postimg.cc/fJZVhpnR"><img src="https://i.postimg.cc/Nf2mRvdm/image.png" alt="image.png"></a></p>
<p>깃허브👉<a href="https://github.com">바로가기</a></p>
<p>우선 깃허브에 들어가면, 이런 (있어보이는) 페이지가 뜹니다.
아쉽게도 <strong>외국</strong> 페이지라서 영어로 봐야 할 듯 하네요.
깃허브 계정이 있다면 다음 단계로 넘어가셔도 됩니다. 계정이 없으신 분들은 계정을 새로 만들어 주셔야 해요!</p>
<p><strong>sign up</strong>이라는 버튼을 눌러서 회원가입 창으로 들어가 주세요.</p>
<ol>
<li><p>이메일 입력
<a href="https://postimg.cc/QHxTRCTM"><img src="https://i.postimg.cc/kXWvRtMW/image.png" alt="image.png"></a></p>
</li>
<li><p>비밀번호 입력
<a href="https://postimg.cc/21LVDZ8C"><img src="https://i.postimg.cc/x1tHLvwN/image.png" alt="image.png"></a></p>
</li>
<li><p>닉네임 설정
<a href="https://postimg.cc/PNfJqcr3"><img src="https://i.postimg.cc/G3GyXn0C/image.png" alt="image.png"></a></p>
</li>
<li><p>인간 증명 <sup><a href="#2">2</a></sup>
<img src="https://blog.kakaocdn.net/dn/xCBvJ/btrrosxl8Qs/OHMjWCNH2uzNvN5yaT1VVK/img.png" alt=""></p>
</li>
</ol>
<p>이메일 인증 등 간단한 절차를 걸치면 바로 <strong>깃허브</strong> 계정이 생성됩니다.
이제 이 계정으로 로그인을 하시면 됩니다!</p>
<h2 id="레포지토리-만들기">레포지토리 만들기</h2>
<p>우리가 <strong>저장소</strong> 라고 부르던 것을 깃허브에서 <strong>레포지토리</strong> 라고 부릅니다.
<em>(뭐 대충 이렇게 이해하면 될 것 같네요...)</em></p>
<p>레포지토리를 만들면, 그 안에 <strong>폴더</strong>와 <strong>파일</strong>들을 만들어 줄 수 있어요.
그러니 한번 만들어 봅시다.</p>
<p><a href="https://postimg.cc/YvQMRfCL"><img src="https://i.postimg.cc/13jX9vxB/image.png" alt="image.png"></a></p>
<p>깃허브에 로그인하면, 이런 화면을 볼 수 있습니다.
아직 레포지토리를 만들지 않아서 없는 경우에는, 
왼쪽에 초록색 버튼이 있을 거예요. </p>
<p><code>Create repository</code>라는 버튼을 클릭해 주시면 됩니다.
<em>이 버튼이 표시되지 않을 경우에는 <code>New</code> 버튼을 눌러주세요.</em></p>
<p><a href="https://postimg.cc/2brQywVQ"><img src="https://i.postimg.cc/FRJDPCvB/image.png" alt="image.png"></a></p>
<p>레포지토리 생성 창입니다. 
여기서 기본 정보들을 입력해 줘야 해요 <em>(좀 귀찮지만...)</em>
첫 레포지토리니까 본인 <strong>닉네임</strong>을 제목으로 레포지토리를 만들어 주세요. 이 레포지토리의 <code>Readme.md</code> 파일은 여러분 깃허브 <strong>프로필</strong>에 표시됩니다.</p>
<p><a href="https://postimg.cc/1fmyBNNv"><img src="https://i.postimg.cc/jdNCsHqY/image.png" alt="image.png"></a></p>
<p><em>이렇게 대놓고 말이예요</em></p>
<p>아 맞다! Add readme file 체크란에 체크도 꼭 해주세요.</p>
<p>그렇게 여러분의 첫 레포지토리를 만들고 나면, 다시 깃허브 홈으로 들어와 보세요. 여러분이 만든 것을 한번 구경해 봅시다.</p>
<p>오른쪽 위에 <sup>아주 작게</sup>  있는 <strong>프로필 사진</strong>을 클릭하면, <code>Your Profile</code>이라는 버튼이 <strong>뿅!</strong> 하고 나타납니다. 클릭해주세요.</p>
<p><a href="https://postimg.cc/Q9Nrb2FH"><img src="https://i.postimg.cc/nzBcHZZY/image.png" alt="image.png"></a></p>
<p>아마 이런식으로 표시될 것 같습니다.</p>
<h2 id="프로필-꾸미기">프로필 꾸미기</h2>
<p>여러분의 깃허브 프로필을 꾸미려면, 아까 여러분 닉네임으로 만들었던 <strong>레포지토리</strong> 안에 있는 <code>Readme.md</code> 파일을 수정하면 됩니다. <em>(말은 쉽죠?)</em>
이 .md 파일 확장자는 <strong>&quot;마크다운&quot;</strong><sup><a href="#3">3</a></sup> 파일을 뜻해요. 그래서 마크다운 문법을 이용하면 쉽게 프로필을 작성할 수 있습니다.</p>
<h3 id="기본적인-마크다운-문법">기본적인 마크다운 문법</h3>
<p>마크다운을 A부터 Z까지 설명하기에는 힘드니까 <em>(절대 귀찮은게 아니고...)</em>
제 프로필에 쓰인 마크다운에 대해서 설명을 해 드릴게요.</p>
<ol>
<li>헤딩 (제목)
마크다운에서 제목은 샵 [#] 으로 표현합니다.
이 샵의 개수에 따라서 <strong>제목의 크기</strong>가 정해지죠. 헤딩은 1단계부터 6단계까지 사용할 수 있고, 1단계가 제일 큰 제목이랍니다. <sup><a href="#4">4</a></sup></li>
</ol>
<pre><code class="language-markdown"># This is Heading - 1
## This is Heading - 2
### This is Heading - 3
#### This is Heading - 4
##### This is Heading - 5
###### This is Heading - 6</code></pre>
<ol start="2">
<li>순서 없는 목록 (점)</li>
</ol>
<ul>
<li><p>👋 Hi, I’m @Eggjini</p>
</li>
<li><p>👀 I’m interested in Programing</p>
</li>
<li><p>🌱 I’m currently learning Visual C++, Python, MySQL, Md</p>
</li>
<li><p>💞️ I’m looking to translate Readme to Korean</p>
</li>
<li><p>📫 How to reach me Just send a mail <a href="mailto:&#101;&#103;&#x67;&#x2e;&#x64;&#101;&#x73;&#x69;&#103;&#x6e;&#64;&#100;&#x61;&#x75;&#x6d;&#46;&#110;&#101;&#x74;">&#101;&#103;&#x67;&#x2e;&#x64;&#101;&#x73;&#x69;&#103;&#x6e;&#64;&#100;&#x61;&#x75;&#x6d;&#46;&#110;&#101;&#x74;</a></p>
<p>이 결과를 보시면, 각각 목록 앞에 점이 있는 것을 볼 수 있습니다. 
이 점은 대쉬 (-) 를 나타내서 사용해요. 키보드의 <code>0</code> 옆에 있는 <code>빼기</code> 버튼이요.</p>
</li>
</ul>
<pre><code class="language-markdown">- 👋 Hi, I’m @Eggjini
- 👀 I’m interested in Programing
- 🌱 I’m currently learning Visual C++, Python, MySQL, Md
- 💞️ I’m looking to translate Readme to Korean
- 📫 How to reach me Just send a mail &lt;egg.design@daum.net&gt;</code></pre>
<ol start="3">
<li>순서 있는 목록 (숫자)
이거는 제일 간단한 구문입니다. 그냥 숫자를 쓰고, 마침표 (.)를 붙이면 자동으로 숫자가 붙은 목록을 만들 수 있어요.</li>
</ol>
<h3 id="스킬-배지-만들기">스킬 배지 만들기</h3>
<p>제가 처음 깃허브를 보고 제일 궁금해했던 <strong>배지</strong> 입니다.</p>
<p>생긴건</p>
<p><a href="https://postimg.cc/w3hGvfMr"><img src="https://i.postimg.cc/FFq5Tw4h/image.png" alt="image.png"></a></p>
<p>이렇게 뭔가 <em>있어보이게</em>  생겼는데, 
은근슬쩍 <strong>내 실력이 이정도다</strong> 자랑할 수 있습니다.</p>
<ul>
<li>배지는 <a href="https://shields.io">https://shields.io/</a> 이 사이트</li>
<li>아이콘은 <a href="https://simpleicons.org">https://simpleicons.org</a> 이걸 참고하시면 됩니다.</li>
</ul>
<p>코드를 보여드리자면...</p>
<pre><code class="language-markdown">&lt;img src=&quot;https://img.shields.io/badge/C++-1E2B67?style=for-the-badge&amp;logo=C%2B%2B&amp;logoColor=ffffff&quot;/&gt;</code></pre>
<p><strong>결과:</strong>  <img src="https://img.shields.io/badge/C++-1E2B67?style=for-the-badge&logo=C%2B%2B&logoColor=ffffff"/></p>
<p>아이콘 사이트 <a href="https://simpleicons.org">https://simpleicons.org/</a> 에 접속해서 아이콘의 이름을 확인하고, 아래 코드에 대입하면 됩니다.</p>
<pre><code class="language-markdown">&lt;img src=&quot;https://img.shields.io/badge/내용-배경색깔?style=스타일&amp;logo=로고이름&amp;logoColor=로고 색깔&quot;/&gt;  </code></pre>
<p>여기서 색깔은 모두 16진수 색상 코드를 말합니다.
Red나 Blue, White 같은 색상 이름도 가능해요.</p>
<p>내용에는 배지에 표기될 글자를 입력하시면 됩니다. </p>
<p>스타일에는 plastic,  flat,  flat-square,  for-the-badge,  social 이 있습니다.
저는 for-the-badge 스타일을 사용하고 있어요.</p>
<p><a href="https://postimg.cc/LgFSKJX0"><img src="https://i.postimg.cc/qqzvKnd0/image.png" alt="image.png"></a>
각각 스타일에 따른 모양입니다.</p>
<p>로고이름에는 아까 아이콘 사이트에서 찾은 아이콘의 이름을 대입하면 됩니다. 예외적으로 C++는 그대로 쓰는 것이 아니라, C%2B%2B라고 작성해야 해요.</p>
<h3 id="깃허브-스탯">깃허브 스탯</h3>
<p>깃허브 스탯은
깃허브에서 내가 활동한 데이터를 바탕으로 스탯을 시각적으로 제공해줍니다. 
마찬가지로, 내가 <strong>이만큼  한다</strong> 라는걸 보여줄 수 있겠죠?  </p>
<ol>
<li><p>많이 쓴 언어</p>
<pre><code class="language-markdown">[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=깃허브 닉네임&amp;theme=radical&amp;layout=compact&amp;)](https://github.com/깃허브 닉네임/github-readme-stats)  </code></pre>
<p>결과: 
<a href="https://github.com/Eggjini/github-readme-stats"><img src="https://github-readme-stats.vercel.app/api/top-langs/?username=Eggjini&theme=radical&layout=compact&" alt="Top Langs"></a>  </p>
</li>
<li><p>깃허브 스탯</p>
<pre><code class="language-markdown">![깃허브 닉네임&#39;s GitHub stats](https://github-readme-stats.vercel.app/api?username=깃허브 닉네임&amp;theme=radical&amp;show_icons=true)</code></pre>
</li>
</ol>
<p>결과:
<img src="https://github-readme-stats.vercel.app/api?username=Eggjini&theme=radical&show_icons=true" alt="Eggjini&#39;s GitHub stats">
 3. 트로피</p>
<pre><code class="language-markdown">![trophy](https://github-profile-trophy.vercel.app/?username=깃허브 닉네임&amp;theme=radical)</code></pre>
<p> <img src="https://github-profile-trophy.vercel.app/?username=Eggjini&theme=radical" alt="trophy"></p>
<p>이 스탯 마크다운들은 제가 표시해 둔 <strong>&quot;깃허브 닉네임&quot;</strong> 부분을 잘 입력해 주셔야 합니다. 안그럼 작동이 안될수도 있어요.
<em>(아니면 다른 사람 스탯이 들어가는 경우도 있습니다)</em></p>
<h2 id="다른-사람-파일-이용하기">다른 사람 파일 이용하기</h2>
<p>저는 블로그 예제파일을 <strong>깃허브</strong>를 통해서 공유하고 있습니다.
사실상 제일 편리합니다. (히힛)</p>
<h3 id="fork">Fork</h3>
<p>이렇게 다른 사람이 올려놓은 파일을 깃허브에서는 나한테 가져올 수 있습니다. 정확히 말하면 <code>Ctrl + C</code> 해서 <code>Ctrl + V</code> 하는 개념이예요.
레포지토리의 위쪽에 보시면 <code>Fork</code> 라는 버튼이 있는데, 말 그대로 <strong>포크</strong>로 집어서 가져옵니다. </p>
<p>우선 이번에는 로컬 저장소로 저장하지 않고, 내 레포지토리에서 바로 수정하는 방법을 알아봅시다.</p>
<ul>
<li>👉 <a href="https://github.com/Eggjini/Forkit">[연습용 깃허브 레포지토리]</a></li>
</ul>
<p>이 링크를 따라 들어가면 제가 <strong>연습</strong>을 하라고 만들어 둔 레포지토리가 나올 겁니다. </p>
<p><a href="https://postimg.cc/Cz7j1t8m"><img src="https://i.postimg.cc/3x59LQx5/image.png" alt="image.png"></a></p>
<p>요렇게 레포지토리가 나오면, 저~ 오른쪽 위에 <code>Fork</code> 라는 버튼이 보일 겁니다. 별 모양 버튼 왼쪽에요! 이 <code>Fork</code> 버튼을 누르시면, 이 연습용 레포지토리가 여러분의 계정에 복제됩니다.</p>
<p>다시, 여러분의 프로필에 들어가서 두 번째 탭인 <strong>&quot;Repository&quot;</strong> 를 눌러 주면</p>
<p><a href="https://postimg.cc/G9hDfKVD"><img src="https://i.postimg.cc/VsXFdHFK/image.png" alt="image.png"></a></p>
<p>이렇게 여러분의 레포지토리가 보일 겁니다.
방금 <strong>Fork</strong> 한 레포지토리는 아마 맨~ 위에 있을 거예요.
그 레포지토리를 클릭해서 들어가보세요.
그리고 <code>Readme.md</code> 파일을 클릭해서 열어보세요.</p>
<p><a href="https://postimg.cc/BtrqFQTv"><img src="https://i.postimg.cc/yYdWwDW0/image.png" alt="image.png"></a></p>
<p>오른쪽 위에, <strong>연필 모양</strong> 아이콘을 눌러서 편집 모드로 들어가도록 합시다.</p>
<p><a href="https://postimg.cc/rDJc71vd"><img src="https://i.postimg.cc/TP8wLQ0c/image.png" alt="image.png"></a></p>
<p>여기서 제가 <code>이 부분을 수정해 보세요!</code> 라고 적어 놓은 부분을 지우고, 마음껏 수정해 보세요.
그러고 나서 아래쪽에 초록색 <code>Commit Change</code> 버튼을 누르면 됩니다.</p>
<p><a href="https://postimg.cc/WhmPJmp9"><img src="https://i.postimg.cc/hP646Mkq/image.png" alt="image.png"></a></p>
<p><em>(수정한 게 없으면 커밋이 되지 않아요~)</em>
그러면 이 파일은 여러분의 레포지토리에서만 저장된 거랍니다.</p>
<h3 id="pull-request">Pull request</h3>
<p>아까 수정한 파일은 그저 여러분의 <strong>복사본</strong> 레포지토리에서만 반영이 된 거랍니다. 
제가 만든 원본에는 절대 반영되지 않아요. 나는 그냥 이렇게만 사용할 거예요~ 하는 분들은 상관 없지만, 다른 사람의 코드에서 <strong>버그!</strong> 나 <strong>오류</strong> ,<strong>오타</strong> 를 찾았을 경우, 또는 내 아이디어를 이 코드에 반영시키고 싶다 하시면 원본 파일에 제가 수정한 내용을 <strong>합쳐 주세요~</strong> 부탁을 해야 합니다.</p>
<p>그 방법이 바로 <strong>Pull request</strong> 예요.
여러분이 아까 복제해 와서, 수정한 레포지토리에서 
두 번째 탭 <code>Pull request</code> 에 들어오면, 아래와 같은 화면이 나옵니다.</p>
<p><a href="https://postimg.cc/G97XgH7c"><img src="https://i.postimg.cc/L6RGXPjZ/image.png" alt="image.png"></a></p>
<p>여기서 또 파릇파릇한 초록색 <code>New Pull request</code> 버튼을 눌러 주세요.</p>
<p><a href="https://postimg.cc/CdzG1J7g"><img src="https://i.postimg.cc/G3jqX5sH/image.png" alt="image.png"></a></p>
<p>그러면 이렇게 여러분이 수정한 부분이 한눈에 보이게 됩니다.</p>
<p><a href="https://postimg.cc/8jLrJYrq"><img src="https://i.postimg.cc/TY4jSM2Y/image.png" alt="image.png"></a></p>
<p>아래쪽에 이렇게 메시지를 쓸 수 있는 칸이 있는데, 여기에 여러분이 <strong>수정</strong>한 내용을 잘 알아볼 수 있도록 설명을 해 주셔야 해요. 그래야 개발자도 여러분의 수정사항을 반영할 확률이 크답니다.</p>
<p>어쨌든 수정한 내용을 다 확인하고, 또 초록색 <code>Create pull request</code> 버튼을 누르면</p>
<p><a href="https://postimg.cc/JDBhwyN9"><img src="https://i.postimg.cc/0QVKwDb2/image.png" alt="image.png"></a></p>
<p>이렇게 원본 파일에 <strong>Pull request</strong>가 달리게 됩니다.
원본 파일 주인이 이를 확인하고, 질문 사항이 있으면 토론도 하고 해서 
수정 사항을 <strong>Merge</strong> 하게 되면, 여러분의 수정 사항이 자동으로 원본 파일에 반영됩니다.</p>
<p>이를 통해 개발자들과 소통하고, 여러분의 프로그래밍, 코딩 실력도 향상시킬 수 있다고 생각해요. 그래서 개발자들이 <strong>깃허브</strong>를 많이 사용하는지도 모르죠.</p>
<hr>
<p>이 글을 여기까지 읽으신 여러분, 수고 많으셨습니다.
보면서 한번씩 꼭! 따라해 보세요. 보는 걸로는 절대 기억이 나지 않더라고요.</p>
<p>다음 포스팅에서 다시 돌아오겠습니다~</p>
<h2 id="각주">각주</h2>
<p><a name="1">[1]</a>: 깃허브는 분산 버전 관리 툴인 깃 저장소 호스팅을 지원하는 웹 서비스이다. 루비 온 레일스로 작성되었다. GitHub는 영리적인 서비스와 오픈소스를 위한 무상 서비스를 모두 제공한다. <em>위키백과</em></p>
<p><a name="2">[2]</a>: 생각보다 어려울지도 모른다. </p>
<p><a name="3">[3]</a>: 마크다운은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. <em>위키백과</em></p>
<p><a name="4">[4]</a>: 샵을 7개 쓰면 표시되지 않는다. (6이 최대)
####### This is Heading?</p>
<h2 id="링크">링크</h2>
<ul>
<li><a href="https://eggdesign.tistory.com/35">윈도우 11 설치 알아보기</a></li>
<li><a href="https://github.io">깃허브 바로가기</a></li>
<li><a href="https://github.com/Eggjini/Forkit">연습용 레포지토리</a></li>
<li><a href="https://shields.io/">배지 사이트</a></li>
<li><a href="https://simpleicons.org/">아이콘 사이트</a><img src="https://images.velog.io/images/egg_jini/post/9c2a4146-64bd-4ae8-9165-b44b961812b2/github.png" alt=""></li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[그라데이션 CSS 간편하게 만들기 - WebGradient]]></title>
            <link>https://velog.io/@egg_jini/%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98-CSS</link>
            <guid>https://velog.io/@egg_jini/%EA%B7%B8%EB%9D%BC%EB%8D%B0%EC%9D%B4%EC%85%98-CSS</guid>
            <pubDate>Fri, 11 Feb 2022 02:02:26 GMT</pubDate>
            <description><![CDATA[<ul>
<li>Windows 11</li>
<li>CodeSandbox / VScode</li>
</ul>
<p>HTML<sup><a href="#HTML">1</a></sup> 이나 CSS<sup><a href="#CSS">2</a></sup> 를 이용해서 사이트를 제작하고, 디자인하다 보면!</p>
<p><a href="https://postimg.cc/fkvsZZPr"><img src="https://i.postimg.cc/y6M8m8ys/image.png" alt="image.png"></a>
이런 그라데이션<sup><a href="#gradeition">3</a></sup> 이 어딘가에 필요하곤 하죠.</p>
<p>그럴 때마다 구글 검색을 통해서 그라데이션 불편하게 찾지 말고!
이제 이 사이트 하나로 간편하게 그라데이션 CSS를 적용해 보세요.</p>
<ul>
<li>사이트 바로가기: <a href="https://webgradients.com/">https://webgradients.com/</a></li>
</ul>
<h1 id="사용-방법">사용 방법</h1>
<p>이 사이트를 사용하는 방법은 정말 간단합니다.</p>
<p>우선, 사이트에 접속해서, 원하는 그라데이션 효과를 찾은 다음
바로 CSS코드를 복사 할 수 있어요.</p>
<p>1) 원하는 그라데이션 효과 찾기</p>
<p><a href="https://postimg.cc/tZ2BSrr2"><img src="https://i.postimg.cc/cCNPJ2fy/image.png" alt="image.png"></a>
이 사이트에는 무려 180가지의 그라데이션 효과들이 있습니다.
각각 그라데이션들의 색상 코드와 png 파일<sup><a href="#png">4</a></sup> 도 무료로 제공된다고 하네요~</p>
<p>2) CSS (스타일시트) 코드 복사</p>
<p>CSS는 Cascading Style Sheets 의 줄임말로, 마크다운 언어<sup><a href="#MD">5</a></sup> 가
실제로 표시되는 형식이나, 디자인 같은 것들을 표시하는 스타일시트 언어랍니다.
그라데이션의 CSS 코드를 복사하면 여기에 나타나는 그라데이션들을 모드 사용할 수 있어요!</p>
<p><a href="https://postimg.cc/KRrRdd7G"><img src="https://i.postimg.cc/8PxMrGj6/image.png" alt="image.png"></a> </p>
<p>예를 들어, 이러한 그라데이션 효과의 CSS를 사용하고 싶다 하시면
오른쪽 아래 Copy CSS를 클릭하시면 자동으로 클립보드에 복사된답니다.
CSS 코드 뿐만 아니라, 16진수 색상 코드<sup><a href="#color">6</a></sup>도 표기되어서 
포토샵이나 일러스트 같은 프로그램에서도 사용하실 수 있어요.</p>
<h1 id="사용--예시">사용  예시</h1>
<p>저 산뜻한 그라데이션의 CSS를 복사 해 봤습니다.</p>
<p><code>background-image: linear-gradient(to top, #e14fad 0%, #f9d423 100%);</code></p>
<p>무슨 뜻인지 알 필요는 없고, <em>(알아두면 좋긴 합니다만)</em>
이 CSS를 한번 적용해 보도록 할게요.</p>
<p><a href="https://postimg.cc/RWWNpGRG">
<img src="https://i.postimg.cc/nhkBzPQ8/image.png" alt="image.png"></a> 
이렇게 버려둔 HTML 파일을 재탕했습니다...
webgradient 라는 class로 새로운 div 를 만들어 주고, 
연결된 CSS파일에 webgradient라는 클래스에 아까 복사해둔 코드를 넣어봤어요~</p>
<p><a href="https://postimg.cc/5Hjq3wYM"><img src="https://i.postimg.cc/k5v17s7D/image.png" alt="image.png"></a>
화려한 그라데이션이 저 작은 글씨<sup><a href="#text">7</a></sup>를 감싸고 있네요...</p>
<h1 id="각주">각주</h1>
<p><a name="HTML">[1]</a>: <strong>HTML</strong>(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로,
 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다.</p>
<p> <a name="CSS">[2]</a>: 캐스케이딩 스타일 시트는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어로, HTML과 XHTML에 주로 쓰인다.</p>
<p><a name="gradeition">[3]</a>: <em>그라데이션</em>(Gradation)은 하나의 색채에서 다른 색채로 변하는 단계, 혹은 그러한 기법을 의미하는 단어다.</p>
<p><a name="png">[4]</a>: &#39;Portable Network Graphics&#39;의 약자로서 그림 파일 형식 가운데 하나이다.</p>
<p><a name="MD">[5]</a>: 마크다운은 일반 텍스트 기반의 경량 마크업 언어다. 
일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되어진다.</p>
<p><a name="color">[6]</a>: 예시) #ffffff (흰색) #ff0000 (빨간색) #000000 (검정색)</p>
<p><a name="text">[7]</a>: &quot;This is Webgradient!&quot;</p>
<h1 id="링크">링크</h1>
<p>오늘 포스팅 관련 코드들은 모두 <strong>깃허브 레포지토리</strong>에 업로드 되어 있습니다.</p>
<ul>
<li>깃허브 바로가기: <a href="https://github.com/Eggjini/Blog-Examples">https://github.com/Eggjini/Blog-Examples</a></li>
</ul>
]]></description>
        </item>
    </channel>
</rss>