Skip to content

[이동훈] Web 자기소개 #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dh2906 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[이동훈] Web 자기소개 #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6056262
feat: 자기소개 수정
dh2906 Mar 20, 2024
e203c7b
feat: 인삿말 수정
dh2906 Mar 20, 2024
074c21c
feat: 퀴즈 작성
dh2906 Mar 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,14 @@ ol {
padding: 0;
}



li {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 20px;
margin-bottom: 5px;
margin-top: 20px;
}

li img {
Expand Down Expand Up @@ -71,4 +74,14 @@ a:hover {
footer {
text-align: center;
color: #888;
}

table, tr, td {
border: 1px solid;
border-collapse: collapse;
padding: 10px;
}

.box {
text-align: left;
}
109 changes: 93 additions & 16 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,35 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
<title>BCSDLab Web 과제</title>
<title>[이동훈] BCSDLab Web 과제</title>
</head>

<body>

<header>
<h1>안녕하세요, 최준호입니다!</h1>
<h1>반갑습니다!! 저는 이동훈입니다.</h1>
</header>

<section class="card">
<h2>기본 정보</h2>
<p><strong>이름: </strong>최준호</p>
<p><strong>학번: </strong>2019136135</p>
<p><strong>이름: </strong>이동훈</p>
<p><strong>학번: </strong>2021136091</p>
<p><strong>전공: </strong>컴퓨터공학부</p>
<p><strong>이메일: </strong>junho5336@gmail.com</p>
<p><strong>이메일: </strong>dhun2906@gmail.com</p>
<h3>
<a href="https://github.com/Choi-JJunho">Github 주소</a></p>
<a href="https://github.com/dh2906">Github 주소</a></p>
</h3>
</section>

<section class="card">
<h2>인사말</h2>
<p>
안녕하세요! 공유를 좋아하는 개발자 최준호입니다.<br>
저의 취미는 도전입니다. 새로운 일에 도전하는것을 항상 즐깁니다.<br>
최근에는 클라이밍에 흥미를 가져봤는데 꽤나 괜찮은 취미활동이라고 생각합니다<br>
검은 화면에 흰 글씨가 나오는 모습이 멋있어보여서 백엔드 트랙에 지원했습니다.<br>
안녕하세요! 배우고 성장하고 싶어서 BCSD에 지원한 이동훈입니다!!<br>
항상 공부를 할 때 내가 가고 있는 길이 맞는지, 잘 하고 있는지 확신을 못하고 있었습니다.<br>
그런데, BCSD 라는 동아리를 알게되고 저의 방향성을 잡아줄 수 있겠다는 생각에 지원하게 되었습니다.<br>
아직 부족한 점이 많지만 활동을 통해 점점 채워 나가려고 하고 있습니다. 잘 부탁 드립니다!!<br>


</p>
</section>

Expand All @@ -44,26 +46,101 @@ <h3>
HTTP Method 종류를 아는대로 설명해주세요.
</h3>
<div>
{위 질문에 대한 답변을 자유롭게 작성해주세요}<br>
HTML 태그를 적극 활용해도 좋습니다.
<table>
<tr bgcolor="#E5E5ED">
<td>메소드</td>
<td>기능</td>
</tr>
<tr>
<td>GET</td>
<td>서버로부터 리소스 정보를 요청합니다.</td>
</tr>
<tr>
<td>HEAD</td>
<td>GET과 기능은 같지만 응답 리소스에 Body가 없다.<br>
주로 서버의 상태를 확인하기 위해 사용한다.</td>
</tr>
<tr>
<td>POST</td>
<td>서버에게 리소스를 전송합니다.</td>
</tr>
<tr>
<td>DELETE</td>
<td>지정된 리소스를 삭제합니다.</td>
</tr>
<tr>
<td>PUT</td>
<td>리소스를 업데이트하기 위해 서버에게 리소스를 전송합니다.<br>
이미 있는 리소스라면 전송된 리소스로 덮어쓰기 됩니다.</td>
</tr>
<tr>
<td>PATCH</td>
<td>리소스를 수정합니다. <br>
PUT 메소드와는 다르게, PATCH 메소드는 원하는 리소스만 수정됩니다.</td>
</tr>
<tr>
<td>TRACE</td>
<td>일종의 루프백 메소드로 통신 상 어느 지점에서 오류가 발생했는지 확인할 수 있다.</td> </td>
</tr>

</table>
</div>
</li>
<li class="card">
<h3>
인터넷과 웹의 차이에 대해 설명해주세요.
</h3>
<div>
{위 질문에 대한 답변을 자유롭게 작성해주세요}<br>
HTML 태그를 적극 활용해도 좋습니다.
<h4>인터넷</h4>
인터넷은 여러 통신망을 하나로 연결했다는 뜻으로<br>
전 세계의 컴퓨터를 하나로 연결하는 거대한 통신망을 의미한다.

<h4>웹</h4>
웹은 인터넷으로 서로 연결된 컴퓨터를 통해 공유할 수 있는 문서를 의미한다.<br>
여러 웹사이트들도 문서로 이루어져 있다고 볼 수 있는 것이다.<br><br>

<h5>즉, 인터넷을 이용해 웹사이트를 방문할 수 있으므로 인터넷의 범위가 웹보다 더 크다고 할 수 있다.</h5>
</div>
</li>
<li class="card">
<h3>
www.naver.com을 치면 무슨 일이 일어날까요?
</h3>
<div>
{위 질문에 대한 답변을 자유롭게 작성해주세요}<br>
HTML 태그를 적극 활용해도 좋습니다.
<ol>
<li><b>1. URL 입력</b></li>
<div class="box">
웹사이트에 접속하기 위해서는 IP주소가 사실 필요하지만 웹사이트에 접속하려고 IP주소를 적어야 한다면 불편할 것이다.<br>
이런 문제를 해결하기 위해 나온 것이 DNS(Domain Name System)이다. DNS는 URL주소를 통해서 IP주소를 불러와준다.<br>
그렇지만 바로 DNS로 가는 것이 아니라 캐시 계층을 먼저 확인하게 된다.
</div>

<li><b>2. DNS 조회</b></li>
<div class="box">
캐시 계층에서 IP주소를 찾을 수 없다면 DNS 쿼리를 보내서 원하는 IP주소를 찾을 때까지 여러 DNS 서버를 검색하게된다.<br>
이러한 검색을 재귀 검색이라고 하며, IP주소를 찾을 수 없다는 응답이 반환될 때까지 검색한다.
</div>

<li><b>3. TCP 연결</b></li>
<div class="box">
브라우저가 IP주소를 찾았다면 여러 인터넷 프로토콜 중 하나인 TCP를 사용해 서버와 연결을 한다.
</div>

<li><b>4. 서버에 HTTP 요청 전송</b></li>
<div class="box">
서버와 연결도 했으니 브라우저는 웹사이트에 GET 메소드를 통해 웹페이지를 요청한다.
</div>

<li><b>5. 서버에서 요청 처리 후 응답 반환</b></li>
<div class="box">
서버는 브라우저로부터 요청을 받고 요청 핸들러에게 전달하여 응답을 생성한다. <br>
요청 핸들러는 여러 정보를 브라우저에게 특정 형식(ex: JSON, XML, HTML)으로 반환하며 응답한다.
</div>

<li><b>6. 서버가 HTTP로 응답 반환</b></li>

<li><b>7. 브라우저에 HTML 콘텐츠 표시</b></li>
</ol>
</div>
</li>
</ol>
Expand Down