<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>기본문서</title>
</head>
<body>
<h1>제목: 야! 너도 할 수 있어, HTML</h1>
<!-- <hr> -->
<p>HTML은 프론트엔드 언어로 매운 쉬운 언어에 속합니다.
특히 매우 쉽게 읽을 수 있어 직관적인 표현이 가능합니다.
<br>이를 활용하여 간단한 페이지를 구성해볼 수 있습니다.
</p>
<p>CSS</p>
<p><b>자바스크립트</b></p>
<blockquote>
다만 그 페이지가 여타의 다른 페이지처럼 작동하게 하려면 백엔드 부분이 존재해야 합니다.
</blockquote>
<p>
<strong>이것은 굵은 글씨로 강조된 텍스트입니다.</strong> <br>
<b>이것은 b로 작성한 강조된 텍스트입니다.</b><br>
<em>이것은 em으로 작성한 이탤릭체로 강조된 텍스트입니다.</em><br>
<i>이것은 i로 작성한 이탤릭체로 작성한 텍스트입니다.</i><br>
<u>이것은 밑줄로 강조된 텍스트입니다.</u><br>
<s>이것은 취소선으로 표시된 텍스트입니다.</s><br>
<sup>이것은 윗첨자로 표시된 텍스트입니다.</sup><br>
<sub>이것은 아래첨자로 표시된 텍스트입니다.</sub><br>
<mark>이것은 하이라이팅된 텍스트입니다.</mark><br>
<pre><code>이것은 코드 블록으로 표시된 텍스트입니다.</code></pre><br>
<small>이것은 작게 표시되는 텍스트입니다.</small>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세번재 문제</title>
</head>
<body>
아래와 같이 강조 표시를 하는 문단을 만드세요(표시가 똑같을 경우 아무거나 사용)
<h1>HTML에 대한 사설</h1>
<p>
HTML이 직관적인 것은 <b>사실</b>이나 그만큼 표시할게 많아 보이는 것도 사실입니다.<br>
더불어 로직을 만들어 쓸 수 없기 때문에 <i>HTML을 개발언어로 볼 수 없습니다.</i>
</p>
<p>
그러나 HTML<small>(CSS와 JS를 포함)</small>은 거의 유일한 프론트엔드 언어로서 사용됩니다.<br>
웹 환경에서는 마치 H<sub>2</sub>O와 같습니다. 필수이죠.<br>
<b>HTML 만세!</b> <s>그래도 HTML은 어지러워!</s>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>종합</title>
</head>
<body>
<h1>HTML 배우기</h1>
<h3>작성자: 박소연</h3>
<p>
HTML은 <b>마크업 언어</b>입니다.
마크업은 말 그대로 <i>'표시를 해준다'</i>는 뜻입니다.<br>
HTML을 보여주는 것을 목적으로 만들어진 언어입니다.
</p>
<p>
<<>와 <>>로 이루어진 태그로 이루어져 있습니다.<br>
이 때, 내용이 있는 태그는 닫는 태그가 존재하며 내요을 넣을 필요 없는 태그는 닫는 태그 없이 사용됩니다.
</p>
<blockquote>
<b>'br'</b>이나 나중에 배울 <b>'img'</b>와 같은 태그는 닫는 태그 없이 사용됩니다.
</blockquote>
<p>
또한, 기본적인 <b>들여쓰기</b>나 <b>줄바꿈</b>은 코드상에서는 아무런 역할을 하지 않습니다.<br>
다만, 이러한 들여쓰기나 줄바꿈은 코드를 이해하기 편하게 하기 위해, 또 관계를 표현하기 위해 사용됩니다.
</p>
<p>
더불어 <b>HTML은 CSS와 JS를 이용하여 디자인과 기능을 추가</b>할 수 있습니다.
<small>(이 내용은 나중에 다룸)</small><br>
이를 복잡하게 이루면 현재 우리가 보는 여러 페이지를 구성할 수 있습니다.<br>
<s>그렇다고 지금 만들 수 있는 건 아닙니다...</s>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
/* body 요소의 배경색을 연노랑색으로 지정 */
body {
background-color: #FFFFE0;
}
</style>
<h1>라면 맛있게 끓이는 법</h1>
<img width="70%"
src="https://img2.daumcdn.net/thumb/R658x0.q70/?fname=https://t1.daumcdn.net/news/202211/01/dailylife/20221101120017394wgdh.jpg">
<br>
<b>재료</b> : 라면 1봉지, 계란 1알, 물 550ml<small>(종이컵 3잔)</small><br>
<br>
<i>!!!!불을 다룰 때 조심하시기 바랍니다!!!!</i><br>
<ol>
<li>냄비에 물을 넣고 스프를 미리 풀어놓는다.</li>
<li>
물이 끓어오르면 라면을 넣는다.<br>
이 때, 꼬들함을 살리려면 2분, 푹 익히려면 3분여를 끓인다.
</li>
<li>면이 골고루 읽도록 조금씩 저어준다.</li>
<li>조리가 30초가 남았을 때 계란을 넣고 면으로 덮어주고 남은 시간을 조리한다.</li>
<li>면을 그릇에 담고 계란이 터지지 않게 조심히 올린다.</li>
<li>먹기전 계란을 터트려 노른자와 면을 같이 먹거나 국물에 풀어 놓는다.</li>
</ol>
</body>
</html>
